@import url("https://rsms.me/inter/inter.css");

:root {

  /* PRIMARY */
  --tblr-primary: #1EB0B0;
  --tblr-primary-rgb: 30, 176, 176;
  --tblr-primary-dark: #169898;
  --tblr-primary-light: #5ED3D3;

  /* BACKGROUND */
  --tblr-bg-surface: #F8FAFC;
  --tblr-body-bg: #F1F5F9;

  /* TEXT */
  --tblr-body-color: #1E293B;
  --tblr-muted: #64748B;

  /* BORDER */
  --tblr-border-color: #E2E8F0;
}

/* Indicador de carregamento NÃO-BLOQUEANTE: barra fina animada no topo.
   Substitui o antigo overlay de tela cheia com blur, que escondia toda a
   informação e passava sensação de lentidão. Não intercepta cliques. */
/* Overlay VISÍVEL de carregamento (o mesmo GIF do .bloqueio-carregando).
   Toda chamada de toggleLoading() em qualquer tela passa a mostrar este overlay,
   dando feedback visual real ao usuário (antes era uma barra fina quase invisível). */
.fundo-ajax {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100dvh;
  background-color: rgba(0, 0, 0, .35);
  background-image: url(/assets/owner/img/gps-ajax.gif);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 130px;
  z-index: 99999;
  display: none;
  cursor: wait;
}

/* Overlay fullscreen BLOQUEANTE — para ações que buscam dados (abrir edição, etc.).
   Escurece a tela e BLOQUEIA cliques enquanto carrega, deixando claro que é a rede.
   Distinto da .fundo-ajax (barra fina não-bloqueante do topo). */
.bloqueio-carregando {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100dvh;
  background-color: rgba(0, 0, 0, .35);
  background-image: url(/assets/owner/img/gps-ajax.gif);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 130px;
  z-index: 100000;
  display: none;
  cursor: wait;
}

/* Botao de acao das grids (editar/excluir/etc.) — DEFINICAO UNICA no sistema.
   Quadrado 28x28 so-icone. Nao redefinir em CSS de tela (removidas as copias
   divergentes que iam de 28 a 42px). */
.icone-dtable {
  width: 30px;
  height: 30px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: .8rem;
}

/* ===== Modal — branco por dentro, rodape (Salvar) sempre visivel, sem sobra =====
   Cor: o tema Tabler pinta footer e card-caps com --tblr-bg-surface-tertiary
   (cinza) e os campos herdam --tblr-bg-forms; forcamos branco no conteudo
   visivel e nos inputs (fica branco de verdade, como o dono pediu). */
.modal-content,
.modal-header,
.modal-body,
.modal-footer,
.modal .tab-content,
.modal .card,
.modal .card-header,
.modal .card-body,
.modal .card-footer {
  background-color: #fff;
}

.modal .form-control:not(:disabled),
.modal .form-select:not(:disabled) {
  background-color: #fff;
}

/* Rodape fixo + altura ao conteudo: o modal cresce ate o conteudo, mas limita a
   altura ao viewport e rola SO o corpo — header e footer ficam fixos
   (flex-shrink:0). Isso mantem o botao Salvar sempre visivel em modal alto E
   evita sobra de altura em modal curto, para TODAS as telas de uma vez
   (dispensa depender de modal-dialog-scrollable por tela). */
.modal-content {
  /* 3.5rem = margem do .modal-dialog no desktop (1.75rem x2). Subtrair isso faz
     o dialog INTEIRO caber no viewport -> nao aparece scroll EXTERNO (.modal);
     overflow:hidden contem a rolagem no corpo (so o modal-body rola). */
  max-height: calc(100dvh - 3.5rem);
  overflow: hidden;

  /* ⛔ O RAIO E DO COMPONENTE, e nao de cada tela.
     Estava escrito em quatro CSS diferentes -- abastecimento (18px e 16px),
     fornecedor (18px) e motoristas (18px) -- todos como `#id .modal-content`.
     Isso e (1,1,0): ID esmaga qualquer classe, entao a regra de tela cheia do
     celular nao conseguia zerar o raio e o modal ficava com os cantos
     arredondados ocupando a tela inteira. Trazer para ca resolve pela raiz, em
     vez de responder com !important.
     18px porque era o valor de tres dos quatro; o de 16px passa a 18px. */
  border-radius: 18px;
}

.modal-body {
  overflow-y: auto;
  padding: 1rem 1.25rem;
}

/* Fullscreen (categoriaveiculo=canvas, usuario=abas, cerca=mapa) usa a tela toda */
.modal-fullscreen > .modal-content {
  max-height: none;
}

/* ══ MODAL EM TELA CHEIA NO CELULAR E NO TABLET ════════════════════════════
   Ordem do dono: "o modal no mobile e para ser fullscreen".

   Ja existia -- em QUATRO telas, cada uma com a sua regra, e em DOIS
   breakpoints diferentes: abastecimento, fornecedor e motoristas em 991.98px,
   ibuttonsvinculo em 767.98px. As outras nao tinham nenhuma. Ou seja: o mesmo
   modal abria de um jeito numa tela e de outro na vizinha, dependendo de quem
   lembrou de escrever a regra.

   991.98px porque tres das quatro ja usavam esse valor e porque, num tablet em
   retrato, um formulario de cadastro tambem ganha com a tela toda. O rodape em
   duas colunas continua so no telefone (767.98px): dois botoes de 440px num
   tablet ficariam absurdos.

   ⚠️ O max-height de 100dvh - 3.5rem definido acima existe para descontar a
   margem do .modal-dialog no DESKTOP. Aqui a margem e zero, entao ele tem de
   virar 100%: senao sobra uma faixa morta embaixo do modal, do tamanho exato da
   margem que nao existe mais. */
@media (max-width: 991.98px) {
  .modal-dialog {
    width: 100%;
    max-width: none;
    height: 100%;
    margin: 0;
  }

  .modal-content {
    height: 100%;
    max-height: 100%;
    border: 0;
    border-radius: 0;
  }
}

.card{
  background-color: #fff;
}

/* BASE */
*{
  box-sizing:border-box;
}

body{
  background:var(--tblr-body-bg);
  color:var(--tblr-body-color);
  margin:0;
  overflow-x:hidden;
}

body.menu-aberto{
  overflow:hidden;
}

.mt-area-app-site{
  margin-top:40px;
}

/* ============================= */
/* MENUS SUPERIORES */
/* ============================= */

.menu-geral,
.menu-atalhos{
  height:40px;
  display:flex;
  align-items:center;
}

/* MENU PRINCIPAL */
.menu-geral{
  display:flex;
  align-items:center;
  gap:6px;
  padding:4px 8px;
  background:#fff;
  position:fixed;
  width:100%;
  max-width:460px;
  top:8px;
  left:8px;
  z-index:999;
  box-shadow:0 2px 4px rgba(0,0,0,.08);
  border-radius:4px;
}

.menu-geral .row{
  width:100%;
  flex:1;
}

.menu-geral .col{
  flex:1;
  display:flex;
  min-width:0;
}

/* MENU ATALHOS */
.menu-atalhos{
  padding:4px 8px;
  background:#fff;
  position:fixed;
  top:8px;
  right:8px;
  z-index:998;
  box-shadow:0 2px 4px rgba(0,0,0,.08);
  border-radius:4px;
  display:flex;
  align-items:center;
}

.logo-menu{
  max-height:32px;
}

/* BOTÕES */
.btn-menu,
.btn-atalho{
  display:flex;
  align-items:center;
  justify-content:center;
  width:28px;
  height:28px;
  color:var(--tblr-body-color);
  text-decoration:none;
}

/* Badge de alertas não lidos no sino do header */
.btn-atalho-notif{
  position:relative;
}
.badge-alertas-topo{
  position:absolute;
  top:1px;
  right:1px;
  background:#e74c3c;
  color:#fff;
  border-radius:10px;
  font-size:9px;
  font-weight:700;
  line-height:1;
  min-width:15px;
  height:15px;
  padding:2px 3px;
  display:flex;
  align-items:center;
  justify-content:center;
  pointer-events:none;
  box-shadow:0 0 0 2px #fff;
}

/* Garante texto branco em todos os badges coloridos (Tabler não força por padrão) */
.badge.bg-danger,
.badge.bg-success,
.badge.bg-primary,
.badge.bg-secondary,
.badge.bg-warning {
  color: #fff !important;
}

.btn-menu i,
.btn-atalho i{
  font-size:16px !important;
}

/* PESQUISA TOPO */
.box-pesquisa{
  display:flex;
  align-items:center;
  width:100%;
  border:1px solid var(--tblr-border-color);
  border-radius:4px;
  overflow:hidden;
  height:26px;
}

.campo-pesquisa{
  flex:1;
  width:100%;
  min-width:0;
  border:none;
  padding:3px 6px;
  font-size:12px;
  background:transparent;
}

.campo-pesquisa:focus{
  outline:none;
}

.btn-pesquisa{
  border:none;
  background:#f5f5f5;
  padding:3px 6px;
  cursor:pointer;
  font-size:12px;
}

.box-pesquisa-veiculo{
  position:relative;
  display:block;
  height:auto;
  border:none;
  overflow:visible;
  background:transparent;
}

.box-pesquisa-veiculo .box-pesquisa-controles{
  display:flex;
  align-items:center;
  width:100%;
  border:1px solid var(--tblr-border-color);
  border-radius:4px;
  overflow:hidden;
  height:26px;
  background:#fff;
}

.box-pesquisa-veiculo .campo-pesquisa{
  text-transform:uppercase;
}

.topo-autocomplete-veiculo{
  position:absolute;
  top:calc(100% + 6px);
  left:0;
  right:0;
  background:#fff;
  border:1.5px solid var(--tblr-primary, #1EB0B0);
  border-radius:0 0 .5rem .5rem;
  box-shadow:0 8px 28px rgba(30, 176, 176, .14), 0 2px 6px rgba(15, 23, 42, .07);
  z-index:4000;
  overflow:hidden;
  max-height:320px;
  overflow-y:auto;
}
.topo-autocomplete-veiculo::-webkit-scrollbar{width:4px}
.topo-autocomplete-veiculo::-webkit-scrollbar-track{background:transparent}
.topo-autocomplete-veiculo::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:4px}
.topo-autocomplete-veiculo::-webkit-scrollbar-thumb:hover{background:var(--tblr-primary, #1EB0B0)}

.topo-autocomplete-veiculo[hidden]{
  display:none !important;
}

.topo-autocomplete-item{
  display:flex;
  flex-direction:column;
  gap:2px;
  padding:.48rem .875rem;
  text-decoration:none;
  color:var(--tblr-body-color);
  border-bottom:none;
  border-left:3px solid transparent;
  background:#fff;
  transition:background .1s ease, border-left-color .1s ease;
}

.topo-autocomplete-item:last-child{
  border-bottom:none;
}

.topo-autocomplete-item:hover,
.topo-autocomplete-item:focus,
.topo-autocomplete-item.ativo{
  background:rgba(30, 176, 176, .07);
  color:var(--tblr-body-color);
  border-left-color:var(--tblr-primary, #1EB0B0);
}

.topo-autocomplete-principal{
  display:block;
  font-size:13px;
  font-weight:600;
  line-height:1.2;
}
.topo-autocomplete-item:hover .topo-autocomplete-principal,
.topo-autocomplete-item:focus .topo-autocomplete-principal,
.topo-autocomplete-item.ativo .topo-autocomplete-principal{
  color:var(--tblr-primary-dark, #169898);
}

.topo-autocomplete-secundario{
  display:block;
  font-size:11px;
  line-height:1.25;
  color:var(--tblr-muted);
}

.topo-autocomplete-carregando,
.topo-autocomplete-vazio{
  padding:12px;
  font-size:12px;
  color:var(--tblr-muted);
}

/* ============================= */
/* DROPDOWN TOPO */
/* ============================= */

.dropdown-topo{
  position:relative;
}

.dropdown-menu-topo{
  min-width:210px;
  padding:6px 0;
  margin-top:8px;
  border:1px solid var(--tblr-border-color);
  border-radius:8px;
  box-shadow:0 8px 24px rgba(15, 23, 42, .12);
  background:#fff;
  z-index:3000;
}

.dropdown-menu-topo .dropdown-item{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 14px;
  font-size:13px;
  color:var(--tblr-body-color);
  text-decoration:none;
  background:transparent;
}

.dropdown-menu-topo .dropdown-item:hover,
.dropdown-menu-topo .dropdown-item:focus{
  background:#f8fafc;
  color:var(--tblr-body-color);
}

.dropdown-menu-topo .dropdown-item i{
  width:16px;
  text-align:center;
  font-size:14px !important;
  flex:0 0 16px;
}

.dropdown-menu-topo .dropdown-item span{
  display:block;
  line-height:1.2;
}

/* remove seta padrão se existir */
.btn-atalho.dropdown-toggle::after{
  display:none !important;
}

/* ============================= */
/* OVERLAY */
/* ============================= */

.menu-overlay{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100dvh;
  background:rgba(0,0,0,.35);
  z-index:1998;
  display:none;
}

.menu-overlay.ativo{
  display:block;
}

/* ============================= */
/* MENU LATERAL */
/* ============================= */

.menu-lateral{
  position:fixed;
  top:0;
  left:-320px;
  width:280px;
  height:100dvh;
  background:#fff;
  z-index:1999;
  transition:.25s ease;
  box-shadow:2px 0 10px rgba(0,0,0,.18);
  display:flex;
  flex-direction:column;
  overflow:hidden;
}

.menu-lateral.ativo{
  left:0;
}

/* TOPO MENU */
.menu-topo{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:10px;
  border-bottom:1px solid var(--tblr-border-color);
  flex-shrink:0;
}

.menu-logo img{
  height:26px;
}

.btn-fechar-menu{
  border:none;
  background:none;
  cursor:pointer;
  font-size:18px;
  color:var(--tblr-body-color);
}

/* BUSCA MENU */
.menu-busca{
  padding:10px;
  border-bottom:1px solid var(--tblr-border-color);
  flex-shrink:0;
}

.menu-busca input{
  width:100%;
  border:1px solid var(--tblr-border-color);
  padding:8px 10px;
  border-radius:6px;
  font-size:14px;
}

/* ============================= */
/* OPÇÕES MENU */
/* ============================= */

.menu-opcoes{
  flex:1;
  min-height:0;
  overflow-y:auto;
  overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
  padding:6px 0 20px 0;
}

.menu-item{
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px 14px;
  text-decoration:none;
  color:var(--tblr-body-color);
  border-bottom:1px solid #f3f3f3;
  user-select:none;
}

.menu-item:hover{
  background:#f5f5f5;
}

.menu-item i{
  width:18px;
  text-align:center;
}

.menu-item .seta{
  margin-left:auto;
  font-size:12px;
  opacity:.7;
}

.menu-sub{
  background:#fafafa;
  border-bottom:1px solid #f3f3f3;
}

.menu-sub.collapse{
  display:none;
}

.menu-sub.show{
  display:block;
}

.menu-sub-item{
  display:block;
  padding:10px 14px 10px 44px;
  text-decoration:none;
  font-size:13px;
  color:#334155;
}

.menu-sub-item:hover{
  background:#f1f5f9;
}

.menu-fim{
  height:20px;
}

/* ============================= */
/* MOBILE */
/* ============================= */

@media (max-width:768px){

  .mt-area-app-site{
    margin-top:52px;
  }

  .menu-geral{
    top:0;
    left:0;
    max-width:100%;
    height:52px;
    padding:6px 10px;
    border-radius:0;
  }

  .menu-atalhos{
    display:none;
  }

  .logo-menu{
    max-height:30px;
  }

  .btn-menu{
    width:42px;
    height:42px;
  }

  .btn-menu i{
    font-size:20px !important;
  }

  .box-pesquisa{
    height:38px;
  }

  .campo-pesquisa{
    font-size:16px;
    padding:7px 10px;
  }

  .btn-pesquisa{
    padding:7px 12px;
    font-size:16px;
  }

  .box-pesquisa-veiculo{
    height:auto;
  }

  .box-pesquisa-veiculo .box-pesquisa-controles{
    height:38px;
  }

  .topo-autocomplete-item{
    padding:11px 12px;
  }

  .topo-autocomplete-principal{
    font-size:14px;
  }

  .topo-autocomplete-secundario,
  .topo-autocomplete-carregando,
  .topo-autocomplete-vazio{
    font-size:12px;
  }

  .menu-lateral{
    width:290px;
  }

  .menu-busca input{
    font-size:16px;
    padding:10px 12px;
  }

  .menu-item{
    padding:14px 16px;
    font-size:16px;
  }

  .menu-sub-item{
    padding:12px 16px 12px 50px;
    font-size:15px;
  }

  .dropdown-menu-topo{
    min-width:220px;
  }

  .dropdown-menu-topo .dropdown-item{
    font-size:14px;
    padding:11px 14px;
  }

  /* ARMADILHA DO iOS: o Safari do iPhone dá ZOOM automático na página inteira
     sempre que o dedo foca um input com fonte < 16px — a tela "salta" e o usuário
     precisa dar pinch-out a cada campo. Este piso de 16px em TODOS os controles de
     formulário mata o efeito em todas as telas de uma vez. O visual "compacto" dos
     campos -sm continua vindo do padding; só a FONTE não pode descer de 16px.
     (Regra única aqui: cada tela que reduzia a fonte do próprio input herda isto.) */
  .form-control,
  .form-select,
  .form-control-sm,
  .form-select-sm,
  textarea.form-control,
  input[type="text"],
  input[type="search"],
  input[type="number"],
  input[type="email"],
  input[type="tel"],
  input[type="password"],
  input[type="date"],
  input[type="datetime-local"],
  input[type="time"],
  .ss-search,
  .ss-box,
  .autocomplete-input{
    font-size:16px;
  }
}

/* ─── Select com busca (sSelect) — widget reutilizável ─────────────────── */

select.ss-hidden {
    position: absolute;
    width: 0;
    height: 0;
    opacity: 0;
    pointer-events: none;
    overflow: hidden;
}

.ss-wrap {
    position: relative;
}

/* Gatilho */
.ss-box {
    cursor: pointer;
    user-select: none;
    min-height: 36px;
    background-image: none !important;
    padding-right: 2.25rem !important;
    position: relative;
    transition: border-color .15s ease, box-shadow .15s ease;
}

/* ══ O SELECT DE "Mostrar N registros" GANHA A SETA DA CASA ════════════════
   Em <select> nativo nao da para usar ::after -- elemento substituido nao
   renderiza pseudo-elemento. O mesmo triangulo do .ss-box::after vai como
   imagem de fundo: 8px de base, 5px de altura, #94a3b8, no mesmo .75rem da
   borda direita. Fica identico ao widget, e nao ao chevron TRACADO que o
   Tabler poe por padrao no .form-select -- que e outro desenho.
   (0,2,1) contra os (0,1,0) do .form-select do Tabler: ganha por peso, e ainda
   por ordem, que esta folha carrega depois. */
.dataTables_wrapper .dataTables_length select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 5'%3e%3cpath fill='%2394a3b8' d='M0 0h8L4 5z'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right .75rem center;
    background-size: 8px 5px;
    padding-right: 2.25rem;
    min-height: 36px;
}
/* Foco teal, o mesmo do .ss-box:focus logo abaixo. */
.dataTables_wrapper .dataTables_length select:focus {
    border-color: var(--tblr-primary, #1EB0B0);
    box-shadow: 0 0 0 .2rem rgba(30, 176, 176, .18);
    outline: none;
}

/* Seta chevron */
.ss-box::after {
    content: "";
    position: absolute;
    right: .75rem;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid #94a3b8;
    pointer-events: none;
    transition: transform .2s ease, border-top-color .15s ease;
}

/* Seta rotaciona quando aberto */
.ss-box.ss-open::after {
    transform: translateY(-50%) rotate(180deg);
    border-top-color: var(--tblr-primary, #1EB0B0);
}

/* Foco com teal */
.ss-box:focus {
    border-color: var(--tblr-primary, #1EB0B0);
    box-shadow: 0 0 0 .2rem rgba(30, 176, 176, .18);
    outline: none;
}

/* Texto selecionado levemente mais bold */
.ss-box-text {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ss-box-text.ss-placeholder {
    color: var(--tblr-secondary-color, #94a3b8);
}

.ss-box-text:not(.ss-placeholder) {
    font-weight: 500;
}

/* Painel dropdown — position:fixed para escapar de qualquer overflow container
   (modais com overflow:auto, divs scrolláveis, etc.).
   top / left / width são calculados via JS em sSelectAbrir(). */
.ss-panel {
    position: fixed;
    /* 1250 e nao 1075. O valor antigo so mirava o modal do Bootstrap (1050) e o
       backdrop (1040), e por isso a lista abria ATRAS das telas que empilham mais
       alto. Medido no Meu Veiculo, 19/08/2026: o painel de filtro fica em 1140 e a
       tela ainda usa 1118 / 1124 / 1130 / 1160 / 1200. A lista abria em 1075 --
       existia, estava aberta (a seta do campo virava para cima) e ficava INVISIVEL
       debaixo do proprio painel. Para o dono era 'nao consigo alterar o filtro'.
       1250 fica acima de tudo que este sistema empilha e acima do modal do
       Bootstrap. E o comportamento certo para um menu suspenso: ele e transitorio e
       so existe porque o usuario pediu -- tem de ficar por cima do que o gerou. */
    z-index: 1250;
    background: #fff;
    border: 1.5px solid var(--tblr-primary, #1EB0B0);
    border-radius: .5rem;
    box-shadow: 0 8px 28px rgba(30, 176, 176, .14), 0 2px 6px rgba(15, 23, 42, .07);
    overflow: hidden;
    min-width: 160px;
}

/* Campo de busca */
.ss-search-wrap {
    padding: .45rem .5rem;
    border-bottom: 1px solid var(--tblr-border-color, #e2e8f0);
    background: #f8fafc;
}

.ss-search {
    width: 100%;
}

.ss-search:focus {
    border-color: var(--tblr-primary, #1EB0B0) !important;
    box-shadow: 0 0 0 .15rem rgba(30, 176, 176, .15) !important;
}

/* Lista de itens */
.ss-list {
    max-height: 220px;
    overflow-y: auto;
    padding: .2rem 0;
}

/* Scrollbar fina e teal */
.ss-list::-webkit-scrollbar {
    width: 4px;
}
.ss-list::-webkit-scrollbar-track {
    background: transparent;
}
.ss-list::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 4px;
}
.ss-list::-webkit-scrollbar-thumb:hover {
    background: var(--tblr-primary, #1EB0B0);
}

/* Itens */
.ss-item {
    padding: .48rem .875rem;
    font-size: .875rem;
    cursor: pointer;
    color: var(--tblr-body-color, #1e293b);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border-left: 3px solid transparent;
    transition: background .1s ease, color .1s ease, border-left-color .1s ease;
}

.ss-item:hover {
    background: rgba(30, 176, 176, .07);
    color: var(--tblr-primary-dark, #169898);
    border-left-color: var(--tblr-primary, #1EB0B0);
}

.ss-item.ss-item-selected {
    background: rgba(30, 176, 176, .11);
    color: var(--tblr-primary, #1EB0B0);
    font-weight: 600;
    border-left-color: var(--tblr-primary, #1EB0B0);
}

.ss-item.ss-item-placeholder {
    color: #94a3b8;
    font-style: italic;
    border-left-color: transparent;
}

.ss-item.ss-item-placeholder:hover {
    background: #f8fafc;
    color: #94a3b8;
    border-left-color: transparent;
}

/* Variante sm */
.form-select-sm + .ss-wrap .ss-box,
.ss-wrap .ss-box.form-select-sm {
    min-height: 29px;
    font-size: .875rem;
    padding: .2rem .5rem;
}

/* ==========================================================================
   Linha de metadados discreta (Codigo / Criado em / Atualizado em / etc.)
   Substitui os campos readonly grandes por UMA linha muted no topo do modal.
   Os valores continuam sendo <input> (id/name/.val intactos => ZERO mudanca
   de JS: populate/novo/save funcionam igual). A linha some sozinha quando o
   registro e novo (input ancora vazio => :placeholder-shown).
   ========================================================================== */
.linha-metadados {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 8px;
}

/* Cada rotulo+valor fica junto (nao quebra no meio) */
.linha-metadados .meta-item {
    white-space: nowrap;
}

.linha-metadados .meta-ico {
    opacity: .55;
    margin-right: 1px;
}

/* O VALOR e um <span> preenchido pelo helper global sincronizarMetadados()
   a partir do <input type=hidden> irmao. Span abraca o conteudo => sem vao,
   sem alinhamento que "dança" com o tamanho do valor. */
.linha-metadados .meta-valor {
    color: var(--tblr-body-color);
    font-weight: 500;
}

.linha-metadados .meta-sep {
    opacity: .4;
}

/* Registro novo: o valor-ancora (codigo) fica vazio => a linha inteira some */
.linha-metadados:has(.meta-anchor:empty) {
    display: none;
}

/* ── Autocomplete inline (cliente e outros) ── */
.ac-wrap {
    position: relative;
}
.ac-wrap .autocomplete-input,
.ac-wrap .form-control[readonly] {
    padding-right: 32px;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.ac-wrap .autocomplete-input { height: 42px; }
.input-group .ac-wrap .autocomplete-input,
.input-group .ac-wrap .form-control[readonly] {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
.ac-wrap .autocomplete-input:focus {
    border-color: var(--tblr-primary, #1EB0B0);
    box-shadow: 0 0 0 .2rem rgba(30, 176, 176, .18);
}
.ac-wrap .autocomplete-clear {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    padding: 0 2px;
    cursor: pointer;
    color: #9ca3af;
    font-size: 12px;
    line-height: 1;
    z-index: 2;
}
.ac-wrap .autocomplete-clear:hover { color: #374151; }
/* ⛔ z-index 1060 PASSAVA POR CIMA DA BARRA FIXA DO TOPO. A pilha da casa e:
     .menu-atalhos 998 e .menu-geral 999  -- a barra fixa;
     .menu-overlay 1998 e .menu-lateral 1999 -- o menu lateral.
   Com 1060 a lista do autocomplete ficava ACIMA da barra: rolando a pagina, ela
   aparecia desenhada sobre o logo e a busca do topo. Palavra do dono: "tambem tem
   que corrigir esse bug dele".
   990 poe a lista acima de qualquer conteudo da pagina e ABAIXO da barra fixa e
   do menu lateral -- que e a ordem certa: cromo do app nao some atras de
   conteudo.
   ⚠️ Dentro de MODAL continua funcionando: o modal cria o proprio contexto de
   empilhamento (1055), e a lista empilha DENTRO dele, acima do conteudo do modal
   e acima da barra junto com ele. z-index alto aqui nunca foi o que fazia isso
   funcionar. */
.ac-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 990;
    margin-top: 4px;
    background: #fff;
    border: 1.5px solid var(--tblr-primary, #1EB0B0);
    border-radius: .5rem;
    box-shadow: 0 8px 28px rgba(30, 176, 176, .14), 0 2px 6px rgba(15, 23, 42, .07);
    max-height: 240px;
    overflow-y: auto;
    list-style: none;
    margin-bottom: 0;
    padding: .2rem 0;
    display: none;
}
.ac-dropdown.aberto { display: block; }
.ac-dropdown::-webkit-scrollbar { width: 4px; }
.ac-dropdown::-webkit-scrollbar-track { background: transparent; }
.ac-dropdown::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
.ac-dropdown::-webkit-scrollbar-thumb:hover { background: var(--tblr-primary, #1EB0B0); }
.ac-dropdown li {
    padding: .48rem .875rem;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 1px;
    border-left: 3px solid transparent;
    transition: background .1s ease, border-left-color .1s ease;
}
.ac-dropdown li:hover,
.ac-dropdown li.ativo {
    background: rgba(30, 176, 176, .07);
    border-left-color: var(--tblr-primary, #1EB0B0);
}
.ac-dropdown li .ac-nome {
    font-weight: 600;
    font-size: .875rem;
    color: var(--tblr-body-color, #1e293b);
}
.ac-dropdown li:hover .ac-nome,
.ac-dropdown li.ativo .ac-nome {
    color: var(--tblr-primary-dark, #169898);
}
.ac-dropdown li .ac-detalhe {
    font-size: .78rem;
    color: #6b7280;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ac-dropdown .ac-vazio {
    padding: 10px 14px;
    color: #9ca3af;
    font-size: .85rem;
    cursor: default;
    border-left: none;
}
.ac-dropdown .ac-vazio:hover { background: none; }
/* ═══ Alvos de toque no celular (BASE) ══════════════════════════════════════
   No toque, alvo < ~40px é fácil de errar — e vários controles compartilhados
   têm 28-36px. Aqui a HIT-AREA cresce sem mexer no ícone visual, então o desktop
   (mouse) fica igual. `pointer:coarse` = dedo, não mouse. Ajustes por-tela
   (home/cercas/meuveiculo) ficam nos CSS de cada tela. */
@media (pointer: coarse) {
  /* Botões de ação das DataTables (editar/apagar) — 30px → 40px de toque */
  .icone-dtable {
    min-width: 40px;
    min-height: 40px;
  }
  /* Gatilho do select com busca (sSelect) -- e o select de "Mostrar N
     registros" das tabelas, que e do mesmo tipo: caixa que o dedo toca para
     abrir uma lista. Ficava em 36px e destoava de todos os outros. */
  .ss-box,
  .dataTables_wrapper .dataTables_length select {
    min-height: 44px;
  }
  /* Atalhos do cabeçalho: o carro (28px) e o X de fechar o menu lateral */
  .btn-atalho,
  .btn-fechar-menu {
    min-width: 40px;
    min-height: 40px;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   ALERTAS: fluir como texto, não como colunas.        31/07/2026

   O Tabler define .alert como display:flex; flex-direction:row; gap:1rem —
   pensado para o padrão "ícone numa coluna, texto na outra" (.alert-icon).
   Só que ESTE sistema escreve alerta como frase corrida: ícone inline (me-2)
   seguido de texto com <strong> no meio. Nesse formato CADA trecho vira um
   item do flex, e a frase estilhaça em colunas verticais — ilegível.

   Levantamento antes de mexer: 40 alertas montados em 8 arquivos de JS, e
   NENHUM lugar do sistema usa .alert-icon. Ou seja, o flex não serve a nada
   aqui e quebra em todo canto. Corrigir uma vez, no lugar certo, em vez de
   remendar tela a tela.

   ⚠️ Se um dia alguém quiser o layout de duas colunas do Tabler, use a classe
   .alert-flex abaixo em vez de remover esta regra.
   ═══════════════════════════════════════════════════════════════════════ */
.alert { display: block; }
.alert.alert-flex { display: flex; flex-direction: row; gap: 1rem; }

/* ═══════════════════════════════════════════════════════════════════════
   ALVO DE TOQUE MÍNIMO NO CELULAR.                    31/07/2026

   Regra do checklist de mobile do projeto: alvo menor que 40px erra o
   clique no dedo. O sistema usa .btn-sm em quase toda tela (28px de
   altura) — ótimo para mouse, ruim para toque.

   Aqui a altura mínima é garantida SÓ em telas de toque, e só a altura:
   a largura continua livre, então nenhum layout de linha se desfaz. Em
   monitor nada muda.

   Feito no global.css de propósito: são ~30 telas com o mesmo padrão, e
   corrigir uma a uma deixaria a maioria quebrada.
   ═══════════════════════════════════════════════════════════════════════ */
/* ⚠️ SEM "and (pointer: coarse)": essa condição não casa em navegador de
   desktop redimensionado, então a regra ficava INVERIFICÁVEL — passaria em
   teste sem nunca ter sido aplicada. Só a largura basta: janela estreita no
   monitor ganhar botão de 40px não atrapalha ninguém. */
@media (max-width: 767.98px) {
  .btn-sm,
  .btn-group-sm > .btn {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  /* Ícone sozinho dentro do botão também precisa de área clicável. */
  .btn-icon { min-width: 40px; }
  /* Campo < 16px faz o iOS dar zoom sozinho e o usuário perde a página. */
  .form-control, .form-select { font-size: 16px; }
}

/* ══ DataTables Responsive — A LINHA REVELADA (o "+") ═══════════════════════
   Vale para TODAS as tabelas do sistema, por ordem do dono: "preciso que esse
   componente esteja em todas as tabelas do sistema, sendo possivel revelar
   informacoes no dispositivo mobile".

   ⛔ QUEBRAR O TEXTO, NUNCA ESTICAR A TABELA. Ao abrir o "+", o Responsive monta
   a lista das colunas escondidas reaproveitando o conteudo da celula -- e as
   colunas .text-truncate trazem junto o white-space: nowrap. Um endereco longo
   passava a esticar a TABELA INTEIRA: aparecia rolagem lateral e as datas da
   coluna vizinha ficavam cortadas pela metade. Palavra do dono: "a tabela nao
   deve dar scroll depois de revelar o conteudo, deve ajustar ele dentro da
   linha".
   O !important vence o nowrap herdado da classe da coluna, e o
   overflow-wrap: anywhere cobre o texto sem espaco (URL, IMEI colado), que o
   word-break sozinho nao quebra.
   MEDIDO a 375px na tabela de eventos, com um endereco de 66 caracteres:
   rolagem lateral ZERO antes e depois de abrir, e a data vizinha inteira. */
td.child,
.dtr-details,
.dtr-details li,
.dtr-title,
.dtr-data {
    white-space: normal !important;
    word-break: break-word;
    overflow-wrap: anywhere;
}

/* A lista ocupa a largura toda da linha, em vez de virar uma coluna estreita
   com o texto empurrando para fora dela. */
.dtr-details { width: 100%; display: block; }
.dtr-details li { display: block; width: auto; }

/* ══ .filtro-fileira — O CABECALHO DE FILTRO DAS TELAS DE LISTA ═══════════
   Ordem do dono: "os componentes entre as telas precisam ter padroes". Ele
   escolheu o desenho do Dashboard Operacional: cartao "Filtro" proprio, cada
   campo com seu rotulo. Esta classe e o que torna isso UM componente.

   ⛔ A REGRA E LEGIBILIDADE, NAO "UMA LINHA". Eu ja errei este componente duas
   vezes em direcoes opostas, e as duas viraram print do dono:
     · deixando quebrar solto -> um campo caia sozinho numa segunda linha com um
       vao enorme a direita ("muito espaco desperdicado");
     · forcando flex-wrap: nowrap -> sete controles espremidos a 181px cada, com
       "Todos os v..." e "Excesso de" cortados ("nao da pra ler o que esta dentro
       do campo").
   O erro comum as duas foi tratar o numero de linhas como o objetivo. Nao e: o
   objetivo e o campo ser LEGIVEL. Com um piso de largura por campo, a fileira
   se resolve sozinha -- cabe em uma linha quando cabe, e quebra numa GRADE
   alinhada quando nao cabe, sem nunca cortar o texto.

   Os pisos saem do conteudo real de cada tipo, nao de gosto:
     220px  campo com botao ao lado (input-group do Cliente: o texto e um nome
            de empresa e ainda divide a caixa com a lupa)
     190px  select  ('Excesso de Velocidade', 'Todos os veiculos')
     150px  data    (dd/mm/aaaa mais o icone do calendario) */

.filtro-fileira > [class*="col-"] { min-width: 0; }

/* Campos crescem e encolhem juntos, com piso. flex-basis no piso e o que faz
   duas linhas ficarem ALINHADAS entre si em vez de escalonadas. */
.filtro-fileira > [class*="col-"]:not([class*="-auto"]) {
    flex: 1 1 190px;
}
.filtro-fileira > [class*="col-"]:has(.input-group) { flex-basis: 220px; }
.filtro-fileira > [class*="col-"]:has(input[type="date"]) { flex-basis: 150px; }

/* ⛔ QUALQUER col-*-auto, e nao so o col-lg-auto -- este seletor estreito ja foi
   defeito: as marcacoes (col-md-auto) e os botoes (col-sm-auto) nao casavam com
   ele e eram espremidos como se fossem campos, empilhando um sobre o outro.
   Quem e "auto" tem largura de conteudo, por definicao. */
.filtro-fileira > [class*="col-"][class*="-auto"],
.filtro-fileira > .col-auto { flex: 0 0 auto; width: auto; max-width: none; }

.filtro-fileira .btn { white-space: nowrap; }

/* ⛔ O BOTAO DE BUSCA NUNCA CAI PARA BAIXO DO CAMPO. O .input-group do Bootstrap
   e flex-wrap: wrap: quando a coluna aperta, ele empilha o botao debaixo do
   input e o campo fica com o dobro da altura, desalinhado da fileira. MEDIDO no
   print do dono: input-group de 173px com 82px de altura.

   ⚠️ ESTA REGRA JA EXISTIA, PRESA AO ESCOPO .filtro-fileira -- e por isso o mesmo
   defeito reapareceu na tela de fornecedor, que nao usa aquele componente: o
   botao de lupa caiu para baixo do campo no filtro E dentro do modal. Escrever
   uma segunda regra igual seria repetir o erro; ela saiu do escopo e passou a
   valer onde o problema existe -- qualquer input-group que contenha um
   autocomplete, esteja ele numa fileira de filtro, num modal ou solto.

   O min-width: 0 e o que TORNA o nowrap possivel: sem ele o campo se recusa a
   encolher abaixo do proprio conteudo e empurra o botao para fora de qualquer
   jeito. Os dois andam juntos.

   ⚠️ So para input-group COM autocomplete: ha grupos de varios botoes por ai em
   que quebrar e o comportamento certo. */
.input-group:has(.autocomplete-input),
.input-group:has(.ac-wrap),
.input-group:has(.ac-cliente-wrap) { flex-wrap: nowrap; }

.input-group > .ac-wrap,
.input-group > .ac-cliente-wrap,
.filtro-fileira .input-group > .form-control { min-width: 0; }

/* No celular cada campo ocupa a linha inteira e o botao vira alvo de dedo. */
@media (max-width: 575.98px) {
    .filtro-fileira .btn { min-height: 38px; }
    .filtro-fileira .acoes-filtro { display: flex; gap: .5rem; }
    .filtro-fileira .acoes-filtro > * { flex: 1 1 0; }
}

/* ══ .acoes-cabecalho — OS BOTOES DE ACAO DO TOPO DA TELA ══════════════════
   Atualizar / Marcar todos / Log tecnico e companhia. No desktop eles ficam
   lado a lado, encostados a direita, com a largura do proprio texto.

   ⛔ NO CELULAR ELES VIRAM UMA GRADE DE VERDADE. Soltos num flex-wrap, cada
   um tem a largura do seu texto e a quebra sai irregular: "Atualizar" e
   "Marcar todos tratados" dividiam a primeira linha em tamanhos diferentes e
   "Log tecnico" caia sozinho embaixo, desalinhado dos dois. Palavra do dono:
   "grade botoes bagunçada".
   Duas colunas iguais resolvem o alinhamento; e o :last-child:nth-child(odd)
   faz o botao IMPAR ocupar a linha inteira, em vez de deixar um buraco do lado
   dele. Com 3 botoes: dois em cima do mesmo tamanho, um embaixo ocupando tudo.
   Serve para 1, 2, 3 ou 4 botoes sem regra nova. */
@media (max-width: 575.98px) {
    .acoes-cabecalho {
        /* ⛔ !important porque o wrapper tambem carrega .d-flex, e o Bootstrap
           escreve `.d-flex { display: flex !important }`. Sem isto a grade nao
           aplica: MEDIDO display:flex e os tres botoes empilhados em largura
           inteira, gastando tres linhas. Mesma armadilha do [hidden] contra as
           classes de display -- so !important vence !important. */
        display: grid !important;
        /* ⚠️ minmax(0, 1fr) e nao 1fr. `1fr` respeita o min-content da celula:
           "Marcar todos tratados" e mais largo que a metade e empurrava o vizinho
           -- MEDIDO 145px contra 164px, com a grade parecendo torta justamente
           onde ela deveria alinhar. Com minmax(0,...) as duas colunas ficam
           iguais de verdade e o texto do botao cede. */
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: .5rem;
        width: 100%;
    }
    .acoes-cabecalho > * { width: 100%; }
    .acoes-cabecalho > *:last-child:nth-child(odd) { grid-column: 1 / -1; }
    /* Alvo de dedo: o checklist de mobile do projeto trata menos de 40px como
       defeito, e estes sao btn-sm. */
    .acoes-cabecalho > .btn { min-height: 38px; }

    /* ⛔ O ROTULO QUEBRA A LINHA EM VEZ DE VAZAR PARA FORA DO BOTAO.
       O Tabler poe white-space:nowrap em .btn e o botao fica com overflow
       visivel: rotulo que nao cabe na celula NAO e cortado nem quebrado -- ele
       ESCORRE por cima do que estiver ao lado. Numa grade de duas colunas
       iguais isso acontece sempre que o texto passa de metade da largura.

       MEDIDO a 375px, celula de 143px:
           alertasveiculos          "Marcar todos tratados"    164px  vazava
           setuprapido              "Atualizar dispositivos"   159px  vazava
           setuprapido              "Iniciar configuracao"     151px  vazava
           modelorastreadorcomando  "Copiar conteudo do dic."  164px  vazava

       Ou seja: nao era defeito de uma tela: a propria tela-referencia do
       padrao vazava. Duas linhas num botao de 143px sao feias; texto por cima
       do botao vizinho e pior, e some sem avisar. */
    .acoes-cabecalho > .btn {
        white-space: normal;
        line-height: 1.25;
    }
}
/* ══ .filtro-rodape — A SEGUNDA LINHA DO CARTAO DE FILTRO ══════════════════
   Marcacoes a esquerda, acoes a direita. Anda junto com .filtro-fileira: os
   campos ficam em cima, numa grade alinhada, e o que se FAZ com eles fica
   embaixo.

   ⛔ POR QUE ELES NAO PODEM MORAR NA FILEIRA DOS CAMPOS: ali eles disputam a
   sobra. As duas marcacoes ficavam espremidas no fim da linha ("Nao tratados"
   encostado na borda) e os botoes caiam sozinhos numa segunda linha,
   desalinhados de tudo -- foi o print que o dono chamou de horrivel. Marcacao
   e botao nao sao campos: nao tem rotulo em cima, nao tem a mesma altura e
   nao seguem a mesma grade. */
.filtro-rodape {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin-top: .75rem;
}
.filtro-rodape-flags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
}
/* As acoes do filtro moram na DIREITA -- e o canto onde a decisao acontece,
   depois de o olho ter percorrido os campos.
   ⚠️ margin-left:auto SO empurra quando sobra folga, e sobra folga so quando o
   componente e item flex de .filtro-rodape (alertas, alertasveiculos, cerca).
   Na sessoesrastreador ele e a 12a CELULA da grade: dentro dela o flex ja nasce
   com a largura toda, nao ha folga nenhuma para consumir e o margin-left virava
   letra morta -- os botoes ficavam colados a esquerda com um vao morto ao lado.
   justify-content resolve por dentro e serve aos dois casos: quando o container
   encolhe ate o conteudo (item flex) ele nao tem efeito algum. */
.filtro-rodape-acoes {
    display: flex;
    gap: .5rem;
    margin-left: auto;
    justify-content: flex-end;
}

/* No celular a decisao ocupa a largura toda: dois botoes de meia largura sao
   alvo de dedo confortavel, e as marcacoes ficam acima deles, legiveis. */
@media (max-width: 575.98px) {
    .filtro-rodape { flex-direction: column; align-items: stretch; }
    .filtro-rodape-acoes { margin-left: 0; }
    .filtro-rodape-acoes > .btn { flex: 1 1 0; min-height: 38px; }
}
/* ══ DataTables NO CELULAR — vale para TODAS as telas do sistema ═══════════
   O dono: "muito amontoado". Tres coisas se atropelavam a 375px, e as tres
   nascem do layout padrao do dataTables.bootstrap4, que e feito para desktop:
   o dom monta <'col-sm-12 col-md-6'l> e <'col-sm-12 col-md-6'f> lado a lado.

   1) "Mostrar 25 registros" e "Filtro rapido:" dividiam a linha em metades de
      ~150px: o select ficava colado no texto e a caixa de busca VAZAVA para
      fora do cartao. Cada um passa a ocupar a linha inteira.
   2) A caixa de busca e um <input> dentro de um <label>: sem width ela usa o
      tamanho padrao do navegador e ignora a coluna. Vai a 100%.
   3) Os botoes de acao empilhavam um sobre o outro. O render deles usa
      `d-flex ... flex-wrap`, e com a coluna estreita o wrap manda cada um para
      uma linha -- tres botoes de 34px viram 120px de altura, esticando a linha
      inteira. Sao pequenos e cabem lado a lado: nowrap resolve, e ainda devolve
      largura para a coluna do veiculo, que estava quebrando em quatro linhas. */
@media (max-width: 575.98px) {
    /* ⛔ DESVIO 1 -- 4px: o wrapper do DataTables poe cada controle numa coluna
       do grid, e o proprio dataTables.bootstrap4 zera SO a borda de fora de cada
       ponta:
           div.table-responsive>...>div[class^="col-"]:first-child{padding-left:0}
           div.table-responsive>...>div[class^="col-"]:last-child {padding-right:0}
       Lado a lado no desktop isso e certo -- o que sobra no meio e o respiro
       entre os dois. EMPILHADOS no celular vira defeito: a primeira coluna fica
       com padding-left 0 e a segunda mantem os 4px do gutter, entao o bloco de
       baixo nasce 4px a direita do de cima. Empilhado nao ha meio: zera os dois. */
    .dataTables_wrapper > .row > [class*="col-"] {
        padding-left: 0;
        padding-right: 0;
    }
    .dataTables_wrapper .dataTables_length,
    .dataTables_wrapper .dataTables_filter {
        width: 100%;
        float: none;
        margin-bottom: .5rem;
    }
    /* ⛔ O ROTULO DA BUSCA VAI PARA CIMA DA CAIXA. Em linha, os dois blocos
       ficavam em ESCADINHA: "Mostrar" tem 7 letras e "Filtro rapido:" tem 14,
       entao o select comecava num ponto e a caixa noutro, ~50px a direita. Nada
       alinhava com nada. Palavra do dono: "desalinhado desse jeito".
       Com o rotulo em cima, a caixa comeca na MARGEM -- alinhada com o texto
       "Mostrar" da linha de cima e com a tabela abaixo.
       O length continua em linha porque ele e uma FRASE: "Mostrar [25]
       registros" tem texto DOS DOIS LADOS do select e quebra-la seria pior. */
    .dataTables_wrapper .dataTables_length label {
        display: flex;
        align-items: center;
        gap: .5rem;
        width: 100%;
        margin-bottom: 0;
    }
    .dataTables_wrapper .dataTables_filter label {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: .25rem;
        width: 100%;
        margin-bottom: 0;
    }
    /* ⛔ DESVIO 2 -- 8px, e a razao de "nao alinhou nada". O dataTables.bootstrap4
       traz `div.dataTables_wrapper div.dataTables_filter input{margin-left:.5em}`,
       feito para afastar a caixa do rotulo quando os dois estao na MESMA linha.
       Com o rotulo em cima, isso vira recuo puro: 0.5em = 8px.
       ⚠️ E ELE VENCIA POR DOIS MOTIVOS, nao um:
         especificidade  (0,2,3) dele  contra  (0,2,1) da minha;
         ordem de carga  head.php:18 (biblioteca) DEPOIS de head.php:12 (esta folha).
       Empatar nao bastaria -- carregando depois, no empate ele leva. Por isso o
       `label` entrou no seletor: (0,2,4) ganha por peso, sem precisar de
       !important. O <input> e mesmo filho do <label>, o seletor nao mente. */
    div.dataTables_wrapper div.dataTables_filter label input {
        width: 100%;
        min-width: 0;
        margin-left: 0;
    }
    .dataTables_wrapper .dataTables_length select { flex: 0 0 auto; width: auto; }

    /* Acoes lado a lado. !important porque o flex-wrap vem de classe do
       Bootstrap escrita no render de cada tela. */
    table.dataTable td .d-flex.flex-wrap { flex-wrap: nowrap !important; }
    /* Alvo de dedo sem inchar a linha: o checklist do projeto trata abaixo de
       38px como defeito, e estes sao btn-sm dentro de tabela. */
    table.dataTable td .icone-dtable { min-width: 34px; min-height: 34px; }

    /* A paginacao ocupa a linha inteira.
       ⚠️ CENTRALIZAR AQUI SERIA MENTIRA, e por isso as duas declaracoes sairam.
       Quem centraliza o info e a paginacao no celular e a PROPRIA biblioteca,
       num bloco @media (max-width: 767px) que cobre este inteiro:
           div.dataTables_wrapper div.dataTables_info,
           div.dataTables_wrapper div.dataTables_paginate { text-align: center }
           ... ul.pagination { justify-content: center !important }
       Eu declarava os mesmos valores e nao vencia NENHUM dos dois -- (0,2,0) e
       (0,3,0) contra (0,2,2) e (0,3,3), a segunda ainda com !important, e a
       folha dela carregando depois. O resultado na tela estava certo por conta
       DELA, nao minha. Linha que nao decide nada mas parece decidir e pior que
       linha nenhuma: no dia em que a biblioteca mudar, quem ler este arquivo vai
       procurar o defeito no lugar errado. */
    .dataTables_wrapper .dataTables_info,
    .dataTables_wrapper .dataTables_paginate {
        width: 100%;
        float: none;
    }
}

/* ══ RODAPE DE MODAL NO CELULAR ════════════════════════════════════════════
   MEDIDO no modal de motorista a 375x667: o rodape ocupava 137px, ou 21% da
   ALTURA DA TELA, porque os dois botoes vinham empilhados em largura inteira.
   Num formulario de 17 campos com 418px de corpo, um quinto da tela gasto em
   dois botoes e caro.
   A causa era regra por tela -- tres delas, uma em cada CSS (motoristas,
   abastecimento, fornecedor), todas dizendo .btn { width: 100% }. Nenhuma
   errada sozinha; erradas por serem tres e por empilharem.

   Mesma forma ja aprovada no .acoes-cabecalho: grade de duas colunas iguais,
   e o botao IMPAR ocupa a linha inteira. Cancelar a esquerda, a acao
   principal a direita -- que e a ordem em que os dois ja aparecem no markup.
   min-height 44px e o alvo de dedo da casa, o mesmo do .ss-box. */
@media (max-width: 767.98px) {
    .modal-footer {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: .5rem;
    }

    /* width auto: o .btn nao precisa mais esticar, a celula ja o dimensiona.
       margin 0 porque o Bootstrap poe margem entre botoes de rodape e ela
       brigaria com o gap da grade. */
    .modal-footer > .btn {
        width: auto;
        min-height: 44px;
        margin: 0;
    }

    /* Botao impar ocupa a linha inteira, em vez de deixar buraco ao lado. */
    .modal-footer > .btn:last-child:nth-child(odd) {
        grid-column: 1 / -1;
    }
}

/* ══ CELULA DE TABELA QUEBRA PALAVRA LONGA ═════════════════════════════════
   MEDIDO na lista de motoristas: sem quebra, um nome longo ou um e-mail sem
   espaco alarga a coluna sem limite, e o DataTables Responsive DESISTE dela --
   esconde a coluna inteira. No celular a tela ficou mostrando so a coluna de
   Acoes: uma lista de motoristas sem nenhum motorista visivel.
   Ou seja: aqui a quebra nao e acabamento, e o que mantem a coluna na tela.

   overflow-wrap: anywhere cobre o texto SEM espaco (e-mail, IMEI colado), que
   word-break: break-word sozinho nao quebra -- mesma dupla ja usada no
   .dtr-details das linhas reveladas. */
/* ⛔ `anywhere` AQUI ERA DEMAIS, e o dono viu: numa tabela de 11 colunas
   (abastecimento) a coluna do id vinha com "000001" saindo UM DIGITO POR
   LINHA, e a placa "PLUSJ1600" partida no meio.
   O motivo e que overflow-wrap:anywhere nao e so quebra -- ele tambem
   encolhe a LARGURA MINIMA da celula, entao o navegador se sente livre para
   espremer a coluna ate um caractere. `break-word` da a mesma protecao
   contra a palavra gigante sem espaco e NAO mexe na largura minima: so
   quebra quando a palavra de fato nao cabe sozinha na linha.
   O .dtr-details logo acima segue com `anywhere` de proposito: ali a caixa
   ocupa a linha inteira, nao ha coluna para espremer. */
table.dataTable td {
    /* ⛔ AQUI NAO ENTRA `word-break: break-word`.
       Ele e alias legado e vale como overflow-wrap:anywhere -- alem de
       quebrar, ele ENCOLHE a largura minima da celula, e o navegador passa a
       poder espremer a coluna ate UM CARACTERE. Foi o que o dono fotografou
       na tela de abastecimento: o id "000001" saindo um digito por linha e a
       placa "PLUSJ1600" partida no meio.
       MEDIDO, largura minima de "000001":  com word-break 8px, sem ele 47px.
       overflow-wrap: break-word sozinho ainda quebra a palavra gigante quando
       a coluna aperta -- so nao oferece a coluna para ser espremida. */
    overflow-wrap: break-word;
}

/* ⚠️ A coluna de ACOES fica de fora: os botoes tem largura fixa e quebrar
   dentro dela so os empilharia. */
table.dataTable td .d-flex {
    word-break: normal;
    overflow-wrap: normal;
}

/* ═══════════════════════════════════════════════════════════════════════════
   CARD DE FILTRO ENXUTO — padrão da casa desde 16/09/2026
   ═══════════════════════════════════════════════════════════════════════════
   O card de filtro antigo tinha card-header ("Filtro"), rótulo em cima do
   campo, texto de ajuda e botões numa linha própria: 200 px MEDIDOS antes da
   primeira linha da tabela. Numa janela de 700 px isso é quase um terço da
   tela gasto para mostrar uma combo. Decisão do dono, 16/09/2026: uma linha só.

   Estrutura:
     .card.card-filtros > .card-body.py-2 > .filtros-linha
         └── .filtro-campo  (rótulo + controle, lado a lado)
         └── .filtros-acoes (botões, encostados à direita)

   ⛔ NÃO usar largura fixa no <select>: o sSelect ESCONDE o select nativo e
      desenha a .ss-box ao lado. Largura em select escondido não faz nada —
      já custou um defeito (16/09/2026). Por isso as regras miram .ss-wrap.

   ⚠️ NO CELULAR cada campo ocupa a linha inteira e o controle ESTICA. Sem
      isso a combo de largura fixa mais o botão estouravam o card a 375 px —
      o botão saía para fora da borda. Medido no iPhone SE.
   ══════════════════════════════════════════════════════════════════════════ */
.card-filtros .filtros-linha {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem .75rem;
}

.card-filtros .filtro-campo {
    display: flex;
    align-items: center;
    gap: .5rem;
    min-width: 0;
}

/* ⛔ display:flex VENCE o atributo [hidden], que vale display:none.
   Sem esta linha, campo que a tela esconde por [hidden] -- as datas do
   Dashboard Operacional, que so aparecem no periodo personalizado --
   nasceria VISIVEL. Armadilha classica de componente flex. */
.card-filtros .filtro-campo[hidden] {
    display: none;
}

.card-filtros .filtro-campo > .form-label {
    margin-bottom: 0;
    white-space: nowrap;
}

/* o widget de combo do sistema; .ss-box é quem aparece */
.card-filtros .filtro-campo .ss-wrap {
    width: 250px;
    max-width: 100%;
    min-width: 0;
}

.card-filtros .filtro-campo .ss-box {
    width: 100%;
}

/* min-width:0 deixa o campo encolher dentro do flex em vez de empurrar */
.card-filtros .filtro-campo .form-control,
.card-filtros .filtro-campo .form-select {
    min-width: 0;
}

.card-filtros .filtros-acoes {
    display: flex;
    gap: .5rem;
    margin-left: auto;
}

/* ⛔ COMPACTO PELO PADDING, NUNCA PELA FONTE.
   Eu havia usado form-select-sm/form-control-sm e isso QUEBRAVA duas regras
   de base do celular, porque o seletor do -sm (0,3,0) vence os dois blocos
   de base (0,1,0) deste mesmo arquivo:
     · .form-control,.form-select { font-size: 16px } em @media(pointer:coarse)
       -- campo com menos de 16px faz o iOS dar ZOOM e a tela saltar;
     · .ss-box { min-height: 44px } no mesmo bloco -- alvo de toque.
   Com o -sm o filtro ficava em 14px e 29px de altura no celular. Ele viu na
   tela: "fora do padrao". Aqui a altura desce pelo PADDING, que nenhuma das
   duas regras disputa. */
@media (pointer: fine) {
    .card-filtros .filtro-campo .form-control,
    .card-filtros .filtro-campo .form-select,
    .card-filtros .filtro-campo .ss-box {
        padding-top: .25rem;
        padding-bottom: .25rem;
        min-height: 34px;
    }
}

/* ⚠️ Os BOTOES do filtro nao tem regra aqui de proposito: eles usam btn-sm,
   que e o mesmo tamanho dos botoes de acao do cabecalho (.acoes-cabecalho,
   em 35 telas), e o bloco @media(max-width:767.98px) deste arquivo ja lhes
   da 40px de alvo no celular. Regra minha aqui so criaria conflito.
   MEDIDO em 16/09/2026: as 20 combinacoes de btn-sm do sistema ja saem com
   40px no toque. Quem violava era CAMPO com -sm, nunca botao. */

@media (max-width: 767.98px) {
    .card-filtros .filtro-campo {
        width: 100%;
    }

    .card-filtros .filtro-campo .ss-wrap,
    .card-filtros .filtro-campo .form-control,
    .card-filtros .filtro-campo .form-select {
        flex: 1 1 auto;
        width: auto;
    }

    .card-filtros .filtros-acoes {
        width: 100%;
        margin-left: 0;
    }

    .card-filtros .filtros-acoes > .btn {
        flex: 1 1 0;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   CAMPO -sm NO CELULAR — o piso de 16px não estava chegando em tudo
   ═══════════════════════════════════════════════════════════════════════════
   MEDIDO em 16/09/2026 lendo a CASCATA no navegador, com toque emulado:

   1) <select> e <input> com -sm JÁ recebiam 16px do piso lá de cima. Ok.
   2) A .ss-box, NÃO. O piso a nomeia, mas o seletor da variante sm do widget
      — `.form-select-sm + .ss-wrap .ss-box` — tem 3 classes contra 1 E vem
      depois no arquivo. Ele ganhava, e a caixa que a pessoa TOCA ficava em
      14px: o Safari do iPhone dá zoom e a tela salta.
   3) ALTURA não tinha piso nenhum. Botão -sm ganha 40px no bloco de cima;
      campo -sm não ganhava nada — ficava em 29px (combo) e 32px (input),
      contra os 40px de alvo que a casa exige.

   ⛔ A CORREÇÃO É AQUI, NÃO NAS TELAS. Tirar o -sm de cada view mudaria a
      densidade no DESKTOP, e em painel sobre mapa "altura é o recurso
      escasso" (meuveiculo.css). O próprio comentário do piso já diz a regra
      da casa: o compacto vem do PADDING, só a fonte não desce de 16px.
      Assim o -sm segue compacto no desktop e cumpre as duas regras no dedo.

   Alcance: toda tela com campo -sm — admin_notificacoes, cerca,
   dashboardveiculo, home, setupcliente, clienterastreamento — e as futuras.
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    /* mesma especificidade da regra da variante, porém DEPOIS: esta ganha */
    .form-select-sm + .ss-wrap .ss-box,
    .ss-wrap .ss-box.form-select-sm {
        font-size: 16px;
        min-height: 44px;
    }

    /* alvo de toque também para CAMPO compacto, não só para botão */
    .form-control-sm,
    .form-select-sm {
        min-height: 40px;
    }

    /* ⚠️ textarea fica de fora: altura nele é linha de texto, não alvo de
       toque — forçar 40px não ajuda e atrapalha quem definiu rows. */
    textarea.form-control-sm {
        min-height: 0;
    }
}