/* ==========================================================================
   LARA · camada visual moderna (somente CSS)
   --------------------------------------------------------------------------
   Como aplicar: um <link> no index.html, DEPOIS do vendor-*.css e do
   splash.css:
       <link rel="stylesheet" href="assets/css/lara-moderno.css">
   Como desfazer: apagar essa linha. Nada mais muda.

   Regras que este arquivo segue, para não quebrar o que já funciona:
   1. Não altera HTML, JS, rotas, templates nem o comportamento do Angular,
      DataTables, Select2 ou CoreUI. Só cor, borda, raio, sombra, fonte e
      espaçamento.
   2. Não mexe em display/visibility/position de nada funcional (modais,
      dropdowns, colunas ocultas do DataTables, campos escondidos).
   3. Não mexe em largura de colunas nem do container do Select2 (o JS
      calcula essas larguras).
   4. Tudo fica preso a body.app; a tela de login (login.css) não é tocada.
   5. !important só onde o sistema já usa estilo inline ou !important
      (ícones do topo, utilitários bg-*, paginação do DataTables).
   ========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Ubuntu:wght@400;500;700&display=swap");

:root {
  --lx-font: "Ubuntu", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;

  --lx-bg: #f3f5f8;          /* fundo da área de trabalho */
  --lx-surface: #ffffff;
  --lx-surface-2: #f8fafc;   /* cabeçalho de tabela, hover */
  --lx-line: #e6eaef;
  --lx-line-strong: #d3dae2;

  --lx-text: #1f2a37;
  --lx-text-2: #475467;
  --lx-muted: #667085;
  --lx-icon: #98a2b3;

  --lx-navy: #0a2d42;        /* cor-identidade do Lara (já usada no menu) */
  --lx-navy-hover: #12405c;
  --lx-blue: #1b6fa8;
  --lx-blue-soft: #e8f1f8;
  --lx-green: #1f9d63;
  --lx-green-hover: #198553;
  --lx-red: #d64545;
  --lx-red-hover: #bb3737;
  --lx-amber: #e8a317;
  --lx-voxter: #d14d52;      /* vermelho Voxter: só acento, nunca significado de erro */
  --lx-voxter-soft: #fbe9ea;

  --lx-active-bg: #eff6ff;   /* item ativo do menu, igual ao Mapper */
  --lx-active-line: #bfdbfe;

  --lx-r-sm: 6px;
  --lx-r: 8px;
  --lx-r-lg: 12px;
  --lx-shadow-1: 0 1px 2px rgba(16, 24, 40, .05);
  --lx-shadow-2: 0 12px 32px -12px rgba(16, 24, 40, .22);
  --lx-ring: 0 0 0 3px rgba(27, 111, 168, .18);
}

/* --------------------------------------------------------------------------
   1. Base
   -------------------------------------------------------------------------- */
body.app {
  font-family: var(--lx-font);
  color: var(--lx-text);
  background-color: var(--lx-bg);
}
body.app .app-body,
body.app .main {
  background-color: var(--lx-bg);
}
body.app .main a:not(.btn):not(.dropdown-item):not(.nav-link):not(.paginate_button) {
  color: var(--lx-blue);
}
body.app .main a:not(.btn):not(.dropdown-item):not(.nav-link):not(.paginate_button):hover {
  color: var(--lx-voxter);
  text-decoration: none;
}
/* texto que não é ação não mostra mãozinha nem cursor de texto;
   o que é clicável ou digitável recupera o cursor certo */
body.app { cursor: default; }
body.app a[href],
body.app button:not(:disabled),
body.app .btn:not(:disabled):not(.disabled),
body.app select,
body.app label[for],
body.app [ng-click],
body.app [data-toggle],
body.app [role="button"],
body.app .select2-selection,
body.app .select2-results__option,
body.app .paginate_button:not(.disabled),
body.app table.dataTable thead .sorting,
body.app table.dataTable thead .sorting_asc,
body.app table.dataTable thead .sorting_desc,
body.app td.dtr-control,
body.app input[type="checkbox"],
body.app input[type="radio"],
body.app input[type="file"],
body.app input[type="date"] { cursor: pointer; }
body.app input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="date"]):not([type="button"]):not([type="submit"]):not([readonly]),
body.app textarea:not([readonly]),
body.app [contenteditable="true"] { cursor: text; }
body.app :disabled, body.app .disabled { cursor: not-allowed; }

body.app .text-primary { color: var(--lx-blue) !important; }
body.app .text-success { color: var(--lx-green) !important; }
body.app .text-danger  { color: var(--lx-red) !important; }
body.app ::selection { background: #f6cfd1; color: var(--lx-text); }

/* --------------------------------------------------------------------------
   2. Topo
   -------------------------------------------------------------------------- */
body.app .app-header {
  background: var(--lx-surface);
  border-bottom: 1px solid var(--lx-line);
}
body.app .app-header .navbar-toggler-icon { opacity: .7; }

/* logo novo do Lara (assets/img/logos/lara-cor.png). O mesmo código atende
   outras marcas (o logo vem de app/config.json pelo domínio), então a troca
   só acontece quando o logo carregado é o do Lara. A <img> continua lá,
   transparente, e o logo novo entra como fundo do link. */
body.app .app-header .navbar-brand:has(> #logo-home[src*="laranovo"]) {
  background: url("../img/logos/lara-cor.png") no-repeat center / auto 36px;
}
body.app .app-header #logo-home[src*="laranovo"] { opacity: 0; }
body.app .app-header .nav-link,
body.app .app-header .text-dark {
  color: var(--lx-text-2) !important;          /* o HTML força color:black inline */
  transition: color .15s ease;
}
body.app .app-header .nav-link:hover,
body.app .app-header .text-dark:hover { color: var(--lx-navy) !important; }
body.app .app-header .navbar-badge {
  border-radius: 999px;
  font-weight: 600;
  min-width: 18px;
  padding: .2em .45em;
  box-shadow: 0 0 0 2px var(--lx-surface);
}
body.app .access-as-banner { border-radius: var(--lx-r); }

/* --------------------------------------------------------------------------
   3. Menu lateral no padrão Mapper: trilho branco, ícone cinza,
      ativo em quadrado azul-claro, rótulo abre em painel no hover
   -------------------------------------------------------------------------- */
body.app .sidebar {
  background: var(--lx-surface);
  border-right: 1px solid var(--lx-line);
}
body.app .sidebar .nav-link,
body.app .sidebar .nav-link:hover,
body.app .sidebar .nav-link.active,
body.app .sidebar .nav-dropdown.open .nav-link {
  color: var(--lx-text) !important;            /* CoreUI usa #fff em vários estados */
  font-weight: 500;
}
body.app .sidebar .nav-link .nav-icon,
body.app .sidebar .nav-link.active .nav-icon {
  position: relative;
  z-index: 1;
  color: var(--lx-icon);
  transition: color .15s ease;
}
body.app .sidebar .nav-link:hover .nav-icon { color: var(--lx-navy); }
body.app .sidebar .nav-link.active .nav-icon { color: var(--lx-voxter); }
body.app .sidebar .nav-link .nav-icon img { opacity: .75; }
body.app .sidebar .nav-link:hover .nav-icon img,
body.app .sidebar .nav-link.active .nav-icon img { opacity: 1; }
/* ícone de Rastreadores: o PNG cinza vira o SVG (assets/img/icons_rastreador/
   ico_rastreador-cinza.svg) usado como máscara, então ele pega a mesma cor
   dos outros ícones em cada estado (cinza, azul-escuro no hover, vermelho ativo) */
body.app .sidebar .nav-icon:has(> img[src*="ico_rastreador"]) {
  -webkit-mask: url("../img/icons_rastreador/ico_rastreador-cinza.svg") center / 22px 22px no-repeat;
          mask: url("../img/icons_rastreador/ico_rastreador-cinza.svg") center / 22px 22px no-repeat;
  background-color: currentColor;
}
body.app .sidebar .nav-icon > img[src*="ico_rastreador"] { opacity: 0 !important; }
body.app .sidebar .nav-dropdown.open { background: var(--lx-surface-2); }
body.app .sidebar .nav-dropdown-toggle::before,
body.app .sidebar .nav-link:hover.nav-dropdown-toggle::before {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 14'%3E%3Cpath fill='%2398a2b3' d='M9.148 2.352l-4.148 4.148 4.148 4.148q0.148 0.148 0.148 0.352t-0.148 0.352l-1.297 1.297q-0.148 0.148-0.352 0.148t-0.352-0.148l-5.797-5.797q-0.148-0.148-0.148-0.352t0.148-0.352l5.797-5.797q0.148-0.148 0.352-0.148t0.352 0.148l1.297 1.297q0.148 0.148 0.148 0.352t-0.148 0.352z'/%3E%3C/svg%3E");
}

/* 3a. Menu recolhido (padrão do Lara) */
body.app.sidebar-minimized .sidebar .nav-link {
  background: transparent;
}
body.app.sidebar-minimized .sidebar .nav-link.active::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 8px;
  width: 34px;
  height: 34px;
  transform: translateY(-50%);
  background: var(--lx-active-bg);
  border: 1px solid var(--lx-active-line);
  border-radius: 10px;
  pointer-events: none;
}
body.app.sidebar-minimized .sidebar .nav-item:hover > .nav-link,
body.app.sidebar-minimized .sidebar .nav-link:hover,
body.app.sidebar-minimized .sidebar .nav > .nav-dropdown:hover {
  background: var(--lx-surface);
}
body.app.sidebar-minimized .sidebar .nav-item:hover > .nav-link {
  border-radius: 0 var(--lx-r-lg) var(--lx-r-lg) 0;
  box-shadow: 15px 15px 40px -5px rgba(16, 24, 40, .12), inset 0 0 0 1px var(--lx-line);
}
/* item com submenu: canto inferior direito reto, para encaixar no painel dos subitens */
body.app.sidebar-minimized .sidebar .nav > .nav-dropdown:hover > .nav-link {
  border-bottom-right-radius: 0;
}
body.app.sidebar-minimized .sidebar .nav-item:hover > .nav-link .nav-icon { color: var(--lx-navy); }
body.app.sidebar-minimized .sidebar .nav > .nav-dropdown:hover > .nav-dropdown-items {
  background: var(--lx-surface);
  border: 1px solid var(--lx-line);
  border-radius: 0 0 var(--lx-r-lg) var(--lx-r-lg);
  box-shadow: var(--lx-shadow-2);
  padding: 4px 0;
}
body.app.sidebar-minimized .sidebar .nav > .nav-dropdown:hover > .nav-dropdown-items .nav-link:hover {
  background: var(--lx-surface-2);
  box-shadow: none;
}
body.app .sidebar .sidebar-minimizer,
body.app.sidebar-minimized .sidebar .sidebar-minimizer {
  background-color: var(--lx-surface);
  border-top: 1px solid var(--lx-line);
  z-index: 2;   /* fica acima dos ícones do menu, que ganharam z-index:1 */
}
body.app .sidebar .sidebar-minimizer:hover { background-color: var(--lx-surface-2); }
body.app .sidebar .sidebar-minimizer:hover::before {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 14'%3E%3Cpath fill='%230a2d42' d='M9.148 2.352l-4.148 4.148 4.148 4.148q0.148 0.148 0.148 0.352t-0.148 0.352l-1.297 1.297q-0.148 0.148-0.352 0.148t-0.352-0.148l-5.797-5.797q-0.148-0.148-0.148-0.352t0.148-0.352l5.797-5.797q0.148-0.148 0.352-0.148t0.352 0.148l1.297 1.297q0.148 0.148 0.148 0.352t-0.148 0.352z'/%3E%3C/svg%3E");
}

/* 3b. Menu aberto (quando o usuário expande) */
body.app:not(.sidebar-minimized) .sidebar .nav-link {
  margin: 2px 8px;
  border-radius: var(--lx-r);
}
body.app:not(.sidebar-minimized) .sidebar .nav-link:hover { background: var(--lx-surface-2); }
body.app:not(.sidebar-minimized) .sidebar .nav-link.active {
  background: var(--lx-active-bg);
  box-shadow: inset 0 0 0 1px var(--lx-active-line);
}

/* --------------------------------------------------------------------------
   4. Título da página (o breadcrumb vira cabeçalho, sem a faixa branca)
   -------------------------------------------------------------------------- */
/* O breadcrumb vira um cabeçalho: faixa branca com um leve tom azul no
   canto, ícone da tela (o mesmo do menu) num quadrado e o nome ao lado.
   O ícone vem da variável --lx-ico, definida por tela logo abaixo. */
body.app .main .breadcrumb,
body.app [ng-controller="DashboardController"] > .container-fluid::before {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 24px 30px;
  padding: 16px 20px;
  min-height: 76px;
  background-color: var(--lx-surface);
  background-image:
    radial-gradient(60% 140% at 100% 0%, rgba(209, 77, 82, .07) 0%, rgba(209, 77, 82, 0) 70%),
    radial-gradient(110% 160% at 85% 0%, #e6f0f8 0%, rgba(230, 240, 248, 0) 60%);
  border: 1px solid var(--lx-line);
  border-radius: 14px;
  box-shadow: var(--lx-shadow-1);
  color: var(--lx-navy);
  font-size: 1.3rem;
  font-weight: 500;
  letter-spacing: -.01em;
  line-height: 1.3;
}
body.app .main .breadcrumb::before,
body.app [ng-controller="DashboardController"] > .container-fluid::after {
  content: var(--lx-ico, "\f15c");
  font-family: var(--lx-ico-font, "Font Awesome 5 Free");
  font-weight: var(--lx-ico-peso, 900);
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--lx-voxter) 0%, var(--lx-navy) 78%);
  color: #fff;
  font-size: 18px;
  box-shadow: 0 6px 14px -6px rgba(209, 77, 82, .45);
  letter-spacing: 0;
}
body.app .main .breadcrumb-item,
body.app .main .breadcrumb-item.active { color: var(--lx-navy); }
body.app .main .breadcrumb-item + .breadcrumb-item::before { color: var(--lx-icon); }
body.app .main .breadcrumb-item a { color: var(--lx-muted) !important; }

/* Simcards não tem breadcrumb no HTML: o cabeçalho é desenhado no container */
body.app [ng-controller="DashboardController"] > .container-fluid { position: relative; }
body.app [ng-controller="DashboardController"] > .container-fluid::before {
  content: "SIM Cards";
  margin: 24px 0;
  padding-left: 80px;          /* espaço do ícone, que vem no ::after */
}
body.app [ng-controller="DashboardController"] > .container-fluid::after {
  position: absolute;
  top: 16px;                   /* a margem da faixa colapsa com o container; sobra 1 de borda + (76-44)/2 */
  left: 51px;                  /* 30 do container + 1 de borda + 20 de padding */
  --lx-ico: "\f7c4";
}

/* ícone de cada tela (mesmo do menu lateral) */
body.app [ng-controller="HomeController"]           { --lx-ico: "\f3fd"; }
body.app [ng-controller="TrackerController"]        { --lx-ico: "\f7c0"; }
body.app [ng-controller="TrackerConfigController"]  { --lx-ico: "\f54a"; }
body.app [ng-controller="TrackerCommandController"],
body.app [ng-controller="TrackerCommandLotController"] { --lx-ico: "\f120"; }
body.app [ng-controller="TrackerImportController"]  { --lx-ico: "\f093"; }
body.app [ng-controller="TrackerLogsController"]    { --lx-ico: "\f1da"; }
body.app [ng-controller="SimcardController"]        { --lx-ico: "\f013"; }
body.app [ng-controller="SimcardsExchangeController"] { --lx-ico: "\f362"; }
body.app [ng-controller="SimcardClientController"]  { --lx-ico: "\f7c4"; }
body.app [ng-controller="SimcardSharingController"] { --lx-ico: "\f1e0"; }
body.app [ng-controller="SimcardSharingHistoryController"] { --lx-ico: "\f1da"; }
body.app [ng-controller="ErbsController"]           { --lx-ico: "\f519"; }
body.app [ng-controller="ClientController"]         { --lx-ico: "\f007"; }
body.app [ng-controller="UserController"]           { --lx-ico: "\f1fa"; }
body.app [ng-controller="AdimUserController"]       { --lx-ico: "\f023"; }
body.app [ng-controller="ProductController"]        { --lx-ico: "\f288"; --lx-ico-font: "Font Awesome 5 Brands"; --lx-ico-peso: 400; }
body.app [ng-controller="ResellerController"],
body.app [ng-controller="SellerClientController"]   { --lx-ico: "\f508"; }
body.app [ng-controller="ImportController"]         { --lx-ico: "\f093"; }
body.app [ng-controller="OrderController"],
body.app [ng-controller="OrderInstallmentController"],
body.app [ng-controller="PreOrderController"],
body.app [ng-controller="OtherController"],
body.app [ng-controller="ReportOrdersController"]   { --lx-ico: "\f07a"; }
body.app [ng-controller="ContractController"],
body.app [ng-controller="ContractAccessController"] { --lx-ico: "\f573"; }
body.app [ng-controller="NFController"],
body.app [ng-controller="NFAvulsaFormController"]   { --lx-ico: "\f571"; }
body.app [ng-controller="FinanceController"]        { --lx-ico: "\f570"; }
body.app [ng-controller="BillingController"],
body.app [ng-controller="BillingErrorsController"],
body.app [ng-controller="MapperBillingController"],
body.app [ng-controller="MapperBillingEditController"],
body.app [ng-controller="MapperAccessController"]   { --lx-ico: "\f0d6"; }
body.app [ng-controller="BlockController"]          { --lx-ico: "\f05e"; }
body.app [ng-controller="ReportController"],
body.app [ng-controller="ReportDataController"]     { --lx-ico: "\f080"; }
body.app [ng-controller="ReportSalesController"],
body.app [ng-controller="ReportProductsSalesController"],
body.app [ng-controller="ReportSalesDetailsController"],
body.app [ng-controller="ReportTrackerSalesController"],
body.app [ng-controller="ComissionController"]      { --lx-ico: "\f4c0"; }
body.app [ng-controller="ReportActivationController"] { --lx-ico: "\f201"; }
body.app [ng-controller="ReportSalesMonitoringController"],
body.app [ng-controller="ReportBillAnalysisController"],
body.app [ng-controller="ReportClosingController"]  { --lx-ico: "\f0db"; }
body.app [ng-controller="SupportController"]        { --lx-ico: "\f590"; }
body.app [ng-controller="SupportMessageController"] { --lx-ico: "\f086"; }
body.app [ng-controller="AuditController"]          { --lx-ico: "\f069"; }
body.app [ng-controller="LogController"]            { --lx-ico: "\f21b"; }
body.app [ng-controller="OnlineUsersController"]    { --lx-ico: "\f012"; }
body.app [ng-controller="FaqController"]            { --lx-ico: "\f128"; }
body.app [ng-controller="MonitoringController"]     { --lx-ico: "\f108"; }
body.app [ng-controller="CampaignController"]       { --lx-ico: "\f232"; --lx-ico-font: "Font Awesome 5 Brands"; --lx-ico-peso: 400; }
body.app [ng-controller="NotificationController"]   { --lx-ico: "\f0f3"; }
body.app [ng-controller="ProfileController"]        { --lx-ico: "\f2c2"; }

/* --------------------------------------------------------------------------
   5. Cards
   -------------------------------------------------------------------------- */
body.app .card {
  border: 1px solid var(--lx-line);
  border-radius: var(--lx-r-lg);
  box-shadow: var(--lx-shadow-1);
}
body.app .card-header {
  background: var(--lx-surface);
  border-bottom: 1px solid var(--lx-line);
  font-weight: 500;
  padding: 1rem 1.5rem;
}
body.app .card-header:first-child { border-radius: var(--lx-r-lg) var(--lx-r-lg) 0 0; }
body.app .card-footer {
  background: var(--lx-surface-2);
  border-top: 1px solid var(--lx-line);
}
body.app .main .card-body { padding: 1.5rem; }

/* cards-indicador do Home (bg-* + text-white): mesmos significados, tons do Lara */
body.app .card.text-white { border: 0; }
body.app .card.text-white h1 { font-weight: 700; letter-spacing: -.02em; }
body.app .card .text-value { font-weight: 500; opacity: .9; }

/* utilitários de cor (o Bootstrap já usa !important neles) */
body.app .bg-primary { background-color: var(--lx-blue) !important; }
body.app .bg-dark    { background-color: var(--lx-navy) !important; }
body.app .bg-info    { background-color: #2a86c4 !important; }
body.app .bg-success { background-color: var(--lx-green) !important; }
body.app .bg-danger  { background-color: var(--lx-red) !important; }
body.app .bg-warning { background-color: var(--lx-amber) !important; }
body.app .bg-light   { background-color: var(--lx-surface-2) !important; }

/* --------------------------------------------------------------------------
   6. Formulários
   -------------------------------------------------------------------------- */
body.app .main .form-group > label,
body.app .main .form-group label:not(.form-check-label),
body.app .modal .form-group > label {
  font-size: .8125rem;
  font-weight: 500;
  color: var(--lx-text-2);
  margin-bottom: .375rem;
}
body.app .form-control,
body.app .main input[type="text"]:not(.form-control):not(.select2-search__field),
body.app .main input[type="search"]:not(.form-control):not(.select2-search__field),
body.app .main input[type="date"]:not(.form-control),
body.app .main input[type="number"]:not(.form-control),
body.app .main input[type="email"]:not(.form-control),
body.app .main input[type="tel"]:not(.form-control) {
  border: 1px solid var(--lx-line-strong);
  border-radius: var(--lx-r);
  background-color: var(--lx-surface);
  color: var(--lx-text);
  box-shadow: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
body.app .main input[type="text"]:not(.form-control):not(.select2-search__field),
body.app .main input[type="search"]:not(.form-control):not(.select2-search__field),
body.app .main input[type="date"]:not(.form-control),
body.app .main input[type="number"]:not(.form-control),
body.app .main input[type="email"]:not(.form-control),
body.app .main input[type="tel"]:not(.form-control) {
  padding: .375rem .75rem;
  height: calc(1.5em + .9rem + 2px);   /* mesma altura dos .form-control */
}
body.app .form-control:not(textarea):not([multiple]):not([size]) {
  height: calc(1.5em + .9rem + 2px);
}
body.app .form-control::placeholder { color: #a0a9b6; }
body.app .form-control:focus,
body.app .main input:not(.form-control):not([type="checkbox"]):not([type="radio"]):focus {
  border-color: var(--lx-blue);
  box-shadow: var(--lx-ring);
  outline: 0;
}
body.app .form-control:disabled,
body.app .form-control[readonly] { background-color: var(--lx-surface-2); color: var(--lx-muted); }
body.app input[type="checkbox"],
body.app input[type="radio"] { accent-color: var(--lx-navy); }
body.app .input-group-text {
  background: var(--lx-surface-2);
  border-color: var(--lx-line-strong);
  color: var(--lx-muted);
}
body.app .input-group > .form-control:not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; }
body.app .input-group > .form-control:not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; }
body.app .input-group > .input-group-prepend > .input-group-text { border-radius: var(--lx-r) 0 0 var(--lx-r); }
body.app .input-group > .input-group-append > .input-group-text,
body.app .input-group > .input-group-append > .btn { border-radius: 0 var(--lx-r) var(--lx-r) 0; }

/* Uma seta só para todos os seletores. Havia duas: a nativa do navegador
   (que muda de sistema para sistema) e o triângulo do Select2. Todos passam
   a usar o mesmo chevron cinza, no mesmo lugar. */
body.app select.form-control:not([multiple]):not([size]),
body.app .main select:not(.form-control):not([multiple]):not([size]):not(.select2-hidden-accessible) {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23667085' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .7rem center;
  background-size: 14px 14px;
  padding-right: 2.2rem;
}
body.app .select2-container--default .select2-selection--single .select2-selection__arrow b { display: none; }
body.app .select2-container--default .select2-selection--single .select2-selection__arrow {
  width: 2.2rem;
  right: 0;
  background: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23667085' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' d='M4 6l4 4 4-4'/%3E%3C/svg%3E") no-repeat center / 14px 14px;
  transition: transform .15s ease;
}
body.app .select2-container--open .select2-selection--single .select2-selection__arrow { transform: rotate(180deg); }

/* "resultados por página" (DataTables): mesmo desenho dos outros seletores */
body.app .dataTables_wrapper .dataTables_length select {
  height: calc(1.5em + .9rem + 2px);
  min-width: 78px;
  margin: 0 .5rem 0 0;
  padding: .375rem 2.2rem .375rem .75rem;
  border: 1px solid var(--lx-line-strong);
  border-radius: var(--lx-r);
  background-color: var(--lx-surface);
  color: var(--lx-text);
  font-size: .875rem;
}
body.app .dataTables_wrapper .dataTables_length select:focus {
  border-color: var(--lx-blue);
  box-shadow: var(--lx-ring);
  outline: 0;
}
body.app .dataTables_wrapper .dataTables_length label {
  display: inline-flex;
  align-items: center;
  margin: 0;
}
body.app .dataTables_wrapper .dataTables_length .select2-container { margin-right: .5rem; min-width: 78px; }

/* Select2: só aparência; a largura continua sendo a que o plugin calcula */
body.app .select2-container--default .select2-selection--single,
body.app .select2-container--default .select2-selection--multiple {
  border: 1px solid var(--lx-line-strong);
  border-radius: var(--lx-r);
  min-height: calc(1.5em + .9rem + 2px);
  transition: border-color .15s ease, box-shadow .15s ease;
}
body.app .select2-container--default .select2-selection--single {
  height: calc(1.5em + .9rem + 2px);
}
body.app .select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: calc(1.5em + .9rem);
  padding-left: .75rem;
  color: var(--lx-text);
}
body.app .select2-container--default .select2-selection--single .select2-selection__arrow {
  height: calc(1.5em + .9rem);
  right: 4px;
}
body.app .select2-container--default.select2-container--focus .select2-selection--multiple,
body.app .select2-container--default.select2-container--open .select2-selection--single,
body.app .select2-container--default.select2-container--open .select2-selection--multiple {
  border-color: var(--lx-blue);
  box-shadow: var(--lx-ring);
}
body.app .select2-container--default .select2-selection--multiple .select2-selection__choice {
  background: var(--lx-blue-soft);
  border: 1px solid #cfe0ee;
  border-radius: var(--lx-r-sm);
  color: var(--lx-navy);
}
body.app .select2-dropdown {
  border: 1px solid var(--lx-line);
  border-radius: var(--lx-r);
  box-shadow: var(--lx-shadow-2);
  overflow: hidden;
}
body.app .select2-container--default .select2-search--dropdown .select2-search__field {
  border: 1px solid var(--lx-line-strong);
  border-radius: var(--lx-r-sm);
  padding: .3rem .5rem;
}
body.app .select2-container--default .select2-results__option--highlighted[aria-selected],
body.app .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
  background: var(--lx-active-bg);
  color: var(--lx-navy);
}
body.app .select2-container--default .select2-results__option[aria-selected="true"] {
  background: var(--lx-surface-2);
  font-weight: 500;
}

/* ---- Lista aberta: mesmo desenho para Select2 e para o select nativo ----
   Cartão arredondado com sombra, solto 6px do campo; opções mais altas,
   hover azul-claro, selecionada com ✓. */
body.app .select2-container--open .select2-dropdown {
  border: 1px solid var(--lx-line);
  border-radius: 12px !important;
  box-shadow: 0 18px 40px -14px rgba(10, 45, 66, .28), 0 2px 6px rgba(10, 45, 66, .06);
  padding: 6px;
  background: var(--lx-surface);
  overflow: hidden;
}
body.app .select2-container--open .select2-dropdown--below { margin-top: 6px; }
body.app .select2-container--open .select2-dropdown--above { margin-top: -6px; }
/* o Select2 "achata" os cantos do campo quando abre, para colar na lista */
body.app .select2-container--open .select2-selection--single,
body.app .select2-container--open .select2-selection--multiple { border-radius: var(--lx-r) !important; }
body.app .select2-search--dropdown { padding: 2px 2px 8px; }
body.app .select2-container--default .select2-search--dropdown .select2-search__field {
  height: 38px;
  padding: .4rem .75rem .4rem 2.1rem;
  border: 1px solid var(--lx-line-strong);
  border-radius: var(--lx-r);
  background: var(--lx-surface-2) url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='7' cy='7' r='4.5' fill='none' stroke='%2398a2b3' stroke-width='1.6'/%3E%3Cpath d='M10.5 10.5L14 14' stroke='%2398a2b3' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat .7rem center / 14px 14px;
  font-size: .875rem;
  outline: 0;
}
body.app .select2-container--default .select2-search--dropdown .select2-search__field:focus {
  border-color: var(--lx-blue);
  background-color: var(--lx-surface);
  box-shadow: var(--lx-ring);
}
body.app .select2-container--default .select2-results > .select2-results__options { max-height: 288px; }
body.app .select2-results__option {
  position: relative;
  margin: 1px 0;
  padding: 9px 34px 9px 12px;
  border-radius: var(--lx-r);
  color: var(--lx-text);
  font-size: .875rem;
  line-height: 1.35;
}
body.app .select2-container--default .select2-results__option--highlighted[aria-selected],
body.app .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
  background: var(--lx-active-bg);
  color: var(--lx-navy);
}
body.app .select2-container--default .select2-results__option[aria-selected="true"] {
  background: transparent;
  color: var(--lx-navy);
  font-weight: 600;
}
body.app .select2-container--default .select2-results__option[aria-selected="true"].select2-results__option--highlighted { background: var(--lx-active-bg); }
body.app .select2-container--default .select2-results__option[aria-selected="true"]::after {
  content: "";
  position: absolute;
  right: 12px;
  top: 50%;
  width: 14px;
  height: 14px;
  transform: translateY(-50%);
  background: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%23d14d52' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
}
body.app .select2-results__option[role="group"] { padding: 0; }
body.app .select2-container--default .select2-results__group {
  padding: 10px 12px 4px;
  color: var(--lx-muted);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
}
body.app .select2-results__message { color: var(--lx-muted); }

/* select nativo: no Chrome/Edge recentes a lista também é estilizável
   (appearance: base-select). Nos demais navegadores ela segue nativa. */
@supports (appearance: base-select) {
  body.app select.form-control:not([multiple]):not([size]),
  body.app .main select:not(.form-control):not([multiple]):not([size]):not(.select2-hidden-accessible) {
    appearance: base-select;
    display: flex;               /* no modo base-select o texto subia: centraliza na altura */
    align-items: center;
    padding-top: 0;
    padding-bottom: 0;
  }
  body.app select::picker-icon { display: none; }          /* a seta é o chevron do fundo */
  body.app select::picker(select) {
    appearance: base-select;
    margin-top: 6px;
    padding: 6px;
    border: 1px solid var(--lx-line);
    border-radius: 12px;
    background: var(--lx-surface);
    box-shadow: 0 18px 40px -14px rgba(10, 45, 66, .28), 0 2px 6px rgba(10, 45, 66, .06);
    max-height: 320px;
  }
  body.app select option {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 1px 0;
    padding: 9px 12px;
    border-radius: var(--lx-r);
    color: var(--lx-text);
    font-size: .875rem;
  }
  body.app select option:hover,
  body.app select option:focus-visible { background: var(--lx-active-bg); color: var(--lx-navy); outline: 0; }
  body.app select option:checked { font-weight: 600; color: var(--lx-navy); background: transparent; }
  body.app select option:checked:hover { background: var(--lx-active-bg); }
  body.app select option::checkmark { order: 1; margin-left: auto; color: var(--lx-voxter); font-weight: 700; }
}

/* --------------------------------------------------------------------------
   7. Botões
   -------------------------------------------------------------------------- */
body.app .btn {
  border-radius: var(--lx-r);
  font-weight: 500;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
}
body.app .btn-sm { border-radius: var(--lx-r-sm); }
body.app .btn-lg { border-radius: 10px; }
body.app .btn:focus,
body.app .btn.focus { box-shadow: var(--lx-ring); }

body.app .btn-primary,
body.app .btn-primary:disabled,
body.app .btn-primary.disabled {
  background-color: var(--lx-navy); border-color: var(--lx-navy); color: #fff;
}
body.app .btn-primary:hover,
body.app .btn-primary:not(:disabled):not(.disabled):active,
body.app .btn-primary:not(:disabled):not(.disabled).active,
body.app .show > .btn-primary.dropdown-toggle {
  background-color: var(--lx-navy-hover); border-color: var(--lx-navy-hover); color: #fff;
}

body.app .btn-success,
body.app .btn-success:disabled,
body.app .btn-success.disabled {
  background-color: var(--lx-green); border-color: var(--lx-green); color: #fff;
}
body.app .btn-success:hover,
body.app .btn-success:not(:disabled):not(.disabled):active,
body.app .show > .btn-success.dropdown-toggle {
  background-color: var(--lx-green-hover); border-color: var(--lx-green-hover); color: #fff;
}

body.app .btn-danger,
body.app .btn-danger:disabled,
body.app .btn-danger.disabled {
  background-color: var(--lx-red); border-color: var(--lx-red); color: #fff;
}
body.app .btn-danger:hover,
body.app .btn-danger:not(:disabled):not(.disabled):active,
body.app .show > .btn-danger.dropdown-toggle {
  background-color: var(--lx-red-hover); border-color: var(--lx-red-hover); color: #fff;
}

body.app .btn-info,
body.app .btn-info:disabled {
  background-color: var(--lx-blue); border-color: var(--lx-blue); color: #fff;
}
body.app .btn-info:hover,
body.app .btn-info:not(:disabled):not(.disabled):active {
  background-color: #175f90; border-color: #175f90; color: #fff;
}

body.app .btn-warning,
body.app .btn-warning:disabled {
  background-color: var(--lx-amber); border-color: var(--lx-amber); color: #2b1d00;
}
body.app .btn-warning:hover { background-color: #d39410; border-color: #d39410; color: #2b1d00; }

body.app .btn-secondary,
body.app .btn-light,
body.app .btn-secondary:disabled {
  background-color: var(--lx-surface); border-color: var(--lx-line-strong); color: var(--lx-text-2);
}
body.app .btn-secondary:hover,
body.app .btn-light:hover,
body.app .btn-secondary:not(:disabled):not(.disabled):active,
body.app .show > .btn-secondary.dropdown-toggle {
  background-color: var(--lx-surface-2); border-color: var(--lx-line-strong); color: var(--lx-navy);
}

body.app .btn-dark { background-color: var(--lx-text); border-color: var(--lx-text); }

body.app .btn-outline-primary { color: var(--lx-navy); border-color: var(--lx-line-strong); }
body.app .btn-outline-primary:hover { background: var(--lx-navy); border-color: var(--lx-navy); color: #fff; }

/* botão "Ações" repetido em toda linha de tabela: mais leve, para a tabela respirar */
body.app .main .table .btn-primary.btn-sm,
body.app .main .table .btn-group > .btn-primary {
  background-color: var(--lx-blue-soft);
  border-color: #d3e3f0;
  color: var(--lx-navy);
}
body.app .main .table .btn-primary.btn-sm:hover,
body.app .main .table .show > .btn-primary.dropdown-toggle {
  background-color: var(--lx-navy);
  border-color: var(--lx-navy);
  color: #fff;
}

/* botão de largura total em área de filtro: mesma altura dos campos */
body.app .main .btn-block.btn-sm {
  font-size: .875rem;
  line-height: 1.5;
  padding: .45rem .75rem;
  border-radius: var(--lx-r);
}

/* --------------------------------------------------------------------------
   7b. Filtros e formulários em grade (todas as telas)
   Cada tela empurra os elementos de um jeito: rótulo sem quebra (fica ao
   lado do seletor), <br> ou rótulo vazio como espaçador acima do botão,
   margin-top inline, botão pequeno (btn-sm). Medido nos templates: <br> no
   início da coluna em 26 telas, rótulo + <br> em 17, rótulo vazio em 4,
   margin-top inline em 2. Toda linha (.row) cujas colunas têm rótulo passa a
   seguir uma regra só: rótulo em cima, campo e botão com a mesma altura,
   tudo alinhado pela base, espaçadores fora.
   -------------------------------------------------------------------------- */
body.app .main .row:has(> [class*="col"] > label, > [class*="col"] > .form-group > label) {
  align-items: flex-end;
  row-gap: 16px;
}
body.app .main .row:has(> [class*="col"] > label, > [class*="col"] > .form-group > label) > [class*="col"] > label:not(.form-check-label),
body.app .main .row:has(> [class*="col"] > label, > [class*="col"] > .form-group > label) > [class*="col"] > .form-group > label:not(.form-check-label) {
  display: block;
  font-size: .8125rem;
  font-weight: 500;
  color: var(--lx-text-2);
  margin-bottom: .375rem;
}
/* espaçadores: o <br> no início da coluna fica (às vezes vem depois de texto
   solto, como "Período:"), e com o alinhamento pela base ele já não desalinha.
   Saem só o <br> logo após um rótulo (vira uma linha vazia) e o rótulo vazio. */
body.app .main .row:has(> [class*="col"] > label, > [class*="col"] > .form-group > label) > [class*="col"] > br:first-child:has(+ .btn, + button, + .btn-group, + a > .btn),
body.app .main .row:has(> [class*="col"] > label, > [class*="col"] > .form-group > label) > [class*="col"] > label + br,
body.app .main .row:has(> [class*="col"] > label, > [class*="col"] > .form-group > label) > [class*="col"] > .form-group > label + br,
body.app .main .row:has(> [class*="col"] > label, > [class*="col"] > .form-group > label) > [class*="col"] > label:empty,
body.app .main .row:has(> [class*="col"] > label, > [class*="col"] > .form-group > label) > [class*="col"] > label:not([for]):has(+ .btn, + button, + .btn-group, + a > .btn) {
  display: none;
}
body.app .main .row:has(> [class*="col"] > label, > [class*="col"] > .form-group > label) .btn[style*="margin-top"] { margin-top: 0 !important; }
/* o HTML usa a classe form-group (que tem margem) até no select, no input e
   na própria coluna: a margem sai de todos, e o espaço vem da linha */
body.app .main .row:has(> [class*="col"] > label, > [class*="col"] > .form-group > label) .form-group { margin-bottom: 0; }
body.app .main .row:has(> [class*="col"] > label, > [class*="col"] > .form-group > label):not(:last-child) { margin-bottom: 16px; }
/* seletor com busca (Select2) ocupa a coluna inteira, como os campos nativos */
body.app .main .row:has(> [class*="col"] > label, > [class*="col"] > .form-group > label) > [class*="col"] > .select2-container,
body.app .main .row:has(> [class*="col"] > label, > [class*="col"] > .form-group > label) > [class*="col"] > .form-group > .select2-container {
  width: 100% !important;
}
/* botões da linha com a mesma altura dos campos, inclusive os btn-sm */
body.app .main .row:has(> [class*="col"] > label, > [class*="col"] > .form-group > label) > [class*="col"] > .btn,
body.app .main .row:has(> [class*="col"] > label, > [class*="col"] > .form-group > label) > [class*="col"] > a > .btn,
body.app .main .row:has(> [class*="col"] > label, > [class*="col"] > .form-group > label) > [class*="col"] > .btn-group > .btn,
body.app .main .row:has(> [class*="col"] > label, > [class*="col"] > .form-group > label) > [class*="col"] > .form-group > .btn {
  font-size: .875rem;
  line-height: 1.5;
  padding: .45rem .75rem;
  border-radius: var(--lx-r);
}

/* Simcards: o HTML não tem o card que as outras telas têm (filtro e tabela
   ficam soltos no fundo). A linha do filtro e o bloco da tabela viram as duas
   metades de um mesmo card: cantos de cima no filtro, cantos de baixo na tabela. */
body.app [ng-controller="DashboardController"] > .container-fluid > .row:first-child {
  margin: 0 !important;
  padding: 22px 24px 18px;
  background: var(--lx-surface);
  border: 1px solid var(--lx-line);
  border-bottom: 0;
  border-radius: 14px 14px 0 0;
}
body.app [ng-controller="DashboardController"] > .container-fluid > div:has(> #table_wrapper, > table#table) {
  margin-top: 0 !important;
  padding: 6px 24px 22px;
  background: var(--lx-surface);
  border: 1px solid var(--lx-line);
  border-top: 0;
  border-radius: 0 0 14px 14px;
  box-shadow: var(--lx-shadow-1);
}
/* os avisos de "Carregando" ficam entre as duas metades: ganham o mesmo fundo */
body.app [ng-controller="DashboardController"] > .container-fluid > #loading,
body.app [ng-controller="DashboardController"] > .container-fluid > #loading2 {
  background: var(--lx-surface);
  border-left: 1px solid var(--lx-line);
  border-right: 1px solid var(--lx-line);
  margin: 0;
  padding: 8px 0;
}
/* campo Busca + botão de filtros avançados lado a lado, mesma altura */
body.app [ng-controller="DashboardController"] #div_busca > .row {
  align-items: flex-end;
  flex-wrap: nowrap;
}
body.app [ng-controller="DashboardController"] #div_busca > .row > .col-10 { flex: 1 1 0%; min-width: 0; max-width: none; padding-right: 8px; }
body.app [ng-controller="DashboardController"] #div_busca > .row > .col-1 {
  flex: 0 0 calc(1.5em + .9rem + 2px + 15px);   /* botão + o padding direito da coluna */
  max-width: calc(1.5em + .9rem + 2px + 15px);
  padding-left: 0;
}
body.app [ng-controller="DashboardController"] #div_busca > .row > .col-1 > .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: calc(1.5em + .9rem + 2px);
  height: calc(1.5em + .9rem + 2px);
  padding: 0;
}

/* Rastreadores (#/trackers): 8 campos + 5 botões ocupavam 4 linhas. Dois motivos:
   o link "Documentação J16" flutua à direita e estreita a linha inteira (a .row
   é flex e foge do float), e as colunas do HTML são largas (Cliente e
   Fabricante com 1/3 cada). O link sobe para a faixa do cabeçalho, como ação
   da página, e a linha vira uma grade que se ajusta à largura. */
body.app [ng-controller="TrackerController"] .card-body > .float-right {
  float: none;
  position: absolute;
  top: -77px;        /* card a 24 da faixa; centro da faixa de 76 a 62; botão de ~30 */
  right: 20px;       /* mesmo recuo do conteúdo da faixa */
  z-index: 2;
}
body.app [ng-controller="TrackerController"] .card-body > .float-right .btn {
  font-size: .8125rem;
  padding: .4rem .85rem;
}
/* --------------------------------------------------------------------------
   7c. Filtros compactos (todas as telas de listagem)
   As colunas do HTML são largas e fixas (1/3, 1/4 da tela), então o filtro
   ocupava 4 ou 5 linhas. Aqui, só nas linhas que são filtro (têm rótulos E
   botões, ou são seguidas por uma linha só de botões), os campos passam a
   dividir a largura com uma base mínima, e os botões vão para uma linha
   própria, centralizada. Formulários de cadastro e janelas modais ficam como
   estão. A ordem visual muda, a do HTML não (leitor de tela e Tab seguem
   a ordem original).
   -------------------------------------------------------------------------- */
body.app .main .row:not(.modal .row):not([class*="col"] .row):not(form .row):not([ng-controller="SimcardSharingController"] .row):has(> [class*="col"] > label, > [class*="col"] > .form-group > label):has(> [class*="col"] > .btn, > [class*="col"] > .btn-group, > [class*="col"] > a > .btn, > [class*="col"] > a.btn, + .row > [class*="col"] > .btn, + .row > [class*="col"] > .btn-group, + .row > [class*="col"] > a > .btn, + .row > [class*="col"] > a.btn),
body.app .main .row:not(.modal .row):not([class*="col"] .row):not(form .row):not([ng-controller="SimcardSharingController"] .row):not(:has(label)):has(> [class*="col"] > .btn, > [class*="col"] > .btn-group, > [class*="col"] > a > .btn, > [class*="col"] > a.btn) {
  margin-left: 0 !important;
  margin-right: 0 !important;
  gap: 16px 20px;
}
body.app .main .row:not(.modal .row):not([class*="col"] .row):not(form .row):not([ng-controller="SimcardSharingController"] .row):has(> [class*="col"] > label, > [class*="col"] > .form-group > label):has(> [class*="col"] > .btn, > [class*="col"] > .btn-group, > [class*="col"] > a > .btn, > [class*="col"] > a.btn, + .row > [class*="col"] > .btn, + .row > [class*="col"] > .btn-group, + .row > [class*="col"] > a > .btn, + .row > [class*="col"] > a.btn) > [class*="col"],
body.app .main .row:not(.modal .row):not([class*="col"] .row):not(form .row):not([ng-controller="SimcardSharingController"] .row):not(:has(label)):has(> [class*="col"] > .btn, > [class*="col"] > .btn-group, > [class*="col"] > a > .btn, > [class*="col"] > a.btn) > [class*="col"] {
  padding-left: 0;
  padding-right: 0;
  max-width: none;
  margin-top: 0 !important;      /* algumas colunas de botão têm mt-3 */
}
/* campos: colunas de largura fixa, calculada pela largura da própria linha
   (container query): até 6 colunas (a partir de ~1240 px úteis), descendo até 3.
   Acima disso os campos ficam mais largos em vez de caber mais por linha.
   Campo que no HTML era largo (col-4 ou mais, intervalo de datas, linha
   interna) ocupa 2 colunas. Os campos crescem na proporção (o largo, o dobro)
   até fechar a linha, então nenhuma linha fica com vazio no fim. */
body.app .main .row:not(.modal .row):not([class*="col"] .row):not(form .row):not([ng-controller="SimcardSharingController"] .row):has(> [class*="col"] > label, > [class*="col"] > .form-group > label):has(> [class*="col"] > .btn, > [class*="col"] > .btn-group, > [class*="col"] > a > .btn, > [class*="col"] > a.btn, + .row > [class*="col"] > .btn, + .row > [class*="col"] > .btn-group, + .row > [class*="col"] > a > .btn, + .row > [class*="col"] > a.btn) {
  container-type: inline-size;
  --lx-n: 3;
  justify-content: center;
}
@container (min-width: 820px) { body.app .main .row:not(.modal .row):not([class*="col"] .row):not(form .row):not([ng-controller="SimcardSharingController"] .row):has(> [class*="col"] > label, > [class*="col"] > .form-group > label):has(> [class*="col"] > .btn, > [class*="col"] > .btn-group, > [class*="col"] > a > .btn, > [class*="col"] > a.btn, + .row > [class*="col"] > .btn, + .row > [class*="col"] > .btn-group, + .row > [class*="col"] > a > .btn, + .row > [class*="col"] > a.btn) > * { --lx-n: 4; } }
@container (min-width: 1030px) { body.app .main .row:not(.modal .row):not([class*="col"] .row):not(form .row):not([ng-controller="SimcardSharingController"] .row):has(> [class*="col"] > label, > [class*="col"] > .form-group > label):has(> [class*="col"] > .btn, > [class*="col"] > .btn-group, > [class*="col"] > a > .btn, > [class*="col"] > a.btn, + .row > [class*="col"] > .btn, + .row > [class*="col"] > .btn-group, + .row > [class*="col"] > a > .btn, + .row > [class*="col"] > a.btn) > * { --lx-n: 5; } }
@container (min-width: 1240px) { body.app .main .row:not(.modal .row):not([class*="col"] .row):not(form .row):not([ng-controller="SimcardSharingController"] .row):has(> [class*="col"] > label, > [class*="col"] > .form-group > label):has(> [class*="col"] > .btn, > [class*="col"] > .btn-group, > [class*="col"] > a > .btn, > [class*="col"] > a.btn, + .row > [class*="col"] > .btn, + .row > [class*="col"] > .btn-group, + .row > [class*="col"] > a > .btn, + .row > [class*="col"] > a.btn) > * { --lx-n: 6; } }
body.app .main .row:not(.modal .row):not([class*="col"] .row):not(form .row):not([ng-controller="SimcardSharingController"] .row):has(> [class*="col"] > label, > [class*="col"] > .form-group > label):has(> [class*="col"] > .btn, > [class*="col"] > .btn-group, > [class*="col"] > a > .btn, > [class*="col"] > a.btn, + .row > [class*="col"] > .btn, + .row > [class*="col"] > .btn-group, + .row > [class*="col"] > a > .btn, + .row > [class*="col"] > a.btn) > [class*="col"]:not(:has(> .btn, > .btn-group, > a > .btn, > a.btn)) {
  --lx-cel: calc((100cqw - (var(--lx-n) - 1) * 20px) / var(--lx-n) - .5px);
  flex: 1 1 var(--lx-cel);    /* cresce para fechar a linha: sem vazio no fim */
  width: auto;
  min-width: 0;
  order: 0;
}
body.app .main .row:not(.modal .row):not([class*="col"] .row):not(form .row):not([ng-controller="SimcardSharingController"] .row):has(> [class*="col"] > label, > [class*="col"] > .form-group > label):has(> [class*="col"] > .btn, > [class*="col"] > .btn-group, > [class*="col"] > a > .btn, > [class*="col"] > a.btn, + .row > [class*="col"] > .btn, + .row > [class*="col"] > .btn-group, + .row > [class*="col"] > a > .btn, + .row > [class*="col"] > a.btn) > [class*="col"]:not(:has(> .btn, > .btn-group, > a > .btn, > a.btn)):is([class*="col-md-4"], [class*="col-md-5"], [class*="col-md-6"], [class*="col-lg-4"], [class*="col-lg-6"], .col-4, .col-5, .col-6, :has(> .row), :has(input ~ input)):not([class*="col-lg-1"], [class*="col-lg-2"], [class*="col-lg-3"]) {
  flex: 2 1 calc(var(--lx-cel) * 2 + 20px);   /* cresce o dobro dos outros */
}
/* botões: barra de ações própria, abaixo dos campos. O botão de buscar
   (btn-primary: Buscar, Atualizar) fica sempre no canto direito, fechando o
   filtro; as demais ações (Novo, Exportar, Ações em Lote) à esquerda.
   O espaço entre os dois grupos é o de uma barra de ferramentas. */
body.app .main .row:not(.modal .row):not([class*="col"] .row):not(form .row):not([ng-controller="SimcardSharingController"] .row):has(> [class*="col"] > label, > [class*="col"] > .form-group > label):has(> [class*="col"] > .btn, > [class*="col"] > .btn-group, > [class*="col"] > a > .btn, > [class*="col"] > a.btn, + .row > [class*="col"] > .btn, + .row > [class*="col"] > .btn-group, + .row > [class*="col"] > a > .btn, + .row > [class*="col"] > a.btn)::after {
  content: "";
  order: 1;
  flex: 0 0 100%;
  height: 0;
}
body.app .main .row:not(.modal .row):not([class*="col"] .row):not(form .row):not([ng-controller="SimcardSharingController"] .row):has(> [class*="col"] > label, > [class*="col"] > .form-group > label):has(> [class*="col"] > .btn, > [class*="col"] > .btn-group, > [class*="col"] > a > .btn, > [class*="col"] > a.btn, + .row > [class*="col"] > .btn, + .row > [class*="col"] > .btn-group, + .row > [class*="col"] > a > .btn, + .row > [class*="col"] > a.btn) > [class*="col"]:has(> .btn, > .btn-group, > a > .btn, > a.btn),
body.app .main .row:not(.modal .row):not([class*="col"] .row):not(form .row):not([ng-controller="SimcardSharingController"] .row):not(:has(label)):has(> [class*="col"] > .btn, > [class*="col"] > .btn-group, > [class*="col"] > a > .btn, > [class*="col"] > a.btn) > [class*="col"] {
  flex: 0 0 auto;
  width: auto;
  min-width: 160px;
  order: 2;
}
body.app .main .row:not(.modal .row):not([class*="col"] .row):not(form .row):not([ng-controller="SimcardSharingController"] .row):has(> [class*="col"] > label, > [class*="col"] > .form-group > label):has(> [class*="col"] > .btn, > [class*="col"] > .btn-group, > [class*="col"] > a > .btn, > [class*="col"] > a.btn, + .row > [class*="col"] > .btn, + .row > [class*="col"] > .btn-group, + .row > [class*="col"] > a > .btn, + .row > [class*="col"] > a.btn) > [class*="col"]:has(> .btn, > .btn-group, > a > .btn, > a.btn):has(> .btn-primary, > a > .btn-primary, > a.btn-primary),
body.app .main .row:not(.modal .row):not([class*="col"] .row):not(form .row):not([ng-controller="SimcardSharingController"] .row):not(:has(label)):has(> [class*="col"] > .btn, > [class*="col"] > .btn-group, > [class*="col"] > a > .btn, > [class*="col"] > a.btn) > [class*="col"]:has(> .btn-primary, > a > .btn-primary, > a.btn-primary) {
  order: 3;
  margin-left: auto;
  min-width: 190px;
}
body.app .main .row:not(.modal .row):not([class*="col"] .row):not(form .row):not([ng-controller="SimcardSharingController"] .row):not(:has(label)):has(> [class*="col"] > .btn, > [class*="col"] > .btn-group, > [class*="col"] > a > .btn, > [class*="col"] > a.btn) { justify-content: flex-start; margin-top: 16px !important; }
body.app .main .row:not(.modal .row):not([class*="col"] .row):not(form .row):not([ng-controller="SimcardSharingController"] .row):has(> [class*="col"] > label, > [class*="col"] > .form-group > label):has(> [class*="col"] > .btn, > [class*="col"] > .btn-group, > [class*="col"] > a > .btn, > [class*="col"] > a.btn, + .row > [class*="col"] > .btn, + .row > [class*="col"] > .btn-group, + .row > [class*="col"] > a > .btn, + .row > [class*="col"] > a.btn) { justify-content: flex-start; }

/* intervalo de datas com texto solto ("Período: x até y"): o texto segue o
   estilo dos rótulos e as duas datas dividem a largura da coluna */
body.app .main .row:not(.modal .row):not([class*="col"] .row):not(form .row):not([ng-controller="SimcardSharingController"] .row):has(> [class*="col"] > label, > [class*="col"] > .form-group > label):has(> [class*="col"] > .btn, > [class*="col"] > .btn-group, > [class*="col"] > a > .btn, > [class*="col"] > a.btn, + .row > [class*="col"] > .btn, + .row > [class*="col"] > .btn-group, + .row > [class*="col"] > a > .btn, + .row > [class*="col"] > a.btn) > [class*="col"]:has(> input ~ input):not(:has(> label)) {
  font-size: .8125rem;
  font-weight: 500;
  color: var(--lx-text-2);
}
body.app .main .row:not(.modal .row):not([class*="col"] .row):not(form .row):not([ng-controller="SimcardSharingController"] .row):has(> [class*="col"] > label, > [class*="col"] > .form-group > label):has(> [class*="col"] > .btn, > [class*="col"] > .btn-group, > [class*="col"] > a > .btn, > [class*="col"] > a.btn, + .row > [class*="col"] > .btn, + .row > [class*="col"] > .btn-group, + .row > [class*="col"] > a > .btn, + .row > [class*="col"] > a.btn) > [class*="col"]:has(> input ~ input) > input {
  width: calc(50% - 18px) !important;   /* o HTML fixa 120px inline */
  font-size: .875rem;
  font-weight: 400;
}
/* linha de filtro seguida de linha de botões: sem margem extra entre as duas */
body.app .main .row:not(.modal .row):not([class*="col"] .row):not(form .row):not([ng-controller="SimcardSharingController"] .row):has(> [class*="col"] > label, > [class*="col"] > .form-group > label):has(> [class*="col"] > .btn, > [class*="col"] > .btn-group, > [class*="col"] > a > .btn, > [class*="col"] > a.btn, + .row > [class*="col"] > .btn, + .row > [class*="col"] > .btn-group, + .row > [class*="col"] > a > .btn, + .row > [class*="col"] > a.btn):has(+ .row) { margin-bottom: 0 !important; }

/* separador entre o filtro e a barra "resultados por página / Pesquisar" */
body.app .main .card-body > .dataTables_wrapper:not(:first-child),
body.app [ng-controller="DashboardController"] > .container-fluid > div > .dataTables_wrapper {
  border-top: 1px solid var(--lx-line);
  margin-top: 20px;
  padding-top: 20px;
}
body.app [ng-controller="DashboardController"] > .container-fluid > div:has(> #table_wrapper) { padding-top: 0; margin-bottom: 30px; }   /* respiro no fim da página, como os cards das outras telas */
body.app [ng-controller="DashboardController"] > .container-fluid > div > .dataTables_wrapper { margin-top: 0; }

/* --------------------------------------------------------------------------
   7d. Rótulo na borda (filtros)
   O título do campo sai de cima e fica pequeno, encaixado na borda superior
   do campo (como um recorte). Economiza a linha de rótulo inteira em cada
   linha do filtro e o título continua sempre visível; fica azul com o foco.
   Só nas linhas de filtro (mesmo seletor da seção 7c).
   -------------------------------------------------------------------------- */
body.app .main .row:not(.modal .row):not([class*="col"] .row):not(form .row):not([ng-controller="SimcardSharingController"] .row):has(> [class*="col"] > label, > [class*="col"] > .form-group > label):has(> [class*="col"] > .btn, > [class*="col"] > .btn-group, > [class*="col"] > a > .btn, > [class*="col"] > a.btn, + .row > [class*="col"] > .btn, + .row > [class*="col"] > .btn-group, + .row > [class*="col"] > a > .btn, + .row > [class*="col"] > a.btn) {
  row-gap: 26px;               /* o rótulo sobe 8px sobre a borda: sobra ~18 entre campos */
}
body.app .main .row:not(.modal .row):not([class*="col"] .row):not(form .row):not([ng-controller="SimcardSharingController"] .row):has(> [class*="col"] > label, > [class*="col"] > .form-group > label):has(> [class*="col"] > .btn, > [class*="col"] > .btn-group, > [class*="col"] > a > .btn, > [class*="col"] > a.btn, + .row > [class*="col"] > .btn, + .row > [class*="col"] > .btn-group, + .row > [class*="col"] > a > .btn, + .row > [class*="col"] > a.btn) > [class*="col"] { position: relative; }
body.app .main .row:not(.modal .row):not([class*="col"] .row):not(form .row):not([ng-controller="SimcardSharingController"] .row):has(> [class*="col"] > label, > [class*="col"] > .form-group > label):has(> [class*="col"] > .btn, > [class*="col"] > .btn-group, > [class*="col"] > a > .btn, > [class*="col"] > a.btn, + .row > [class*="col"] > .btn, + .row > [class*="col"] > .btn-group, + .row > [class*="col"] > a > .btn, + .row > [class*="col"] > a.btn) > [class*="col"] > label:not(.form-check-label),
body.app .main .row:not(.modal .row):not([class*="col"] .row):not(form .row):not([ng-controller="SimcardSharingController"] .row):has(> [class*="col"] > label, > [class*="col"] > .form-group > label):has(> [class*="col"] > .btn, > [class*="col"] > .btn-group, > [class*="col"] > a > .btn, > [class*="col"] > a.btn, + .row > [class*="col"] > .btn, + .row > [class*="col"] > .btn-group, + .row > [class*="col"] > a > .btn, + .row > [class*="col"] > a.btn) > [class*="col"] > .form-group > label:not(.form-check-label) {
  position: absolute;
  top: -8px;
  left: 10px;
  z-index: 3;
  max-width: calc(100% - 20px);
  margin: 0;
  padding: 0 6px;
  background: #fff;
  border-radius: 4px;
  color: var(--lx-muted);
  font-size: 11.5px;
  font-weight: 500;
  line-height: 16px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
  transition: color .15s ease;
}
body.app .main .row:not(.modal .row):not([class*="col"] .row):not(form .row):not([ng-controller="SimcardSharingController"] .row):has(> [class*="col"] > label, > [class*="col"] > .form-group > label):has(> [class*="col"] > .btn, > [class*="col"] > .btn-group, > [class*="col"] > a > .btn, > [class*="col"] > a.btn, + .row > [class*="col"] > .btn, + .row > [class*="col"] > .btn-group, + .row > [class*="col"] > a > .btn, + .row > [class*="col"] > a.btn) > [class*="col"] > .form-group { position: relative; }
body.app .main .row:not(.modal .row):not([class*="col"] .row):not(form .row):not([ng-controller="SimcardSharingController"] .row):has(> [class*="col"] > label, > [class*="col"] > .form-group > label):has(> [class*="col"] > .btn, > [class*="col"] > .btn-group, > [class*="col"] > a > .btn, > [class*="col"] > a.btn, + .row > [class*="col"] > .btn, + .row > [class*="col"] > .btn-group, + .row > [class*="col"] > a > .btn, + .row > [class*="col"] > a.btn) > [class*="col"]:focus-within > label,
body.app .main .row:not(.modal .row):not([class*="col"] .row):not(form .row):not([ng-controller="SimcardSharingController"] .row):has(> [class*="col"] > label, > [class*="col"] > .form-group > label):has(> [class*="col"] > .btn, > [class*="col"] > .btn-group, > [class*="col"] > a > .btn, > [class*="col"] > a.btn, + .row > [class*="col"] > .btn, + .row > [class*="col"] > .btn-group, + .row > [class*="col"] > a > .btn, + .row > [class*="col"] > a.btn) > [class*="col"]:focus-within > .form-group > label { color: var(--lx-blue); }
/* "Período: x até y" (texto solto, sem <label>): o texto some e o rótulo
   "Período" é desenhado na borda da primeira data; as datas ficam lado a lado */
body.app .main .row:not(.modal .row):not([class*="col"] .row):not(form .row):not([ng-controller="SimcardSharingController"] .row):has(> [class*="col"] > label, > [class*="col"] > .form-group > label):has(> [class*="col"] > .btn, > [class*="col"] > .btn-group, > [class*="col"] > a > .btn, > [class*="col"] > a.btn, + .row > [class*="col"] > .btn, + .row > [class*="col"] > .btn-group, + .row > [class*="col"] > a > .btn, + .row > [class*="col"] > a.btn) > [class*="col"]:has(> input ~ input):not(:has(> label)) {
  font-size: 0;
  display: flex;
  gap: 0;                        /* o texto solto conta como item: gap empurrava a 1ª data */
  align-items: flex-end;
}
body.app .main .row:not(.modal .row):not([class*="col"] .row):not(form .row):not([ng-controller="SimcardSharingController"] .row):has(> [class*="col"] > label, > [class*="col"] > .form-group > label):has(> [class*="col"] > .btn, > [class*="col"] > .btn-group, > [class*="col"] > a > .btn, > [class*="col"] > a.btn, + .row > [class*="col"] > .btn, + .row > [class*="col"] > .btn-group, + .row > [class*="col"] > a > .btn, + .row > [class*="col"] > a.btn) > [class*="col"]:has(> input ~ input):not(:has(> label)) > br { display: none; }
body.app .main .row:not(.modal .row):not([class*="col"] .row):not(form .row):not([ng-controller="SimcardSharingController"] .row):has(> [class*="col"] > label, > [class*="col"] > .form-group > label):has(> [class*="col"] > .btn, > [class*="col"] > .btn-group, > [class*="col"] > a > .btn, > [class*="col"] > a.btn, + .row > [class*="col"] > .btn, + .row > [class*="col"] > .btn-group, + .row > [class*="col"] > a > .btn, + .row > [class*="col"] > a.btn) > [class*="col"]:has(> input ~ input):not(:has(> label)) > input {
  flex: 1 1 0;
  width: auto !important;
  min-width: 0;
}
body.app .main .row [class*="col"]:has(> input ~ input):not(:has(> label)) > input ~ input { margin-left: 12px; }
body.app .main .row:not(.modal .row):not([class*="col"] .row):not(form .row):not([ng-controller="SimcardSharingController"] .row):has(> [class*="col"] > label, > [class*="col"] > .form-group > label):has(> [class*="col"] > .btn, > [class*="col"] > .btn-group, > [class*="col"] > a > .btn, > [class*="col"] > a.btn, + .row > [class*="col"] > .btn, + .row > [class*="col"] > .btn-group, + .row > [class*="col"] > a > .btn, + .row > [class*="col"] > a.btn) > [class*="col"]:has(> input ~ input):not(:has(> label))::before {
  content: "Período";
  position: absolute;
  top: -8px;
  left: 10px;
  z-index: 3;
  padding: 0 6px;
  background: #fff;
  border-radius: 4px;
  color: var(--lx-muted);
  font-size: 11.5px;
  font-weight: 500;
  line-height: 16px;
  pointer-events: none;
}

/* campos dentro de uma sublinha do HTML (duas datas em Clientes, Busca em Simcards) */
body.app .main .row:not(.modal .row):not([class*="col"] .row):not(form .row):not([ng-controller="SimcardSharingController"] .row):has(> [class*="col"] > label, > [class*="col"] > .form-group > label):has(> [class*="col"] > .btn, > [class*="col"] > .btn-group, > [class*="col"] > a > .btn, > [class*="col"] > a.btn, + .row > [class*="col"] > .btn, + .row > [class*="col"] > .btn-group, + .row > [class*="col"] > a > .btn, + .row > [class*="col"] > a.btn) > [class*="col"] .row > [class*="col"] { position: relative; }
body.app .main .row:not(.modal .row):not([class*="col"] .row):not(form .row):not([ng-controller="SimcardSharingController"] .row):has(> [class*="col"] > label, > [class*="col"] > .form-group > label):has(> [class*="col"] > .btn, > [class*="col"] > .btn-group, > [class*="col"] > a > .btn, > [class*="col"] > a.btn, + .row > [class*="col"] > .btn, + .row > [class*="col"] > .btn-group, + .row > [class*="col"] > a > .btn, + .row > [class*="col"] > a.btn) > [class*="col"] .row > [class*="col"] > label {
  position: absolute;
  top: -8px;
  left: 25px;          /* 15 do padding da coluna + 10 */
  z-index: 3;
  max-width: calc(100% - 40px);
  margin: 0;
  padding: 0 6px;
  background: #fff;
  border-radius: 4px;
  color: var(--lx-muted);
  font-size: 11.5px;
  font-weight: 500;
  line-height: 16px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
}
body.app .main .row:not(.modal .row):not([class*="col"] .row):not(form .row):not([ng-controller="SimcardSharingController"] .row):has(> [class*="col"] > label, > [class*="col"] > .form-group > label):has(> [class*="col"] > .btn, > [class*="col"] > .btn-group, > [class*="col"] > a > .btn, > [class*="col"] > a.btn, + .row > [class*="col"] > .btn, + .row > [class*="col"] > .btn-group, + .row > [class*="col"] > a > .btn, + .row > [class*="col"] > a.btn) > [class*="col"] .row > [class*="col"] > label:empty { display: none; }
body.app .main .row:not(.modal .row):not([class*="col"] .row):not(form .row):not([ng-controller="SimcardSharingController"] .row):has(> [class*="col"] > label, > [class*="col"] > .form-group > label):has(> [class*="col"] > .btn, > [class*="col"] > .btn-group, > [class*="col"] > a > .btn, > [class*="col"] > a.btn, + .row > [class*="col"] > .btn, + .row > [class*="col"] > .btn-group, + .row > [class*="col"] > a > .btn, + .row > [class*="col"] > a.btn) > [class*="col"] .row > [class*="col"] > label + br { display: none; }
body.app .main .row:not(.modal .row):not([class*="col"] .row):not(form .row):not([ng-controller="SimcardSharingController"] .row):has(> [class*="col"] > label, > [class*="col"] > .form-group > label):has(> [class*="col"] > .btn, > [class*="col"] > .btn-group, > [class*="col"] > a > .btn, > [class*="col"] > a.btn, + .row > [class*="col"] > .btn, + .row > [class*="col"] > .btn-group, + .row > [class*="col"] > a > .btn, + .row > [class*="col"] > a.btn) > [class*="col"] .row > [class*="col"]:focus-within > label { color: var(--lx-blue); }


/* 7e. Ajustes do filtro: campos mais altos, título em caixa alta, espaços */
body.app .main .row:not(.modal .row):not([class*="col"] .row):not(form .row):not([ng-controller="SimcardSharingController"] .row):has(> [class*="col"] > label, > [class*="col"] > .form-group > label):has(> [class*="col"] > .btn, > [class*="col"] > .btn-group, > [class*="col"] > a > .btn, > [class*="col"] > a.btn, + .row > [class*="col"] > .btn, + .row > [class*="col"] > .btn-group, + .row > [class*="col"] > a > .btn, + .row > [class*="col"] > a.btn) { --lx-campo: 46px; }
/* altura dos campos e botões da linha de filtro */
body.app .main .row:not(.modal .row):not([class*="col"] .row):not(form .row):not([ng-controller="SimcardSharingController"] .row):has(> [class*="col"] > label, > [class*="col"] > .form-group > label):has(> [class*="col"] > .btn, > [class*="col"] > .btn-group, > [class*="col"] > a > .btn, > [class*="col"] > a.btn, + .row > [class*="col"] > .btn, + .row > [class*="col"] > .btn-group, + .row > [class*="col"] > a > .btn, + .row > [class*="col"] > a.btn) .form-control:not(textarea):not([multiple]):not([size]),
body.app .main .row:not(.modal .row):not([class*="col"] .row):not(form .row):not([ng-controller="SimcardSharingController"] .row):has(> [class*="col"] > label, > [class*="col"] > .form-group > label):has(> [class*="col"] > .btn, > [class*="col"] > .btn-group, > [class*="col"] > a > .btn, > [class*="col"] > a.btn, + .row > [class*="col"] > .btn, + .row > [class*="col"] > .btn-group, + .row > [class*="col"] > a > .btn, + .row > [class*="col"] > a.btn) input:not([type="checkbox"]):not([type="radio"]):not(.form-control):not(.select2-search__field),
body.app .main .row:not(.modal .row):not([class*="col"] .row):not(form .row):not([ng-controller="SimcardSharingController"] .row):has(> [class*="col"] > label, > [class*="col"] > .form-group > label):has(> [class*="col"] > .btn, > [class*="col"] > .btn-group, > [class*="col"] > a > .btn, > [class*="col"] > a.btn, + .row > [class*="col"] > .btn, + .row > [class*="col"] > .btn-group, + .row > [class*="col"] > a > .btn, + .row > [class*="col"] > a.btn) .select2-container--default .select2-selection--single {
  height: var(--lx-campo, 46px);
}
body.app .main .row:not(.modal .row):not([class*="col"] .row):not(form .row):not([ng-controller="SimcardSharingController"] .row):has(> [class*="col"] > label, > [class*="col"] > .form-group > label):has(> [class*="col"] > .btn, > [class*="col"] > .btn-group, > [class*="col"] > a > .btn, > [class*="col"] > a.btn, + .row > [class*="col"] > .btn, + .row > [class*="col"] > .btn-group, + .row > [class*="col"] > a > .btn, + .row > [class*="col"] > a.btn) .select2-container--default .select2-selection--single .select2-selection__rendered { line-height: calc(var(--lx-campo, 46px) - 2px); }
body.app .main .row:not(.modal .row):not([class*="col"] .row):not(form .row):not([ng-controller="SimcardSharingController"] .row):has(> [class*="col"] > label, > [class*="col"] > .form-group > label):has(> [class*="col"] > .btn, > [class*="col"] > .btn-group, > [class*="col"] > a > .btn, > [class*="col"] > a.btn, + .row > [class*="col"] > .btn, + .row > [class*="col"] > .btn-group, + .row > [class*="col"] > a > .btn, + .row > [class*="col"] > a.btn) .select2-container--default .select2-selection--single .select2-selection__arrow { height: calc(var(--lx-campo, 46px) - 2px); }
body.app .main .row:not(.modal .row):not([class*="col"] .row):not(form .row):not([ng-controller="SimcardSharingController"] .row):has(> [class*="col"] > label, > [class*="col"] > .form-group > label):has(> [class*="col"] > .btn, > [class*="col"] > .btn-group, > [class*="col"] > a > .btn, > [class*="col"] > a.btn, + .row > [class*="col"] > .btn, + .row > [class*="col"] > .btn-group, + .row > [class*="col"] > a > .btn, + .row > [class*="col"] > a.btn) > [class*="col"] > .btn,
body.app .main .row:not(.modal .row):not([class*="col"] .row):not(form .row):not([ng-controller="SimcardSharingController"] .row):has(> [class*="col"] > label, > [class*="col"] > .form-group > label):has(> [class*="col"] > .btn, > [class*="col"] > .btn-group, > [class*="col"] > a > .btn, > [class*="col"] > a.btn, + .row > [class*="col"] > .btn, + .row > [class*="col"] > .btn-group, + .row > [class*="col"] > a > .btn, + .row > [class*="col"] > a.btn) > [class*="col"] > a > .btn,
body.app .main .row:not(.modal .row):not([class*="col"] .row):not(form .row):not([ng-controller="SimcardSharingController"] .row):has(> [class*="col"] > label, > [class*="col"] > .form-group > label):has(> [class*="col"] > .btn, > [class*="col"] > .btn-group, > [class*="col"] > a > .btn, > [class*="col"] > a.btn, + .row > [class*="col"] > .btn, + .row > [class*="col"] > .btn-group, + .row > [class*="col"] > a > .btn, + .row > [class*="col"] > a.btn) > [class*="col"] > .btn-group > .btn,
body.app .main .row:not(.modal .row):not([class*="col"] .row):not(form .row):not([ng-controller="SimcardSharingController"] .row):has(> [class*="col"] > label, > [class*="col"] > .form-group > label):has(> [class*="col"] > .btn, > [class*="col"] > .btn-group, > [class*="col"] > a > .btn, > [class*="col"] > a.btn, + .row > [class*="col"] > .btn, + .row > [class*="col"] > .btn-group, + .row > [class*="col"] > a > .btn, + .row > [class*="col"] > a.btn) + .row > [class*="col"] > .btn,
body.app .main .row:not(.modal .row):not([class*="col"] .row):not(form .row):not([ng-controller="SimcardSharingController"] .row):has(> [class*="col"] > label, > [class*="col"] > .form-group > label):has(> [class*="col"] > .btn, > [class*="col"] > .btn-group, > [class*="col"] > a > .btn, > [class*="col"] > a.btn, + .row > [class*="col"] > .btn, + .row > [class*="col"] > .btn-group, + .row > [class*="col"] > a > .btn, + .row > [class*="col"] > a.btn) + .row > [class*="col"] > a > .btn,
body.app .main .row:not(.modal .row):not([class*="col"] .row):not(form .row):not([ng-controller="SimcardSharingController"] .row):has(> [class*="col"] > label, > [class*="col"] > .form-group > label):has(> [class*="col"] > .btn, > [class*="col"] > .btn-group, > [class*="col"] > a > .btn, > [class*="col"] > a.btn, + .row > [class*="col"] > .btn, + .row > [class*="col"] > .btn-group, + .row > [class*="col"] > a > .btn, + .row > [class*="col"] > a.btn) + .row > [class*="col"] > a.btn,
body.app .main .row:not(.modal .row):not([class*="col"] .row):not(form .row):not([ng-controller="SimcardSharingController"] .row):has(> [class*="col"] > label, > [class*="col"] > .form-group > label):has(> [class*="col"] > .btn, > [class*="col"] > .btn-group, > [class*="col"] > a > .btn, > [class*="col"] > a.btn, + .row > [class*="col"] > .btn, + .row > [class*="col"] > .btn-group, + .row > [class*="col"] > a > .btn, + .row > [class*="col"] > a.btn) + .row > [class*="col"] > .btn-group > .btn {
  min-height: var(--lx-campo, 46px);
  padding-top: .4rem;
  padding-bottom: .4rem;
  font-size: .875rem;            /* Cadastro de Simcards usa btn-lg (20px): mesmo tamanho dos outros */
  line-height: 1.5;
  border-radius: var(--lx-r);
  display: flex;                 /* com altura mínima, o texto ficava no topo */
  align-items: center;
  justify-content: center;
  gap: .4em;
  width: 100%;
}
body.app [ng-controller="DashboardController"] #div_busca > .row > .col-1 > .btn { width: 46px; height: 46px; }
body.app [ng-controller="DashboardController"] #div_busca > .row > .col-1 { flex-basis: 61px; max-width: 61px; }
/* título encaixado na borda: caixa alta, pequeno, espaçado */
body.app .main .row:not(.modal .row):not([class*="col"] .row):not(form .row):not([ng-controller="SimcardSharingController"] .row):has(> [class*="col"] > label, > [class*="col"] > .form-group > label):has(> [class*="col"] > .btn, > [class*="col"] > .btn-group, > [class*="col"] > a > .btn, > [class*="col"] > a.btn, + .row > [class*="col"] > .btn, + .row > [class*="col"] > .btn-group, + .row > [class*="col"] > a > .btn, + .row > [class*="col"] > a.btn) > [class*="col"] > label:not(.form-check-label),
body.app .main .row:not(.modal .row):not([class*="col"] .row):not(form .row):not([ng-controller="SimcardSharingController"] .row):has(> [class*="col"] > label, > [class*="col"] > .form-group > label):has(> [class*="col"] > .btn, > [class*="col"] > .btn-group, > [class*="col"] > a > .btn, > [class*="col"] > a.btn, + .row > [class*="col"] > .btn, + .row > [class*="col"] > .btn-group, + .row > [class*="col"] > a > .btn, + .row > [class*="col"] > a.btn) > [class*="col"] > .form-group > label:not(.form-check-label),
body.app .main .row:not(.modal .row):not([class*="col"] .row):not(form .row):not([ng-controller="SimcardSharingController"] .row):has(> [class*="col"] > label, > [class*="col"] > .form-group > label):has(> [class*="col"] > .btn, > [class*="col"] > .btn-group, > [class*="col"] > a > .btn, > [class*="col"] > a.btn, + .row > [class*="col"] > .btn, + .row > [class*="col"] > .btn-group, + .row > [class*="col"] > a > .btn, + .row > [class*="col"] > a.btn) > [class*="col"] .row > [class*="col"] > label,
body.app .main .row:not(.modal .row):not([class*="col"] .row):not(form .row):not([ng-controller="SimcardSharingController"] .row):has(> [class*="col"] > label, > [class*="col"] > .form-group > label):has(> [class*="col"] > .btn, > [class*="col"] > .btn-group, > [class*="col"] > a > .btn, > [class*="col"] > a.btn, + .row > [class*="col"] > .btn, + .row > [class*="col"] > .btn-group, + .row > [class*="col"] > a > .btn, + .row > [class*="col"] > a.btn) > [class*="col"]:has(> input ~ input):not(:has(> label))::before {
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: 10.5px;
  font-weight: 600;
}
/* espaço vertical: vem da margem de baixo de cada campo, não do row-gap.
   Com row-gap, a quebra invisível antes dos botões contava como mais uma
   linha (campos -> botões dava 44-52px). Agora: 26px entre linhas de campos
   e 24px dos campos até a barra de ações; 10px de respiro no topo para o
   título encaixado não colar na borda do card. */
body.app .main .row:not(.modal .row):not([class*="col"] .row):not(form .row):not([ng-controller="SimcardSharingController"] .row):has(> [class*="col"] > label, > [class*="col"] > .form-group > label):has(> [class*="col"] > .btn, > [class*="col"] > .btn-group, > [class*="col"] > a > .btn, > [class*="col"] > a.btn, + .row > [class*="col"] > .btn, + .row > [class*="col"] > .btn-group, + .row > [class*="col"] > a > .btn, + .row > [class*="col"] > a.btn) { row-gap: 0; padding-top: 10px; }
body.app .main .row:not(.modal .row):not([class*="col"] .row):not(form .row):not([ng-controller="SimcardSharingController"] .row):has(> [class*="col"] > label, > [class*="col"] > .form-group > label):has(> [class*="col"] > .btn, > [class*="col"] > .btn-group, > [class*="col"] > a > .btn, > [class*="col"] > a.btn, + .row > [class*="col"] > .btn, + .row > [class*="col"] > .btn-group, + .row > [class*="col"] > a > .btn, + .row > [class*="col"] > a.btn) > [class*="col"]:not(:has(> .btn, > .btn-group, > a > .btn, > a.btn)) { margin-bottom: 26px; }
body.app .main .row:not(.modal .row):not([class*="col"] .row):not(form .row):not([ng-controller="SimcardSharingController"] .row):has(> [class*="col"] > label, > [class*="col"] > .form-group > label):has(> [class*="col"] > .btn, > [class*="col"] > .btn-group, > [class*="col"] > a > .btn, > [class*="col"] > a.btn, + .row > [class*="col"] > .btn, + .row > [class*="col"] > .btn-group, + .row > [class*="col"] > a > .btn, + .row > [class*="col"] > a.btn) > [class*="col"]:has(> .btn, > .btn-group, > a > .btn, > a.btn) { margin-top: -2px !important; }
body.app .main .row:not(.modal .row):not([class*="col"] .row):not(form .row):not([ng-controller="SimcardSharingController"] .row):has(> [class*="col"] > label, > [class*="col"] > .form-group > label):has(> [class*="col"] > .btn, > [class*="col"] > .btn-group, > [class*="col"] > a > .btn, > [class*="col"] > a.btn, + .row > [class*="col"] > .btn, + .row > [class*="col"] > .btn-group, + .row > [class*="col"] > a > .btn, + .row > [class*="col"] > a.btn) + .row:not(:has(label)) { margin-top: 0 !important; }
/* Simcards: o card desenhado no CSS volta a ter respiro em cima */
body.app [ng-controller="DashboardController"] > .container-fluid > .row:first-child { padding-top: 32px; }

/* Simcards: o card desenhado no CSS tem respiro em cima (a regra geral do
   filtro, mais específica, zerava; daí o !important) */
body.app [ng-controller="DashboardController"] > .container-fluid > .row:first-child { padding-top: 34px !important; }

/* Legenda de Pedidos: no HTML é uma grade de 6 colunas fixas dentro de um
   alerta azul (itens espalhados, um quebrando sozinho, "Legendas" solto).
   Vira uma faixa discreta: rótulo em caixa alta à esquerda e os itens
   corridos, quebrando só quando não cabem. Os códigos seguem iguais aos da
   tabela. O texto "Legendas" é um nó solto no HTML: a caixa alta vem do
   próprio bloco e os itens voltam ao normal. */
body.app .main .alert.alert-info:has(> .row > [class*="col"] > .badge) {
  display: flex;
  align-items: baseline;
  gap: 8px 24px;
  margin: 24px 0 0;            /* mesmo respiro entre campos e barra de ações */
  padding: 12px 16px !important;
  background: var(--lx-surface-2);
  border: 1px solid var(--lx-line);
  border-radius: 10px;
  color: var(--lx-muted);
  font-size: 10.5px !important;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
}
body.app .main .alert.alert-info:has(> .row > [class*="col"] > .badge) > .row {
  flex: 1 1 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  margin: 0;
  color: var(--lx-text-2);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}
body.app .main .alert.alert-info:has(> .row > [class*="col"] > .badge) > .row > [class*="col"] {
  flex: 0 0 auto;
  max-width: none;
  width: auto;
  padding: 0;
  white-space: nowrap;
}
body.app .main .alert.alert-info:has(> .row > [class*="col"] > .badge) .badge { margin-right: 4px; }
/* alerta vazio (o JS só preenche quando há mensagem) não ocupa espaço */
body.app .main .alert:empty { padding: 0; margin: 0; border: 0; }

/* --------------------------------------------------------------------------
   8. Tabelas e DataTables
   -------------------------------------------------------------------------- */
body.app .main .table { color: var(--lx-text); }
body.app .main .table th,
body.app .main .table td { border-top-color: var(--lx-line); vertical-align: middle; }
body.app .main .table thead th,
body.app .main .tablex th {
  background: var(--lx-surface-2);
  color: var(--lx-muted);
  font-size: .8125rem;
  font-weight: 500;
  border-top: 0;
  border-bottom: 1px solid var(--lx-line);
}
body.app .main .table thead th:first-child { border-top-left-radius: var(--lx-r); }
body.app .main .table thead th:last-child  { border-top-right-radius: var(--lx-r); }
body.app .main .table tbody tr { transition: background-color .12s ease; }
body.app .main .table-hover tbody tr:hover,
body.app .main table.dataTable tbody tr:hover { background-color: #f6f8fb; }
body.app .main .table-striped tbody tr:nth-of-type(odd) { background-color: #fafbfc; }
body.app .main .table-bordered,
body.app .main .table-bordered th,
body.app .main .table-bordered td { border-color: var(--lx-line); }
body.app .main table.dataTable { border-collapse: separate !important; border-spacing: 0; }
body.app .main table.dataTable.no-footer { border-bottom: 1px solid var(--lx-line); }
body.app .main table.dataTable thead th,
body.app .main table.dataTable thead td { border-bottom: 1px solid var(--lx-line); }

/* medidor de consumo dentro de tabela (coluna "Dados" de Simcards): o texto
   ficava por cima de uma barra quase da cor do fundo. Vira texto em cima e,
   embaixo, um trilho fino visível com a barra. O texto mora dentro da barra
   no HTML, então sai dela por posicionamento. */
body.app .main .table .progress {
  position: relative;
  height: auto;
  min-width: 96px;
  padding-top: 18px;
  overflow: visible;
  background: none;
  border-radius: 0;
  z-index: 0;                  /* cria o contexto para o trilho ficar atrás da barra */
}
body.app .main .table .progress::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 6px;
  border-radius: 999px;
  background: #d6dde5;
  z-index: -1;
}
body.app .main .table .progress > .progress-bar {
  height: 6px;
  min-width: 3px;
  max-width: 100%;
  border-radius: 999px;
  overflow: visible;
  position: static;
}
body.app .main .table .progress > .progress-bar > span {
  position: absolute;
  top: 0;
  left: 0;
  white-space: nowrap;
  color: var(--lx-text-2) !important;   /* o HTML força color: black inline */
  font-size: 11.5px;
  line-height: 14px;
  font-weight: 500;
}

/* coluna ordenada: o DataTables pinta de cinza; aqui fica só um véu */
body.app .main table.dataTable.display tbody tr > .sorting_1,
body.app .main table.dataTable.order-column tbody tr > .sorting_1,
body.app .main table.dataTable.display tbody tr.odd > .sorting_1,
body.app .main table.dataTable.display tbody tr.even > .sorting_1 {
  background-color: rgba(10, 45, 66, .025);
  box-shadow: none;
}

/* barra de controles do DataTables */
body.app .dataTables_wrapper .dataTables_length,
body.app .dataTables_wrapper .dataTables_filter,
body.app .dataTables_wrapper .dataTables_info { color: var(--lx-muted); font-size: .8125rem; }
body.app .dataTables_wrapper .dataTables_length,
body.app .dataTables_wrapper .dataTables_filter { margin-bottom: 14px; }
body.app .dataTables_wrapper .dataTables_filter input { margin-left: .5rem; min-width: 220px; }

/* campo "Pesquisar": faixa azul clara com título forte e lupa no campo, para
   se destacar do restante da linha. A faixa (50px) é mais alta que o select e os
   botões (~37px); avança 6px para cima e para baixo e fica centrada na linha. */
body.app .dataTables_wrapper .dataTables_filter label {
  display: inline-flex !important;
  align-items: center;
  gap: 10px;
  margin: -6px 0 !important;
  padding: 6px 6px 6px 14px;
  border: 1px solid var(--lx-active-line);
  border-radius: 12px;
  background: var(--lx-blue-soft);
  color: var(--lx-navy);
  font-size: 13px;
  font-weight: 600;
}
body.app .dataTables_wrapper .dataTables_filter input {
  min-width: 260px;
  height: 36px !important;
  margin-left: 0 !important;
  padding-left: 34px !important;
  border-color: var(--lx-active-line) !important;
  background: var(--lx-surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%231b6fa8' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") no-repeat 11px 50% !important;
}
body.app .dataTables_wrapper .dataTables_filter input:focus { border-color: var(--lx-blue) !important; }
@media (max-width: 767.98px) {
  body.app .dataTables_wrapper .dataTables_filter label { display: flex !important; margin: 0 !important; }
  body.app .dataTables_wrapper .dataTables_filter input { flex: 1; min-width: 0; }
}
body.app .dataTables_wrapper .dataTables_info { padding-top: 1.1em; }

body.app .dataTables_wrapper .dt-button,
body.app .dataTables_wrapper .dt-buttons .btn {
  background: var(--lx-surface) !important;
  background-image: none !important;
  border: 1px solid var(--lx-line-strong) !important;
  border-radius: var(--lx-r) !important;
  color: var(--lx-text-2) !important;
  font-size: .8125rem;
  font-weight: 500;
  padding: .4rem .85rem;
  box-shadow: none !important;
  margin-bottom: 14px;
}
body.app .dataTables_wrapper .dt-button:hover:not(.disabled),
body.app .dataTables_wrapper .dt-buttons .btn:hover {
  background: var(--lx-surface-2) !important;
  border-color: var(--lx-line-strong) !important;
  color: var(--lx-navy) !important;
}

/* sem campo "Pesquisar" (ex.: Simcards), os botões da barra (Selecionar
   todos, Exportar...) vão para a direita, onde ficaria a pesquisa; com
   pesquisa, seguem no centro como no Lara */
body.app .dataTables_wrapper:not(:has(.dataTables_filter)) .dt-buttons { text-align: right; }

/* paginação (o DataTables usa !important no padrão dele) */
body.app .dataTables_wrapper .dataTables_paginate { padding-top: .75em; }
body.app .dataTables_wrapper .dataTables_paginate .paginate_button {
  border: 1px solid transparent !important;
  border-radius: var(--lx-r) !important;
  background: transparent !important;
  color: var(--lx-text-2) !important;
  min-width: 36px;
  padding: .4em .75em;
  margin-left: 4px;
  transition: background-color .12s ease;
}
body.app .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background: var(--lx-surface-2) !important;
  border-color: var(--lx-line) !important;
  color: var(--lx-navy) !important;
}
body.app .dataTables_wrapper .dataTables_paginate .paginate_button.current,
body.app .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  background: var(--lx-navy) !important;
  border-color: var(--lx-navy) !important;
  color: #fff !important;
  font-weight: 500;
}
body.app .dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
body.app .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
  background: transparent !important;
  border-color: transparent !important;
  color: #b4bcc8 !important;
}
body.app .dataTables_wrapper .dataTables_processing {
  background: var(--lx-surface);
  border: 1px solid var(--lx-line);
  border-radius: var(--lx-r-lg);
  box-shadow: var(--lx-shadow-2);
  color: var(--lx-text-2);
}

/* linha expansível do modo responsivo */
body.app table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control::before,
body.app table.dataTable.dtr-inline.collapsed > tbody > tr > th.dtr-control::before {
  color: var(--lx-icon);
  font-size: .75em;
  margin-right: .75em;
}
body.app table.dataTable.dtr-inline.collapsed > tbody > tr.parent > td.dtr-control::before { color: var(--lx-voxter); }
body.app table.dataTable.dtr-inline.collapsed > tbody > tr.parent > td { background: var(--lx-surface-2); }
body.app table.dataTable > tbody > tr.child { background: var(--lx-surface-2); }
body.app table.dataTable > tbody > tr.child ul.dtr-details > li { border-bottom-color: var(--lx-line); padding: .6em 0; }
body.app table.dataTable > tbody > tr.child span.dtr-title { color: var(--lx-muted); font-weight: 500; min-width: 140px; }

/* paginação Bootstrap (telas que não usam a do DataTables) */
body.app .pagination .page-link {
  border-color: var(--lx-line);
  color: var(--lx-text-2);
}
body.app .pagination .page-item:first-child .page-link { border-radius: var(--lx-r) 0 0 var(--lx-r); }
body.app .pagination .page-item:last-child .page-link  { border-radius: 0 var(--lx-r) var(--lx-r) 0; }
body.app .pagination .page-item.active .page-link { background: var(--lx-navy); border-color: var(--lx-navy); color: #fff; }


/* --------------------------------------------------------------------------
   8b. Coluna "Info" (Simcards): operadora e rede
   O Lara escolhe a imagem assets/img/<operadora>_on.png (online) ou _off.png
   (offline: mostra a última operadora). Aqui a imagem original é escondida
   dentro da própria <img> (object-position) e no lugar entra uma caixa 35x35
   na cor da operadora com o logo branco (assets/img/operadoras/<op>.png).
   _off = mesma caixa e mesmo logo, acinzentados. Nada muda no JavaScript.
   Só dentro de tabela: o mapa de ERBs usa as mesmas imagens e fica como está.
   -------------------------------------------------------------------------- */
body.app .main table img:is([src$="_on.png"], [src$="_off.png"])[src*="assets/img/"] {
  width: 35px !important;
  height: 35px !important;          /* o HTML fixa height: 18px inline */
  padding: 0;
  border-radius: 9px;
  object-fit: none;
  object-position: -9999px -9999px; /* esconde o desenho antigo, sem esconder o elemento */
  background: #a3acb8 no-repeat center / 25px 25px;
  vertical-align: middle;
}
body.app .main table img:is([src$="_on.png"], [src$="_off.png"])[src*="assets/img/"][src$="_off.png"] {
  background-color: #b4bcc6 !important;
  opacity: .8;
  filter: grayscale(1);
}
body.app .main table img:is([src$="_on.png"], [src$="_off.png"])[src*="assets/img/algar_"] { background-color: #17a398; background-image: url("../img/operadoras/algar.png"); }
body.app .main table img:is([src$="_on.png"], [src$="_off.png"])[src*="assets/img/antel_"] { background-color: #002e68; background-image: url("../img/operadoras/antel.png"); }
body.app .main table img:is([src$="_on.png"], [src$="_off.png"])[src*="assets/img/digitel_"] { background-color: #ff0046; background-image: url("../img/operadoras/digitel.png"); }
body.app .main table img:is([src$="_on.png"], [src$="_off.png"])[src*="assets/img/emnify_"] { background-color: #0f0f5e; background-image: url("../img/operadoras/emnify.png"); }
body.app .main table img:is([src$="_on.png"], [src$="_off.png"])[src*="assets/img/lf+_"] { background-color: #5e2a86; background-image: url("../img/operadoras/lf-mais.png"); }
body.app .main table img:is([src$="_on.png"], [src$="_off.png"])[src*="assets/img/links_field_"] { background-color: #5e2a86; background-image: url("../img/operadoras/links_field.png"); }
body.app .main table img:is([src$="_on.png"], [src$="_off.png"])[src*="assets/img/movistar_"] { background-color: #0baf3b; background-image: url("../img/operadoras/movistar.png"); }
body.app .main table img:is([src$="_on.png"], [src$="_off.png"])[src*="assets/img/personal_"] { background-color: #1cacd9; background-image: url("../img/operadoras/personal.png"); }
body.app .main table img:is([src$="_on.png"], [src$="_off.png"])[src*="assets/img/viva_"] { background-color: #8cbf00; background-image: url("../img/operadoras/viva.png"); }
body.app .main table img:is([src$="_on.png"], [src$="_off.png"])[src*="assets/img/vivo_"] { background-color: #5e2a86; background-image: url("../img/operadoras/vivo.png"); }
body.app .main table img:is([src$="_on.png"], [src$="_off.png"])[src*="assets/img/claro_"] { background-color: #ce2e29; background-image: url("../img/operadoras/claro.png"); }
body.app .main table img:is([src$="_on.png"], [src$="_off.png"])[src*="assets/img/entel_"] { background-color: #0082be; background-image: url("../img/operadoras/entel.png"); }
body.app .main table img:is([src$="_on.png"], [src$="_off.png"])[src*="assets/img/oi_"] { background-color: #ffcc00; background-image: url("../img/operadoras/oi.png"); }
body.app .main table img:is([src$="_on.png"], [src$="_off.png"])[src*="assets/img/tigo_"] { background-color: #00367f; background-image: url("../img/operadoras/tigo.png"); }
body.app .main table img:is([src$="_on.png"], [src$="_off.png"])[src*="assets/img/tim_"] { background-color: #004c97; background-image: url("../img/operadoras/tim.png"); }
body.app .main table img:is([src$="_on.png"], [src$="_off.png"])[src*="assets/img/vox_"] { background-color: #df2027; background-image: url("../img/operadoras/vox.png"); }
body.app .main table img:is([src$="_on.png"], [src$="_off.png"])[src*="assets/img/wom_"] { background-color: #3e1051; background-image: url("../img/operadoras/wom.png"); }

/* selo de status da linha (Ativo, Suspenso, Bloqueado...) na tabela de
   Simcards: mesma altura de 35px das caixas da coluna Info */
body.app [ng-controller="DashboardController"] #table td:nth-child(6) > .badge {
  display: inline-flex;
  align-items: center;
  height: 35px;
  padding: 0 12px;
  border-radius: 9px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .01em;
  margin: 2px 4px 2px 0;         /* estados combinados (ex.: Bloqueado + Ativo) */
  white-space: nowrap;
}

/* Info (8ª coluna) centralizada, título e conteúdo; Status fica à esquerda */
body.app [ng-controller="DashboardController"] #table :is(td, th):nth-child(8) { text-align: center; }

/* barra de consumo acima do plano (o Lara usa bg-danger e largura > 100%):
   barra cheia em vermelho e o texto do consumo em vermelho, em negrito */
body.app .main .table .progress > .progress-bar.bg-danger > span {
  color: var(--lx-red) !important;
  font-weight: 700;
}

/* --------------------------------------------------------------------------
   8c. Pedidos (#/orders): colunas Status e Documentos
   Status no Lara = ícones soltos com estilo inline (círculo verde de 30px,
   botão com ampulheta, avião, check, ícone roxo da NF). Viram selos de 35px:
   situação com ícone + texto (Pago, Aguardando, Postado, Entregue,
   Cancelado) e links de documento (Boleto, Nota Fiscal) como quadrados só
   com ícone (o nome vem no title, ao passar o mouse).
   -------------------------------------------------------------------------- */
body.app [ng-controller="OrderController"] #table td:has(> i[title="Pago"], > a[title="Aguardando pagamento"], > i.btn-delivery, > a[title="Nota Fiscal"], > small:only-child) {
  min-width: 230px;              /* a coluna do Lara é estreita: os selos empilhavam */
  white-space: normal;
}
/* selo com texto */
body.app [ng-controller="OrderController"] #table td > i[title="Pago"],
body.app [ng-controller="OrderController"] #table td > a[title="Aguardando pagamento"],
body.app [ng-controller="OrderController"] #table td > i.btn-delivery,
body.app [ng-controller="OrderController"] #table td > small:only-child {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 35px;
  margin: 2px 4px 2px 0;
  padding: 0 12px;
  border: 0;
  border-radius: 9px;
  font-size: 13px !important;        /* o HTML põe 25-30px inline nos ícones */
  line-height: 1.3;
  vertical-align: middle;
  white-space: nowrap;
}
body.app [ng-controller="OrderController"] #table td > i[title="Pago"]::after,
body.app [ng-controller="OrderController"] #table td > a[title="Aguardando pagamento"]::after,
body.app [ng-controller="OrderController"] #table td > i.btn-delivery::after {
  font-family: var(--lx-font);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .01em;
}
body.app [ng-controller="OrderController"] #table td > i[title="Pago"] { background: #e1f4ea; color: #146c43 !important; }
body.app [ng-controller="OrderController"] #table td > i[title="Pago"]::after { content: "Pago"; }
body.app [ng-controller="OrderController"] #table td > a[title="Aguardando pagamento"] { background: #fdf1d6 !important; color: #8a5a00 !important; cursor: help; }
body.app [ng-controller="OrderController"] #table td > a[title="Aguardando pagamento"] > i { color: inherit !important; font-size: 12px; }
body.app [ng-controller="OrderController"] #table td > a[title="Aguardando pagamento"]::after { content: "Aguardando"; }
body.app [ng-controller="OrderController"] #table td > i.btn-delivery { background: #e3eff8; color: #1a5b8a !important; margin-left: 0 !important; }
body.app [ng-controller="OrderController"] #table td > i.btn-delivery.fa-plane::after { content: "Postado"; }
body.app [ng-controller="OrderController"] #table td > i.btn-delivery.fa-check { background: #e1f4ea; color: #146c43 !important; }
body.app [ng-controller="OrderController"] #table td > i.btn-delivery.fa-check::after { content: "Entregue"; }
/* cancelado: o Lara mostra só o motivo, em <small> */
body.app [ng-controller="OrderController"] #table td > small:only-child {
  align-items: baseline;         /* motivo pode ter mais de uma linha: ícone fica na primeira */
  max-width: 230px;
  background: #fde6e6;
  color: #a8282d;
  font-size: 12px !important;
  font-weight: 600;
  white-space: normal;
  padding: 9px 12px;
}
body.app [ng-controller="OrderController"] #table td > small:only-child::before {
  content: "\f00d";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  font-size: 11px;
}
/* links de documento: quadrados 35x35 só com ícone */
body.app [ng-controller="OrderController"] #table td > a[title="Boleto"],
body.app [ng-controller="OrderController"] #table td > a[title="Nota Fiscal"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 35px;
  height: 35px;
  margin: 2px 4px 2px 0;
  padding: 0;
  border: 0;
  border-radius: 9px;
  vertical-align: middle;
  transition: filter .15s ease;
}
body.app [ng-controller="OrderController"] #table td > a[title="Boleto"] { background: #e4ecf2 !important; color: var(--lx-navy) !important; }
body.app [ng-controller="OrderController"] #table td > a[title="Nota Fiscal"] { background: #efe6f8; }
body.app [ng-controller="OrderController"] #table td > a[title="Nota Fiscal"] > i {
  margin: 0 !important;
  font-size: 15px !important;
  color: #6b3fa0 !important;
}
body.app [ng-controller="OrderController"] #table td > a[title="Boleto"]:hover,
body.app [ng-controller="OrderController"] #table td > a[title="Nota Fiscal"]:hover { filter: brightness(.94); }

/* Documentos: selos 35px (código + ✓); a legenda usa exatamente o mesmo desenho */
body.app [ng-controller="OrderController"] #table td > a.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 35px;
  margin: 2px 4px 2px 0;
  padding: 0 10px;
  border-radius: 9px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .02em;
  vertical-align: middle;
}
body.app [ng-controller="OrderController"] #table td > a.badge > i { font-size: 10px; opacity: .8; }
body.app [ng-controller="OrderController"] #table td:has(> a.badge) { min-width: 150px; }   /* dois documentos lado a lado */
body.app [ng-controller="OrderController"] #table td > a.badge:hover { filter: brightness(.95); }
body.app .main .alert.alert-info:has(> .row > [class*="col"] > .badge) .badge-success { background: #e1f4ea; color: #146c43; }
body.app .main .alert.alert-info:has(> .row > [class*="col"] > .badge) .badge-primary { background: #e4ecf2; color: var(--lx-navy); }
body.app .main .alert.alert-info:has(> .row > [class*="col"] > .badge) .badge {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 8px;
  border-radius: 7px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .02em;
}

/* selo da rede (2G/3G/4G) ao lado do logo: mesma caixa 35x35 */
body.app .main table img[src*="assets/img/"] ~ .badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 35px;
  height: 35px;
  margin-left: 6px;
  padding: 0;
  border-radius: 9px;
  background: #e3eef7;
  color: var(--lx-navy);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .02em;
  vertical-align: middle;
}
body.app .main table img[src*="assets/img/"] ~ .badge:empty { display: none; }   /* sem rede informada */
/* cor por tecnologia: o azul-clarinho de sempre no 4G, um tom mais apagado
   a cada geração abaixo (3G, 2G).
   Precisa da classe lx-rede-2g / lx-rede-3g / lx-rede-4g no selo, que o CSS
   não consegue deduzir do texto. Linha para a TI no render da coluna Info:
   ' <span class="badge badge-info lx-rede-' + getTecnology(t.connection).toLowerCase() + '">' */
body.app .main table img[src*="assets/img/"] ~ .badge.lx-rede-4g { background: #e3eff8; color: #1a5b8a; }
body.app .main table img[src*="assets/img/"] ~ .badge.lx-rede-3g { background: #ebf3fa; color: #3d6f97; }
body.app .main table img[src*="assets/img/"] ~ .badge.lx-rede-2g { background: #f3f7fb; color: #6a89a6; }
/* offline: o selo acompanha o cinza do logo */
body.app .main table img[src$="_off.png"] ~ .badge { filter: grayscale(1); opacity: .65; }
/* bandeira do país (roaming emnify) alinhada às caixas */
body.app .main table img[src*="assets/img/"] ~ .fi { margin-left: 6px; vertical-align: middle; border-radius: 3px; }

/* --------------------------------------------------------------------------
   9. Componentes
   -------------------------------------------------------------------------- */
/* selos: fundo suave + texto escuro, mesma cor de significado */
body.app .main .badge,
body.app .modal .badge {
  border-radius: var(--lx-r-sm);
  font-weight: 500;
  padding: .3em .55em;
  letter-spacing: .01em;
}
body.app .main .badge-success, body.app .modal .badge-success { background: #e1f4ea; color: #146c43; }
body.app .main .badge-info,    body.app .modal .badge-info    { background: #e3eff8; color: #1a5b8a; }
body.app .main .badge-primary, body.app .modal .badge-primary { background: #e4ecf2; color: var(--lx-navy); }
body.app .main .badge-warning, body.app .modal .badge-warning { background: #fdf1d6; color: #8a5a00; }
body.app .main .badge-danger,  body.app .modal .badge-danger  { background: #fde6e6; color: #a8282d; }
body.app .main .badge-secondary, body.app .modal .badge-secondary { background: #eef1f5; color: var(--lx-text-2); }
body.app .main .badge-dark,    body.app .modal .badge-dark    { background: var(--lx-navy); color: #fff; }
/* sobre fundo já tingido (legendas em alert), o selo volta a ser sólido */
body.app .alert .badge-info    { background: var(--lx-blue); color: #fff; }
body.app .alert .badge-primary { background: var(--lx-navy); color: #fff; }
body.app .alert .badge-success { background: var(--lx-green); color: #fff; }
/* selo dentro de card colorido continua legível */
body.app .card.text-white .badge { background: rgba(255, 255, 255, .2); color: #fff; }

body.app .alert {
  border: 1px solid transparent;
  border-radius: 10px;
}
body.app .alert-info    { background: #eef5fb; border-color: #d8e8f4; color: #1d4f73; }
body.app .alert-success { background: #eaf7f0; border-color: #cdebdb; color: #146c43; }
body.app .alert-warning { background: #fef6e3; border-color: #f8e3b0; color: #7a5100; }
body.app .alert-danger  { background: #fdeeee; border-color: #f6d3d3; color: #9b2226; }

body.app .progress {
  background: #edf0f4;
  border-radius: 999px;
}
body.app .progress-bar { border-radius: 999px; }

body.app .dropdown-menu {
  border: 1px solid var(--lx-line);
  border-radius: 10px;
  box-shadow: var(--lx-shadow-2);
  padding: 6px;
}
body.app .dropdown-item {
  border-bottom: 0;
  border-radius: var(--lx-r-sm);
  padding: .5rem .75rem;
  color: var(--lx-text);
}
body.app .dropdown-item i { color: var(--lx-icon); width: 1.1em; }
body.app .dropdown-item:hover,
body.app .dropdown-item:focus { background: var(--lx-surface-2); color: var(--lx-navy); }
body.app .dropdown-item:active { background: var(--lx-active-bg); color: var(--lx-navy); }
body.app .dropdown-header { border-radius: var(--lx-r-sm); }

body.app .modal-content {
  border: 0;
  border-radius: 14px;
  box-shadow: 0 24px 64px -16px rgba(10, 45, 66, .35);
}
body.app .modal-header {
  border-bottom: 1px solid var(--lx-line);
  border-radius: 14px 14px 0 0;
  padding: 1.1rem 1.5rem;
}
body.app .modal-title { font-weight: 500; color: var(--lx-navy); }
body.app .modal-header.bg-danger .modal-title,
body.app .modal-header[class*="bg-"] .modal-title,
body.app .modal-header[class*="bg-"] .close { color: #fff; }
body.app .modal-body { padding: 1.5rem; }
body.app .modal-footer { border-top: 1px solid var(--lx-line); padding: 1rem 1.5rem; }
body.app .modal-backdrop.show { opacity: .45; background: #0b1d2a; }

/* ---- Modais grandes viram gaveta lateral ----
   modal-lg e modal-xl (detalhes, visualizar, históricos) deslizam da direita,
   na altura toda da tela; só o corpo rola. O Bootstrap continua abrindo e
   fechando do mesmo jeito (ele só troca as classes .show/.fade); a animação
   de entrada e saída vem daqui. Modais pequenos (confirmações, avisos)
   continuam centralizados. */
body.app .modal:has(> .modal-dialog.modal-lg, > .modal-dialog.modal-xl) {
  overflow: hidden !important;        /* quem rola é o corpo da gaveta */
  padding-right: 0 !important;        /* o Bootstrap soma a largura da barra de rolagem */
}
body.app .modal > .modal-dialog:is(.modal-lg, .modal-xl) {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  margin: 0 !important;
  height: 100%;
  width: min(720px, 100vw) !important;
  max-width: none !important;          /* o HTML fixa max-width inline em alguns */
  display: flex;
  transform: translateX(100%);
  transition: transform .38s cubic-bezier(.2, .8, .2, 1);
}
body.app .modal > .modal-dialog.modal-xl { width: min(1140px, 92vw) !important; }
body.app .modal.show > .modal-dialog:is(.modal-lg, .modal-xl) { transform: none; }
body.app .modal > .modal-dialog:is(.modal-lg, .modal-xl) > .modal-content {
  height: 100%;
  width: 100%;
  border-radius: 18px 0 0 18px;
  box-shadow: -24px 0 60px -20px rgba(10, 45, 66, .35);
}
body.app .modal > .modal-dialog:is(.modal-lg, .modal-xl) .modal-header {
  flex: none;
  padding: 1.25rem 1.5rem;
  border-radius: 18px 0 0 0;
  background: var(--lx-surface);
}
body.app .modal > .modal-dialog:is(.modal-lg, .modal-xl) .modal-title { font-size: 1.15rem; }
body.app .modal > .modal-dialog:is(.modal-lg, .modal-xl) .modal-body {
  flex: 1 1 auto;
  max-height: none !important;         /* o HTML limita a 400px inline em alguns */
  overflow-y: auto;
  padding: 1.5rem;
}
body.app .modal > .modal-dialog:is(.modal-lg, .modal-xl) .modal-footer {
  flex: none;
  background: var(--lx-surface-2);
  border-radius: 0 0 0 18px;
}
/* ---- Modais pequenos: janela flutuante no centro ----
   Centro também na vertical (o padrão do Bootstrap gruda no topo), entrada
   em leve zoom em vez de cair de cima, cantos 16px, rodapé em faixa. */
body.app .modal > .modal-dialog:not(.modal-lg):not(.modal-xl) {
  display: flex;
  align-items: center;
  min-height: calc(100% - 3.5rem);
}
body.app .modal.fade > .modal-dialog:not(.modal-lg):not(.modal-xl) {
  transform: scale(.96) translateY(8px);
  opacity: 0;
  transition: transform .25s cubic-bezier(.2, .8, .2, 1), opacity .2s ease;
}
body.app .modal.show > .modal-dialog:not(.modal-lg):not(.modal-xl) { transform: none; opacity: 1; }
body.app .modal > .modal-dialog:not(.modal-lg):not(.modal-xl) > .modal-content {
  width: 100%;
  border-radius: 16px;
  overflow: hidden;
}
body.app .modal > .modal-dialog:not(.modal-lg):not(.modal-xl) .modal-header {
  border-radius: 16px 16px 0 0;
  padding: 1.25rem 1.5rem 1rem;
  border-bottom: 0;
}
body.app .modal > .modal-dialog:not(.modal-lg):not(.modal-xl) .modal-body { padding: .5rem 1.5rem 1.5rem; }
body.app .modal > .modal-dialog:not(.modal-lg):not(.modal-xl) .modal-footer {
  background: var(--lx-surface-2);
  border-top: 1px solid var(--lx-line);
  padding: .9rem 1.5rem;
}
@media (prefers-reduced-motion: reduce) {
  body.app .modal.fade > .modal-dialog:not(.modal-lg):not(.modal-xl) { transition: none; }
}

/* botão de fechar: alvo maior, redondo */
body.app .modal .modal-header .close {
  width: 36px;
  height: 36px;
  margin: -4px -6px -4px auto;
  padding: 0;
  border-radius: 50%;
  opacity: .6;
  font-size: 1.5rem;
  line-height: 1;
  transition: background-color .15s ease, opacity .15s ease;
}
body.app .modal .modal-header .close:hover { opacity: 1; background: var(--lx-surface-2); }
@media (prefers-reduced-motion: reduce) {
  body.app .modal > .modal-dialog:is(.modal-lg, .modal-xl) { transition: none; }
}

body.app .list-group-item { border-color: var(--lx-line); }
body.app .list-group-item:first-child { border-top-left-radius: 10px; border-top-right-radius: 10px; }
body.app .list-group-item:last-child  { border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; }
body.app .list-group-item.active { background: var(--lx-active-bg); border-color: var(--lx-active-line); color: var(--lx-navy); }

body.app .nav-tabs { border-bottom-color: var(--lx-line); }
body.app .nav-tabs .nav-link { border-radius: var(--lx-r) var(--lx-r) 0 0; color: var(--lx-muted); }
body.app .nav-tabs .nav-link.active { color: var(--lx-navy); font-weight: 500; border-color: var(--lx-line) var(--lx-line) var(--lx-surface); }
body.app .tab-content { border-color: var(--lx-line); border-radius: 0 0 var(--lx-r) var(--lx-r); }

/* --------------------------------------------------------------------------
   9b. Home: gráficos (Google Charts) e animações de entrada
   O Google desenha SVG com cor e fonte em atributo; CSS vale mais que
   atributo de SVG, então dá para trocar fonte, cor de texto, sombra e
   animar sem tocar no script. As fatias mantêm as cores originais
   (cada cor tem significado: verde = ativos, vermelho = cancelados).
   -------------------------------------------------------------------------- */
@keyframes lx-sobe {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
@keyframes lx-fatia {
  from { opacity: 0; transform: scale(.55); }
  60%  { opacity: 1; }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes lx-aparece { from { opacity: 0; } to { opacity: 1; } }
@keyframes lx-barra { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* O Google desenha o gráfico com a largura do card no momento do carregamento
   (608 px) e não redesenha quando a tela cresce: o desenho ficava preso à
   esquerda. Aqui ele centraliza na horizontal. Na vertical, o desenho ocupa
   y 23 a 234 de um SVG de 300 (medido): sobram 23 em cima e 66 embaixo.
   A altura de 300 do contêiner NÃO é mexida (o Google lê esse valor para
   desenhar). Em vez disso o card perde o padding de baixo e o contêiner
   recua 19 px: respiro final de 47 px em cima e embaixo. O fundo branco do
   SVG fica transparente para essa sobra não cobrir a borda do card. */
body.app #myChart > div > div[dir],
body.app #myChart2 > div > div[dir] {
  margin: 0 auto;
}
body.app .card-body:has(> #myChart),
body.app .card-body:has(> #myChart2) { padding-bottom: 0; }
body.app #myChart,
body.app #myChart2 { margin-bottom: -19px; }
body.app #myChart svg > rect:first-of-type,
body.app #myChart2 svg > rect:first-of-type { fill: transparent; }

/* Título do gráfico: o do Google é texto solto dentro do SVG ("Distruibuição",
   com erro de digitação no script). Ele fica invisível e o card ganha um
   cabeçalho em pílula com ícone, desenhado no CSS (::after = pílula com o
   texto, ::before = ícone dentro dela). Fica no canto onde o título estava,
   então o desenho do gráfico não se move. */
body.app #myChart svg > g:first-of-type text,
body.app #myChart2 svg > g:first-of-type text { visibility: hidden; }
body.app .card-body:has(> #myChart),
body.app .card-body:has(> #myChart2) { position: relative; }
body.app .card-body:has(> #myChart)::after,
body.app .card-body:has(> #myChart2)::after {
  position: absolute;
  top: 22px;
  left: 24px;
  z-index: 1;
  padding: 7px 16px 7px 42px;
  border-radius: 999px;
  background: #eef4f9;
  border: 1px solid #dbe7f1;
  color: var(--lx-navy);
  font-size: .9rem;
  font-weight: 500;
  line-height: 1.3;
  pointer-events: none;
}
body.app .card-body:has(> #myChart)::after  { content: "Distribuição dos SIM Cards"; }
body.app .card-body:has(> #myChart2)::after { content: "Distribuição por Operadora"; }
body.app .card-body:has(> #myChart)::before,
body.app .card-body:has(> #myChart2)::before {
  position: absolute;
  top: 26px;
  left: 28px;
  z-index: 2;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--lx-voxter) 0%, var(--lx-navy) 85%);
  color: #fff;
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  font-size: 12px;
  pointer-events: none;
}
body.app .card-body:has(> #myChart)::before  { content: "\f7c4"; }
body.app .card-body:has(> #myChart2)::before { content: "\f519"; }

/* texto dos gráficos na fonte e nas cores do Lara */
body.app .main svg text { font-family: var(--lx-font) !important; }
body.app #myChart svg > g:first-of-type text,
body.app #myChart2 svg > g:first-of-type text {
  fill: var(--lx-navy);
  font-size: 15px;
  font-weight: 500;
}
body.app .main svg text[fill="#0000ff"] { fill: var(--lx-navy); font-weight: 500; }
body.app .main svg text[fill="#9e9e9e"] { fill: var(--lx-muted); }
body.app .main svg path[stroke="#636363"] { stroke: var(--lx-line-strong); }

/* fatias: entram crescendo uma a uma; no hover a fatia sobe e acende */
body.app #myChart svg > g:has(> path),
body.app #myChart2 svg > g:has(> path) {
  transform-box: view-box;
  transform-origin: 50% 47%;
  animation: lx-fatia .75s cubic-bezier(.2, .8, .2, 1) both;
  transition: transform .25s cubic-bezier(.2, .8, .2, 1), filter .25s ease;
  filter: drop-shadow(0 6px 10px rgba(10, 45, 66, .12));
  cursor: pointer;
}
body.app #myChart svg > g:has(> path):nth-of-type(2),  body.app #myChart2 svg > g:has(> path):nth-of-type(2)  { animation-delay: .05s; }
body.app #myChart svg > g:has(> path):nth-of-type(3),  body.app #myChart2 svg > g:has(> path):nth-of-type(3)  { animation-delay: .15s; }
body.app #myChart svg > g:has(> path):nth-of-type(4),  body.app #myChart2 svg > g:has(> path):nth-of-type(4)  { animation-delay: .25s; }
body.app #myChart svg > g:has(> path):nth-of-type(5),  body.app #myChart2 svg > g:has(> path):nth-of-type(5)  { animation-delay: .35s; }
body.app #myChart svg > g:has(> path):nth-of-type(n+6), body.app #myChart2 svg > g:has(> path):nth-of-type(n+6) { animation-delay: .45s; }
body.app #myChart svg > g:has(> path):hover,
body.app #myChart2 svg > g:has(> path):hover {
  transform: translateY(-4px);
  filter: drop-shadow(0 10px 14px rgba(10, 45, 66, .22)) brightness(1.06);
}
/* rótulos e linhas-guia só aparecem depois que a pizza montou */
body.app #myChart svg > g:not(:has(> path)):not(:first-of-type),
body.app #myChart2 svg > g:not(:has(> path)):not(:first-of-type) {
  animation: lx-aparece .5s ease .55s both;
}

/* cards da Home entram em sequência */
body.app [ng-controller="HomeController"] .card {
  animation: lx-sobe .5s cubic-bezier(.2, .8, .2, 1) both;
  transition: box-shadow .2s ease, transform .2s ease;
}
body.app [ng-controller="HomeController"] .row > [class*="col-"]:nth-child(2) > .card { animation-delay: .06s; }
body.app [ng-controller="HomeController"] .row > [class*="col-"]:nth-child(3) > .card { animation-delay: .12s; }
body.app [ng-controller="HomeController"] .row > [class*="col-"]:nth-child(4) > .card { animation-delay: .18s; }
body.app [ng-controller="HomeController"] .row > [class*="col-"]:nth-child(n+5) > .card { animation-delay: .24s; }
body.app [ng-controller="HomeController"] .row .row > [class*="col-"] > .card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px -12px rgba(16, 24, 40, .25);
}
body.app [ng-controller="HomeController"] .card.text-white h1 { font-size: 2.75rem; }

/* Área Técnica: título, cards de operadora e barra de consumo */
body.app [ng-controller="HomeController"] p > strong { font-size: 1.05rem; font-weight: 500; color: var(--lx-navy); }
body.app [ng-controller="HomeController"] p > strong::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 10px;
  border-radius: 50%;
  background: var(--lx-voxter);
  vertical-align: middle;
  transform: translateY(-1px);
}
body.app [ng-controller="HomeController"] .card-title { font-weight: 500; color: var(--lx-navy); line-height: 1.5; }
body.app [ng-controller="HomeController"] .card-text { color: var(--lx-text-2); margin-bottom: .5rem; }
body.app [ng-controller="HomeController"] .progress {
  height: 10px;
  margin-top: 14px;
  overflow: visible;
  background: #edf0f4;
}
body.app [ng-controller="HomeController"] .progress-bar.text-dark {
  background: linear-gradient(90deg, var(--lx-blue), #3fa0e0);
}
body.app [ng-controller="HomeController"] .progress-bar {
  transform-origin: left center;
  animation: lx-barra 1s cubic-bezier(.2, .8, .2, 1) .3s both;
  min-width: 4px;
}
/* o "54 %" ficava espremido dentro da barra: passa a sair logo depois do fim dela
   (text-indent em % é relativo à largura da própria barra) */
body.app [ng-controller="HomeController"] .progress-bar.text-dark {
  overflow: visible;
  white-space: nowrap;
  text-align: left;
  text-indent: calc(100% + 8px);
  line-height: 10px;
  font-size: .75rem;
  font-weight: 500;
  color: var(--lx-text-2) !important;
}

@media (prefers-reduced-motion: reduce) {
  body.app *, body.app *::before, body.app *::after {
    animation-duration: .01ms !important;
    animation-delay: 0s !important;
    transition-duration: .01ms !important;
  }
}

/* --------------------------------------------------------------------------
   10. Detalhes
   -------------------------------------------------------------------------- */
body.app .pace .pace-progress { background: linear-gradient(90deg, var(--lx-voxter), var(--lx-blue)); }

body.app .btn:focus-visible,
body.app a:focus-visible { outline: 2px solid var(--lx-blue); outline-offset: 2px; }

body.app ::-webkit-scrollbar { width: 10px; height: 10px; }
body.app ::-webkit-scrollbar-track { background: transparent; }
body.app ::-webkit-scrollbar-thumb {
  background: #cfd6de;
  border-radius: 999px;
  border: 2px solid var(--lx-bg);
}
body.app ::-webkit-scrollbar-thumb:hover { background: #b4bec9; }


/* ==========================================================================
   AJUSTES — rodada 07/10 (tarde)
   ========================================================================== */

/* ---- Pedidos: Status só com ícone (quadrados 35x35, cor por situação).
   O nome aparece ao passar o mouse (title do próprio Lara). O cancelado
   continua com texto, porque o motivo só existe ali. ---- */
body.app [ng-controller="OrderController"] #table td > i[title="Pago"],
body.app [ng-controller="OrderController"] #table td > a[title="Aguardando pagamento"],
body.app [ng-controller="OrderController"] #table td > i.btn-delivery {
  justify-content: center;
  width: 35px;
  height: 35px;
  min-height: 35px;
  padding: 0;
  font-size: 15px !important;
  cursor: help;
}
body.app [ng-controller="OrderController"] #table td > i[title="Pago"]::after,
body.app [ng-controller="OrderController"] #table td > a[title="Aguardando pagamento"]::after,
body.app [ng-controller="OrderController"] #table td > i.btn-delivery::after { content: none !important; }
body.app [ng-controller="OrderController"] #table td > a[title="Aguardando pagamento"] > i { font-size: 14px; }
body.app [ng-controller="OrderController"] #table td > i.btn-delivery.fa-check { background: #dcf1ee; color: #11756b !important; }   /* Entregue: verde-azulado, diferente de Pago */
body.app [ng-controller="OrderController"] #table td:has(> i[title="Pago"], > a[title="Aguardando pagamento"], > i.btn-delivery, > a[title="Nota Fiscal"], > small:only-child) { min-width: 170px; }

/* ---- Botões dentro de tabelas: 35px, mesmo padrão das caixas ---- */
body.app .main .table .btn,
body.app .modal .table .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .35em;
  height: 35px;
  padding: 0 12px;
  font-size: 13px;
  line-height: 1;
  border-radius: 9px;
  vertical-align: middle;
}
body.app .main .table .btn-group > .btn { border-radius: 9px; }

/* ---- Simcards: uma cor pastel por status (identificação óbvia) ----
   Suspenso, Bloqueado e Cancelado usam a mesma classe no Lara (badge-danger),
   e Limite excedido / Aguardando reposição a mesma (badge-warning): o CSS não
   distingue pelo texto. Precisa da classe lx-st-<status>, que a TI acrescenta
   no render da coluna Status (ver LEIA-ME). Sem a classe, fica a cor atual. */
body.app .main .table .badge.lx-st-ativo      { background: #e1f4ea; color: #146c43; }
body.app .main .table .badge.lx-st-pre-ativo  { background: #eef1f5; color: #475467; }
body.app .main .table .badge.lx-st-suspenso   { background: #ffe7d6; color: #9a4a10; }
body.app .main .table .badge.lx-st-bloqueado  { background: #fde2e2; color: #a8282d; }
body.app .main .table .badge.lx-st-cancelado  { background: #f1e4ec; color: #7a2d55; }
body.app .main .table .badge.lx-st-limite     { background: #fdf3c4; color: #765800; }
body.app .main .table .badge.lx-st-reposicao  { background: #ebe6fb; color: #5b3fa6; }

/* ---- Barra do topo: telefone numa etiqueta, ícones em botões redondos ---- */
body.app .app-header .navbar-nav.ml-auto {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-right: 18px;
}
body.app .app-header a[href^="tel:"] {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  height: 35px;
  margin-right: 10px !important;
  padding: 0 14px;
  border: 1px solid var(--lx-line);
  border-radius: 9px;
  background: var(--lx-surface-2);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .01em;
  text-decoration: none;
  transition: background-color .15s ease, border-color .15s ease;
}
body.app .app-header a[href^="tel:"] > i { color: var(--lx-voxter); font-size: 12px; }
body.app .app-header a[href^="tel:"]:hover { background: var(--lx-active-bg); border-color: var(--lx-active-line); }
body.app .app-header .navbar-nav .nav-item .nav-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border-radius: 10px;
  font-size: 16px;
  transition: background-color .15s ease, color .15s ease;
}
body.app .app-header .navbar-nav .nav-item .nav-link:hover { background: var(--lx-surface-2); }
body.app .app-header .navbar-nav .nav-item .nav-link .navbar-badge {
  position: absolute;
  top: 1px;
  right: -2px;
  left: auto;
  margin: 0;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  box-shadow: 0 0 0 2px var(--lx-surface);
}
body.app .app-header .navbar-badge.badge-info    { background: var(--lx-blue); color: #fff; }
body.app .app-header .navbar-badge.badge-warning { background: var(--lx-amber); color: #2b1d00; }
body.app .app-header .navbar-badge.badge-danger  { background: var(--lx-voxter); color: #fff; }
/* usuário: círculo na cor do Lara, separado dos alertas */
body.app .app-header .navbar-nav .nav-item.dropdown { margin-left: 8px; padding-left: 12px; border-left: 1px solid var(--lx-line); }
body.app .app-header .navbar-nav .nav-item.dropdown > .nav-link {
  border-radius: 50%;
  background: var(--lx-navy);
  color: #fff !important;
  font-size: 14px;
}
body.app .app-header .navbar-nav .nav-item.dropdown > .nav-link:hover { background: var(--lx-navy-hover); }
body.app .app-header .dropdown-menu { margin-top: 8px; min-width: 200px; }

/* ---- Menu lateral: mais respiro e submenu como cartão ---- */
body.app .sidebar .sidebar-nav { padding-top: 10px; }
body.app.sidebar-minimized .sidebar .nav > .nav-item { margin: 3px 0; }
body.app.sidebar-minimized .sidebar .nav > .nav-item > .nav-link { padding-top: .72rem; padding-bottom: .72rem; }
body.app.sidebar-minimized .sidebar .nav-link.active::after {
  left: 7px;
  width: 36px;
  height: 36px;
  border-radius: 11px;
}
/* rótulo que abre no hover */
body.app.sidebar-minimized .sidebar .nav > .nav-item:hover > .nav-link {
  font-size: .875rem;
  font-weight: 600;
  color: var(--lx-navy) !important;
  border-radius: 0 12px 12px 0;
  box-shadow: 14px 10px 34px -10px rgba(10, 45, 66, .22), inset 0 0 0 1px var(--lx-line);
}
body.app.sidebar-minimized .sidebar .nav > .nav-item.nav-dropdown:hover > .nav-link {
  border-radius: 0 12px 0 0;
  box-shadow: 14px 0 34px -10px rgba(10, 45, 66, .22), inset 0 1px 0 var(--lx-line), inset -1px 0 0 var(--lx-line);
}
/* painel dos subitens: continua o rótulo, com subitens recuados e destaque suave */
body.app.sidebar-minimized .sidebar .nav > .nav-dropdown:hover > .nav-dropdown-items {
  width: 200px;
  padding: 6px 8px 8px;
  border: 1px solid var(--lx-line);
  border-top: 1px dashed var(--lx-line);
  border-radius: 0 0 12px 0;
  box-shadow: 14px 18px 34px -12px rgba(10, 45, 66, .22);
}
body.app.sidebar-minimized .sidebar .nav-dropdown-items .nav-item { width: auto; margin: 1px 0; }
body.app.sidebar-minimized .sidebar .nav-dropdown-items .nav-link {
  width: auto !important;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 8px;
  font-size: .8125rem;
  font-weight: 500;
  color: var(--lx-text-2) !important;
  white-space: nowrap;
  box-shadow: none !important;
}
body.app.sidebar-minimized .sidebar .nav-dropdown-items .nav-link .nav-icon {
  float: none;
  width: 18px;
  font-size: 13px;
  text-align: center;
  color: var(--lx-icon);
}
body.app.sidebar-minimized .sidebar .nav-dropdown-items .nav-link .nav-icon img { width: 16px !important; }
body.app.sidebar-minimized .sidebar .nav-dropdown-items .nav-link:hover { background: var(--lx-surface-2) !important; color: var(--lx-navy) !important; }
body.app.sidebar-minimized .sidebar .nav-dropdown-items .nav-link:hover .nav-icon { color: var(--lx-navy); }
body.app.sidebar-minimized .sidebar .nav-dropdown-items .nav-link.active { background: var(--lx-active-bg) !important; color: var(--lx-navy) !important; }
body.app.sidebar-minimized .sidebar .nav-dropdown-items .nav-link.active::after { display: none; }
body.app.sidebar-minimized .sidebar .nav-dropdown-items .nav-link.active .nav-icon { color: var(--lx-voxter); }

/* ---- Pedidos: Cancelado também só com ícone (✕ em quadrado 35x35).
   O Lara não põe o motivo num title, só como texto: o quadrado mostra o ✕
   e, ao passar o mouse, se abre mostrando o motivo. ---- */
body.app [ng-controller="OrderController"] #table td > small:only-child {
  justify-content: center;
  width: 35px;
  height: 35px;
  min-height: 35px;
  max-width: none;
  padding: 0;
  overflow: hidden;
  font-size: 0 !important;
  white-space: nowrap;
  cursor: help;
  transition: width .2s ease, box-shadow .2s ease;
}
body.app [ng-controller="OrderController"] #table td > small:only-child::before { font-size: 14px; }
body.app [ng-controller="OrderController"] #table td > small:only-child:hover {
  justify-content: flex-start;
  gap: 8px;
  width: auto;
  max-width: 280px;
  padding: 0 12px;
  font-size: 12px !important;
  white-space: normal;
  box-shadow: 0 8px 20px -10px rgba(168, 40, 45, .45);
}
body.app [ng-controller="OrderController"] #table td > small:only-child,
body.app [ng-controller="OrderController"] #table td > small:only-child:hover { align-items: center; }

/* --------------------------------------------------------------------------
   Calendário (bootstrap-datepicker, campos de data como "Período")
   -------------------------------------------------------------------------- */
body.app .datepicker-dropdown {
  padding: 10px;
  border: 1px solid var(--lx-line);
  border-radius: 14px;
  background: var(--lx-surface);
  box-shadow: 0 18px 40px -14px rgba(10, 45, 66, .28), 0 2px 6px rgba(10, 45, 66, .06);
  font-family: var(--lx-font);
  margin-top: 6px;
}
body.app .datepicker-dropdown::before,
body.app .datepicker-dropdown::after { display: none !important; }   /* setinha antiga */
body.app .datepicker table { border-collapse: separate; border-spacing: 2px; }
body.app .datepicker table tr td,
body.app .datepicker table tr th {
  width: 36px;
  height: 34px;
  border: 0;
  border-radius: 9px;
  font-size: 13px;
  text-shadow: none;
}
body.app .datepicker table tr th.dow {
  height: 28px;
  color: var(--lx-muted);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
}
body.app .datepicker .datepicker-switch {
  color: var(--lx-navy);
  font-weight: 600;
  font-size: 14px;
}
body.app .datepicker .prev,
body.app .datepicker .next { color: var(--lx-text-2); font-size: 16px; }
body.app .datepicker .datepicker-switch:hover,
body.app .datepicker .prev:hover,
body.app .datepicker .next:hover,
body.app .datepicker tfoot tr th:hover { background: var(--lx-surface-2) !important; }
body.app .datepicker table tr td.day { color: var(--lx-text); }
body.app .datepicker table tr td.day:hover,
body.app .datepicker table tr td.focused,
body.app .datepicker table tr td span:hover { background: var(--lx-active-bg) !important; color: var(--lx-navy); }
body.app .datepicker table tr td.old,
body.app .datepicker table tr td.new { color: #b4bcc8; }
body.app .datepicker table tr td.today,
body.app .datepicker table tr td.today:hover {
  background: transparent !important;
  background-image: none !important;
  color: var(--lx-voxter) !important;
  font-weight: 700;
  box-shadow: inset 0 0 0 1px rgba(209, 77, 82, .35);
}
body.app .datepicker table tr td.active,
body.app .datepicker table tr td.active:hover,
body.app .datepicker table tr td.active.highlighted,
body.app .datepicker table tr td span.active,
body.app .datepicker table tr td span.active:hover {
  background: var(--lx-navy) !important;
  background-image: none !important;
  border-color: var(--lx-navy) !important;
  color: #fff !important;
  font-weight: 600;
  text-shadow: none;
  box-shadow: none;
}
body.app .datepicker table tr td.range { background: var(--lx-active-bg) !important; border-radius: 0; }
body.app .datepicker table tr td.disabled,
body.app .datepicker table tr td.disabled:hover { color: #c6ccd5 !important; background: transparent !important; cursor: not-allowed; }
/* telas de mês/ano */
body.app .datepicker table tr td span {
  height: 44px;
  line-height: 44px;
  margin: 2px 1%;
  width: 31%;
  border-radius: 9px;
  font-size: 13px;
}
body.app .datepicker table tr td span.old,
body.app .datepicker table tr td span.new { color: #b4bcc8; }

/* Hambúrguer do topo: no desktop ele só escondia o menu (sem função clara).
   Some no desktop; o do mobile (o outro botão, data-toggle="sidebar-show")
   continua, porque lá é o único jeito de abrir o menu. */
body.app .app-header .navbar-toggler[data-toggle="sidebar-lg-show"] { display: none !important; }
/* ✕ do cancelado no centro exato: o texto invisível contava como item e o gap o deslocava */
body.app [ng-controller="OrderController"] #table td > small:only-child { gap: 0; line-height: 1; }
body.app [ng-controller="OrderController"] #table td > small:only-child::before { display: block; line-height: 1; }
body.app [ng-controller="OrderController"] #table td > small:only-child:hover { gap: 8px; line-height: 1.3; }
body.app [ng-controller="OrderController"] #table td > small:only-child::before { transform: translateY(1px); }   /* o glifo do Font Awesome fica 1px acima do centro */

/* ==========================================================================
   MENU LATERAL no padrão do Mapper (rodada 07/10, noite)
   - trilho de 60px, ícone 20px, item cresce no hover (como o Mapper)
   - ícones da mesma família do Mapper: Flaticon UIcons, traço fino
     arredondado (assets/fonts/uicons-thin-rounded.*), um por item
   - painel do hover com título (peso médio) e descrição curta
   - submenu com cada subitem num quadradinho de ícone
   ========================================================================== */
@font-face {
  font-family: "lx-uicons-tr";
  src: url("../fonts/uicons-thin-rounded.woff2") format("woff2"),
       url("../fonts/uicons-thin-rounded.woff") format("woff");
  font-display: block;
}

/* largura do trilho: 60px (Mapper: --sidebar-width 3.75rem) */
body.app.sidebar-minimized .sidebar,
body.app.sidebar-minimized .sidebar .sidebar-nav,
body.app.sidebar-minimized .sidebar .nav { width: 60px; }
body.app.sidebar-minimized .sidebar { flex: 0 0 60px; }
/* o menu do Lara fica no fluxo da página (sem sidebar-fixed): ele mesmo empurra o conteúdo,
   então a largura de 60px basta; margem no .main dobraria o espaço */
body.app.sidebar-minimized .sidebar .sidebar-minimizer { width: 60px; }
body.app.sidebar-minimized .sidebar .nav-link .nav-icon { width: 60px; font-size: 20px; }

/* item: 46px; no hover cresce para 72px e mostra título + descrição */
body.app.sidebar-minimized .sidebar .nav > .nav-item { margin: 2px 0; }
body.app.sidebar-minimized .sidebar .nav > .nav-item > .nav-link {
  display: grid;
  grid-template-columns: 60px 1fr;
  grid-template-rows: auto;
  align-content: center;
  height: 46px;
  padding: 0;
  transition: height .28s cubic-bezier(.4, 0, .2, 1);
}
body.app.sidebar-minimized .sidebar .nav > .nav-item > .nav-link > .nav-icon { grid-row: 1 / span 2; align-self: center; }
body.app.sidebar-minimized .sidebar .nav > .nav-item:hover,
body.app.sidebar-minimized .sidebar .nav > .nav-item:hover > .nav-link { width: 290px; }
body.app.sidebar-minimized .sidebar .nav > .nav-item:hover > .nav-link {
  height: 72px;
  font-size: .875rem;
  font-weight: 500;                      /* mais leve que antes (600) */
  line-height: 1.25;
  color: var(--lx-text) !important;
}
body.app.sidebar-minimized .sidebar .nav > .nav-item > .nav-link::before { display: none !important; }   /* seta do dropdown */
body.app.sidebar-minimized .sidebar .nav > .nav-item:hover > .nav-link::after {
  grid-column: 2;
  margin-top: 3px;
  color: var(--lx-muted);
  font-size: 12px;
  font-weight: 400;
  white-space: nowrap;
}
body.app.sidebar-minimized .sidebar .nav-link.active::after { left: 12px; }   /* quadrado ativo centrado nos 60px */
body.app.sidebar-minimized .sidebar .nav > .nav-item:hover > .nav-link.active::after { content: none; }

/* submenu: painel abaixo do rótulo, subitens com quadradinho de ícone */
body.app.sidebar-minimized .sidebar .nav > .nav-dropdown:hover > .nav-dropdown-items {
  left: 60px;
  width: 230px;
  padding: 8px;
}
body.app.sidebar-minimized .sidebar .nav-dropdown-items .nav-link {
  gap: 12px;
  padding: 6px 8px;
  font-weight: 400;
  font-size: .8125rem;
}
body.app.sidebar-minimized .sidebar .nav-dropdown-items .nav-link .nav-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: var(--lx-surface-2);
  font-size: 16px;
}
body.app.sidebar-minimized .sidebar .nav-dropdown-items .nav-link:hover { background: transparent !important; }
body.app.sidebar-minimized .sidebar .nav-dropdown-items .nav-link:hover .nav-icon { background: var(--lx-active-bg); color: var(--lx-navy); }
body.app.sidebar-minimized .sidebar .nav-dropdown-items .nav-link.active { background: transparent !important; font-weight: 500; }
body.app.sidebar-minimized .sidebar .nav-dropdown-items .nav-link.active .nav-icon { background: var(--lx-navy); color: #fff; }
body.app.sidebar-minimized .sidebar .nav-dropdown-items .nav-link .nav-icon:has(img) { -webkit-mask: none; mask: none; }

/* ícones (mesma família do Mapper) */
body.app .sidebar .nav-link > .nav-icon[class*="fa-"]::before {
  font-family: "lx-uicons-tr" !important;
  font-weight: 400 !important;
  font-style: normal;
}
body.app .sidebar .nav-link[href="#/"] > .nav-icon::before { content: "\ead3"; font-family: "lx-uicons-tr" !important; font-weight: 400 !important; }
body.app .sidebar .nav-link[href="#/dashboard"] > .nav-icon::before { content: "\f1c9"; font-family: "lx-uicons-tr" !important; font-weight: 400 !important; }
body.app .sidebar .nav-link[href="#/trackers/config"] > .nav-icon::before { content: "\f176"; font-family: "lx-uicons-tr" !important; font-weight: 400 !important; }
body.app .sidebar .nav-link[href="#/dashboard2"] > .nav-icon::before { content: "\eb10"; font-family: "lx-uicons-tr" !important; font-weight: 400 !important; }
body.app .sidebar .nav-link[href="#/simcards"] > .nav-icon::before { content: "\f163"; font-family: "lx-uicons-tr" !important; font-weight: 400 !important; }
body.app .sidebar .nav-link[href="#/simcards/exchange"] > .nav-icon::before { content: "\e12e"; font-family: "lx-uicons-tr" !important; font-weight: 400 !important; }
body.app .sidebar .nav-link[href="#/erbs"] > .nav-icon::before { content: "\f435"; font-family: "lx-uicons-tr" !important; font-weight: 400 !important; }
body.app .sidebar .nav > .nav-item.nav-dropdown:has(a[href="#/clients"]) > .nav-link > .nav-icon::before { content: "\e6e4"; font-family: "lx-uicons-tr" !important; font-weight: 400 !important; }
body.app .sidebar .nav-link[href="#/clients"] > .nav-icon::before { content: "\f4f9"; font-family: "lx-uicons-tr" !important; font-weight: 400 !important; }
body.app .sidebar .nav-link[href="#/users"] > .nav-icon::before { content: "\e147"; font-family: "lx-uicons-tr" !important; font-weight: 400 !important; }
body.app .sidebar .nav-link[href="#/users/admin"] > .nav-icon::before { content: "\f523"; font-family: "lx-uicons-tr" !important; font-weight: 400 !important; }
body.app .sidebar .nav-link[href="#/products"] > .nav-icon::before { content: "\e29b"; font-family: "lx-uicons-tr" !important; font-weight: 400 !important; }
body.app .sidebar .nav-link[href="#/resellers"] > .nav-icon::before { content: "\f151"; font-family: "lx-uicons-tr" !important; font-weight: 400 !important; }
body.app .sidebar .nav-link[href="#/import"] > .nav-icon::before { content: "\f4e9"; font-family: "lx-uicons-tr" !important; font-weight: 400 !important; }
body.app .sidebar .nav > .nav-item.nav-dropdown:has(a[href="#/orders"]) > .nav-link > .nav-icon::before { content: "\f196"; font-family: "lx-uicons-tr" !important; font-weight: 400 !important; }
body.app .sidebar .nav-link[href="#/orders"] > .nav-icon::before { content: "\f193"; font-family: "lx-uicons-tr" !important; font-weight: 400 !important; }
body.app .sidebar .nav-link[href="#/preorder"] > .nav-icon::before { content: "\e3d7"; font-family: "lx-uicons-tr" !important; font-weight: 400 !important; }
body.app .sidebar .nav-link[href="#/contracts"] > .nav-icon::before { content: "\e860"; font-family: "lx-uicons-tr" !important; font-weight: 400 !important; }
body.app .sidebar .nav-link[href="#/nfs"] > .nav-icon::before { content: "\e851"; font-family: "lx-uicons-tr" !important; font-weight: 400 !important; }
body.app .sidebar .nav > .nav-item.nav-dropdown:has(a[href="#/finances"]) > .nav-link > .nav-icon::before { content: "\f5b2"; font-family: "lx-uicons-tr" !important; font-weight: 400 !important; }
body.app .sidebar .nav-link[href="#/finances2"] > .nav-icon::before { content: "\f193"; font-family: "lx-uicons-tr" !important; font-weight: 400 !important; }
body.app .sidebar .nav-link[href="#/finances"] > .nav-icon::before { content: "\e850"; font-family: "lx-uicons-tr" !important; font-weight: 400 !important; }
body.app .sidebar .nav-link[href="#/bills"] > .nav-icon::before { content: "\ed4f"; font-family: "lx-uicons-tr" !important; font-weight: 400 !important; }
body.app .sidebar .nav-link[href="#/mapper/bills"] > .nav-icon::before { content: "\ec9d"; font-family: "lx-uicons-tr" !important; font-weight: 400 !important; }
body.app .sidebar .nav-link[href="#/block"] > .nav-icon::before { content: "\e196"; font-family: "lx-uicons-tr" !important; font-weight: 400 !important; }
body.app .sidebar .nav > .nav-item.nav-dropdown:has(a[href="#/reports/data"]) > .nav-link > .nav-icon::before { content: "\e40d"; font-family: "lx-uicons-tr" !important; font-weight: 400 !important; }
body.app .sidebar .nav-link[href="#/reports"] > .nav-icon::before { content: "\e41f"; font-family: "lx-uicons-tr" !important; font-weight: 400 !important; }
body.app .sidebar .nav-link[href="#/reports/data"] > .nav-icon::before { content: "\e647"; font-family: "lx-uicons-tr" !important; font-weight: 400 !important; }
body.app .sidebar .nav-link[href="#/reports/sales"] > .nav-icon::before { content: "\ea08"; font-family: "lx-uicons-tr" !important; font-weight: 400 !important; }
body.app .sidebar .nav-link[href="#/reports/sales/products"] > .nav-icon::before { content: "\e290"; font-family: "lx-uicons-tr" !important; font-weight: 400 !important; }
body.app .sidebar .nav-link[href="#/reports/sales/details"] > .nav-icon::before { content: "\e6ec"; font-family: "lx-uicons-tr" !important; font-weight: 400 !important; }
body.app .sidebar .nav-link[href="#/reports/sales_trackers"] > .nav-icon::before { content: "\ecac"; font-family: "lx-uicons-tr" !important; font-weight: 400 !important; }
body.app .sidebar .nav-link[href="#/reports/sales_orders"] > .nav-icon::before { content: "\f193"; font-family: "lx-uicons-tr" !important; font-weight: 400 !important; }
body.app .sidebar .nav-link[href="#/reports/activation"] > .nav-icon::before { content: "\e10f"; font-family: "lx-uicons-tr" !important; font-weight: 400 !important; }
body.app .sidebar .nav-link[href="#/reports/sales/monitoring"] > .nav-icon::before { content: "\e63a"; font-family: "lx-uicons-tr" !important; font-weight: 400 !important; }
body.app .sidebar .nav-link[href="#/reports/analysis_bills"] > .nav-icon::before { content: "\e411"; font-family: "lx-uicons-tr" !important; font-weight: 400 !important; }
body.app .sidebar .nav-link[href="#/reports/closing"] > .nav-icon::before { content: "\e362"; font-family: "lx-uicons-tr" !important; font-weight: 400 !important; }
body.app .sidebar .nav-link[href="#/simcards/sharing"] > .nav-icon::before { content: "\f16a"; font-family: "lx-uicons-tr" !important; font-weight: 400 !important; }
body.app .sidebar .nav-link[href="#/simcards/sharing/history"] > .nav-icon::before { content: "\f3fa"; font-family: "lx-uicons-tr" !important; font-weight: 400 !important; }
body.app .sidebar .nav-link[href="#/apn"] > .nav-icon::before { content: "\ed3c"; font-family: "lx-uicons-tr" !important; font-weight: 400 !important; }
body.app .sidebar .nav-link[href="#/support"] > .nav-icon::before { content: "\ea57"; font-family: "lx-uicons-tr" !important; font-weight: 400 !important; }
body.app .sidebar .nav-link[href="#/audit"] > .nav-icon::before { content: "\ece5"; font-family: "lx-uicons-tr" !important; font-weight: 400 !important; }
body.app .sidebar .nav-link[href="#/logs"] > .nav-icon::before { content: "\f043"; font-family: "lx-uicons-tr" !important; font-weight: 400 !important; }
body.app .sidebar .nav-link[href="#/online-users"] > .nav-icon::before { content: "\f554"; font-family: "lx-uicons-tr" !important; font-weight: 400 !important; }
body.app .sidebar .nav-link[href="#/faq"] > .nav-icon::before { content: "\eb32"; font-family: "lx-uicons-tr" !important; font-weight: 400 !important; }
body.app .sidebar .nav-link[href="#/monitoring"] > .nav-icon::before { content: "\f11f"; font-family: "lx-uicons-tr" !important; font-weight: 400 !important; }
body.app .sidebar .nav-link[href="#/campaigns"] > .nav-icon::before { content: "\ecd7"; font-family: "lx-uicons-tr" !important; font-weight: 400 !important; }
body.app .sidebar .nav-link[href="#/ideas"] > .nav-icon::before { content: "\e320"; font-family: "lx-uicons-tr" !important; font-weight: 400 !important; }
/* descrições do painel (texto proposto, editável) */
body.app.sidebar-minimized .sidebar .nav > .nav-item:hover > .nav-link[href="#/"]::after { content: "Visão geral"; }
body.app.sidebar-minimized .sidebar .nav > .nav-item:hover > .nav-link[href="#/dashboard"]::after { content: "Linhas, status e consumo"; }
body.app.sidebar-minimized .sidebar .nav > .nav-item.nav-dropdown:has(a[href="#/trackers"]):hover > .nav-link::after { content: "Equipamentos e Sentinela"; }
body.app.sidebar-minimized .sidebar .nav > .nav-item:hover > .nav-link[href="#/dashboard2"]::after { content: "Painel do plantão"; }
body.app.sidebar-minimized .sidebar .nav > .nav-item:hover > .nav-link[href="#/simcards"]::after { content: "Cadastro de SIM Cards"; }
body.app.sidebar-minimized .sidebar .nav > .nav-item:hover > .nav-link[href="#/simcards/exchange"]::after { content: "Trocas de linha"; }
body.app.sidebar-minimized .sidebar .nav > .nav-item:hover > .nav-link[href="#/erbs"]::after { content: "Mapa de antenas"; }
body.app.sidebar-minimized .sidebar .nav > .nav-item.nav-dropdown:has(a[href="#/clients"]):hover > .nav-link::after { content: "Clientes, usuários e produtos"; }
body.app.sidebar-minimized .sidebar .nav > .nav-item.nav-dropdown:has(a[href="#/orders"]):hover > .nav-link::after { content: "Pedidos e contratos"; }
body.app.sidebar-minimized .sidebar .nav > .nav-item.nav-dropdown:has(a[href="#/finances"]):hover > .nav-link::after { content: "Faturas e cobranças"; }
body.app.sidebar-minimized .sidebar .nav > .nav-item.nav-dropdown:has(a[href="#/reports/data"]):hover > .nav-link::after { content: "Dados, vendas e fechamento"; }
body.app.sidebar-minimized .sidebar .nav > .nav-item:hover > .nav-link[href="#/simcards/sharing"]::after { content: "Dados entre linhas"; }
body.app.sidebar-minimized .sidebar .nav > .nav-item:hover > .nav-link[href="#/simcards/sharing/history"]::after { content: "Movimentações de dados"; }
body.app.sidebar-minimized .sidebar .nav > .nav-item:hover > .nav-link[href="#/apn"]::after { content: "Configuração de APN"; }
body.app.sidebar-minimized .sidebar .nav > .nav-item:hover > .nav-link[href="#/support"]::after { content: "Chamados"; }
body.app.sidebar-minimized .sidebar .nav > .nav-item:hover > .nav-link[href="#/audit"]::after { content: "Registro de ações"; }
body.app.sidebar-minimized .sidebar .nav > .nav-item:hover > .nav-link[href="#/logs"]::after { content: "Acessos ao sistema"; }
body.app.sidebar-minimized .sidebar .nav > .nav-item:hover > .nav-link[href="#/online-users"]::after { content: "Quem está conectado"; }
body.app.sidebar-minimized .sidebar .nav > .nav-item:hover > .nav-link[href="#/faq"]::after { content: "Dúvidas frequentes"; }
body.app.sidebar-minimized .sidebar .nav > .nav-item:hover > .nav-link[href="#/monitoring"]::after { content: "Painel de monitoramento"; }
body.app.sidebar-minimized .sidebar .nav > .nav-item:hover > .nav-link[href="#/campaigns"]::after { content: "Envios por WhatsApp"; }
body.app.sidebar-minimized .sidebar .nav > .nav-item:hover > .nav-link[href="#/ideas"]::after { content: "Sugestões"; }

/* cabeçalho da página: o mesmo ícone do item no menu (mesma família) */
body.app .main .breadcrumb::before,
body.app [ng-controller="DashboardController"] > .container-fluid::after {
  font-family: "lx-uicons-tr" !important;
  font-weight: 400 !important;
  font-size: 20px;
}
body.app [ng-controller="HomeController"] { --lx-ico: "\ead3"; --lx-ico-font: "lx-uicons-tr"; --lx-ico-peso: 400; }
body.app [ng-controller="SimcardController"] { --lx-ico: "\f163"; --lx-ico-font: "lx-uicons-tr"; --lx-ico-peso: 400; }
body.app [ng-controller="SimcardsExchangeController"] { --lx-ico: "\e12e"; --lx-ico-font: "lx-uicons-tr"; --lx-ico-peso: 400; }
body.app [ng-controller="SimcardClientController"] { --lx-ico: "\f1c9"; --lx-ico-font: "lx-uicons-tr"; --lx-ico-peso: 400; }
body.app [ng-controller="SimcardSharingController"] { --lx-ico: "\f16a"; --lx-ico-font: "lx-uicons-tr"; --lx-ico-peso: 400; }
body.app [ng-controller="SimcardSharingHistoryController"] { --lx-ico: "\f3fa"; --lx-ico-font: "lx-uicons-tr"; --lx-ico-peso: 400; }
body.app [ng-controller="ErbsController"] { --lx-ico: "\f435"; --lx-ico-font: "lx-uicons-tr"; --lx-ico-peso: 400; }
body.app [ng-controller="ClientController"] { --lx-ico: "\f4f9"; --lx-ico-font: "lx-uicons-tr"; --lx-ico-peso: 400; }
body.app [ng-controller="UserController"] { --lx-ico: "\e147"; --lx-ico-font: "lx-uicons-tr"; --lx-ico-peso: 400; }
body.app [ng-controller="AdimUserController"] { --lx-ico: "\f523"; --lx-ico-font: "lx-uicons-tr"; --lx-ico-peso: 400; }
body.app [ng-controller="ProductController"] { --lx-ico: "\e29b"; --lx-ico-font: "lx-uicons-tr"; --lx-ico-peso: 400; }
body.app [ng-controller="ResellerController"] { --lx-ico: "\f151"; --lx-ico-font: "lx-uicons-tr"; --lx-ico-peso: 400; }
body.app [ng-controller="SellerClientController"] { --lx-ico: "\f151"; --lx-ico-font: "lx-uicons-tr"; --lx-ico-peso: 400; }
body.app [ng-controller="ImportController"] { --lx-ico: "\f4e9"; --lx-ico-font: "lx-uicons-tr"; --lx-ico-peso: 400; }
body.app [ng-controller="OrderController"] { --lx-ico: "\f193"; --lx-ico-font: "lx-uicons-tr"; --lx-ico-peso: 400; }
body.app [ng-controller="OrderInstallmentController"] { --lx-ico: "\f193"; --lx-ico-font: "lx-uicons-tr"; --lx-ico-peso: 400; }
body.app [ng-controller="PreOrderController"] { --lx-ico: "\e3d7"; --lx-ico-font: "lx-uicons-tr"; --lx-ico-peso: 400; }
body.app [ng-controller="OtherController"] { --lx-ico: "\f193"; --lx-ico-font: "lx-uicons-tr"; --lx-ico-peso: 400; }
body.app [ng-controller="ReportOrdersController"] { --lx-ico: "\f193"; --lx-ico-font: "lx-uicons-tr"; --lx-ico-peso: 400; }
body.app [ng-controller="ContractController"] { --lx-ico: "\e860"; --lx-ico-font: "lx-uicons-tr"; --lx-ico-peso: 400; }
body.app [ng-controller="ContractAccessController"] { --lx-ico: "\e860"; --lx-ico-font: "lx-uicons-tr"; --lx-ico-peso: 400; }
body.app [ng-controller="NFController"] { --lx-ico: "\e851"; --lx-ico-font: "lx-uicons-tr"; --lx-ico-peso: 400; }
body.app [ng-controller="NFAvulsaFormController"] { --lx-ico: "\e851"; --lx-ico-font: "lx-uicons-tr"; --lx-ico-peso: 400; }
body.app [ng-controller="FinanceController"] { --lx-ico: "\e850"; --lx-ico-font: "lx-uicons-tr"; --lx-ico-peso: 400; }
body.app [ng-controller="BillingController"] { --lx-ico: "\ed4f"; --lx-ico-font: "lx-uicons-tr"; --lx-ico-peso: 400; }
body.app [ng-controller="BillingErrorsController"] { --lx-ico: "\ed4f"; --lx-ico-font: "lx-uicons-tr"; --lx-ico-peso: 400; }
body.app [ng-controller="MapperBillingController"] { --lx-ico: "\ec9d"; --lx-ico-font: "lx-uicons-tr"; --lx-ico-peso: 400; }
body.app [ng-controller="MapperBillingEditController"] { --lx-ico: "\ec9d"; --lx-ico-font: "lx-uicons-tr"; --lx-ico-peso: 400; }
body.app [ng-controller="MapperAccessController"] { --lx-ico: "\ec9d"; --lx-ico-font: "lx-uicons-tr"; --lx-ico-peso: 400; }
body.app [ng-controller="BlockController"] { --lx-ico: "\e196"; --lx-ico-font: "lx-uicons-tr"; --lx-ico-peso: 400; }
body.app [ng-controller="ReportController"] { --lx-ico: "\e41f"; --lx-ico-font: "lx-uicons-tr"; --lx-ico-peso: 400; }
body.app [ng-controller="ReportDataController"] { --lx-ico: "\e647"; --lx-ico-font: "lx-uicons-tr"; --lx-ico-peso: 400; }
body.app [ng-controller="ReportSalesController"] { --lx-ico: "\ea08"; --lx-ico-font: "lx-uicons-tr"; --lx-ico-peso: 400; }
body.app [ng-controller="ReportProductsSalesController"] { --lx-ico: "\e290"; --lx-ico-font: "lx-uicons-tr"; --lx-ico-peso: 400; }
body.app [ng-controller="ReportSalesDetailsController"] { --lx-ico: "\e6ec"; --lx-ico-font: "lx-uicons-tr"; --lx-ico-peso: 400; }
body.app [ng-controller="ReportTrackerSalesController"] { --lx-ico: "\ecac"; --lx-ico-font: "lx-uicons-tr"; --lx-ico-peso: 400; }
body.app [ng-controller="ComissionController"] { --lx-ico: "\ea08"; --lx-ico-font: "lx-uicons-tr"; --lx-ico-peso: 400; }
body.app [ng-controller="ReportActivationController"] { --lx-ico: "\e10f"; --lx-ico-font: "lx-uicons-tr"; --lx-ico-peso: 400; }
body.app [ng-controller="ReportSalesMonitoringController"] { --lx-ico: "\e63a"; --lx-ico-font: "lx-uicons-tr"; --lx-ico-peso: 400; }
body.app [ng-controller="ReportBillAnalysisController"] { --lx-ico: "\e411"; --lx-ico-font: "lx-uicons-tr"; --lx-ico-peso: 400; }
body.app [ng-controller="ReportClosingController"] { --lx-ico: "\e362"; --lx-ico-font: "lx-uicons-tr"; --lx-ico-peso: 400; }
body.app [ng-controller="SupportController"] { --lx-ico: "\ea57"; --lx-ico-font: "lx-uicons-tr"; --lx-ico-peso: 400; }
body.app [ng-controller="SupportMessageController"] { --lx-ico: "\ea57"; --lx-ico-font: "lx-uicons-tr"; --lx-ico-peso: 400; }
body.app [ng-controller="AuditController"] { --lx-ico: "\ece5"; --lx-ico-font: "lx-uicons-tr"; --lx-ico-peso: 400; }
body.app [ng-controller="LogController"] { --lx-ico: "\f043"; --lx-ico-font: "lx-uicons-tr"; --lx-ico-peso: 400; }
body.app [ng-controller="OnlineUsersController"] { --lx-ico: "\f554"; --lx-ico-font: "lx-uicons-tr"; --lx-ico-peso: 400; }
body.app [ng-controller="FaqController"] { --lx-ico: "\eb32"; --lx-ico-font: "lx-uicons-tr"; --lx-ico-peso: 400; }
body.app [ng-controller="MonitoringController"] { --lx-ico: "\f11f"; --lx-ico-font: "lx-uicons-tr"; --lx-ico-peso: 400; }
body.app [ng-controller="CampaignController"] { --lx-ico: "\ecd7"; --lx-ico-font: "lx-uicons-tr"; --lx-ico-peso: 400; }
body.app [ng-controller="TrackerConfigController"] { --lx-ico: "\f176"; --lx-ico-font: "lx-uicons-tr"; --lx-ico-peso: 400; }
body.app [ng-controller="TrackerCommandController"] { --lx-ico: "\f176"; --lx-ico-font: "lx-uicons-tr"; --lx-ico-peso: 400; }
body.app [ng-controller="TrackerCommandLotController"] { --lx-ico: "\f176"; --lx-ico-font: "lx-uicons-tr"; --lx-ico-peso: 400; }
body.app [ng-controller="TrackerImportController"] { --lx-ico: "\f4e9"; --lx-ico-font: "lx-uicons-tr"; --lx-ico-peso: 400; }
body.app [ng-controller="TrackerLogsController"] { --lx-ico: "\f043"; --lx-ico-font: "lx-uicons-tr"; --lx-ico-peso: 400; }
body.app [ng-controller="DashboardController"] > .container-fluid::after { --lx-ico: "\f1c9"; }
/* Rastreadores: o ícone do menu (SVG do rastreador, em branco) */
body.app [ng-controller="TrackerController"] .breadcrumb::before {
  content: "";
  background: url("../img/icons_rastreador/ico_rastreador-branco.svg") no-repeat center / 22px 22px,
              linear-gradient(135deg, var(--lx-voxter) 0%, var(--lx-navy) 78%);
}


/* ==========================================================================
   7f. Formulários de cadastro e edição (Novo cliente, Novo simcard...)
   Mesmo padrão dos filtros: card branco, título encaixado na borda, campos
   de 46px. Radios viram seletor segmentado; checkbox vira chave liga/desliga;
   campo de arquivo vira área tracejada. Só aparência: nada muda no HTML.
   ========================================================================== */

/* formulário solto no fundo vira card (telas que não têm .card no HTML) */
body.app .main [ng-controller]:not([ng-controller="DashboardController"]) > .container-fluid:not(:has(.card)):has(.form-group) {
  width: auto;
  margin: 0 30px 30px;
  padding: 30px 28px 26px;
  background: var(--lx-surface);
  border: 1px solid var(--lx-line);
  border-radius: 14px;
  box-shadow: var(--lx-shadow-1);
}

/* título encaixado na borda em todo campo com rótulo (fora dos filtros, que já têm) */
body.app .main .form-group:has(> label:not(.form-check-label) + :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea)),
body.app .modal .form-group:has(> label:not(.form-check-label) + :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea)) {
  position: relative;
  margin-top: 8px;
  margin-bottom: 22px;
}
body.app .main .form-group:has(> label:not(.form-check-label) + :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea)) > label,
body.app .modal .form-group:has(> label:not(.form-check-label) + :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea)) > label {
  position: absolute;
  top: -8px;
  left: 10px;
  z-index: 3;
  max-width: calc(100% - 20px);
  margin: 0;
  padding: 0 6px;
  background: var(--lx-surface);
  border-radius: 4px;
  color: var(--lx-muted);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .06em;
  line-height: 16px;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
  transition: color .15s ease;
}
body.app .main .form-group:focus-within > label,
body.app .modal .form-group:focus-within > label { color: var(--lx-blue); }
/* altura padrão dos campos nos formulários */
body.app .main .form-group > .form-control:not(textarea):not([multiple]):not([size]),
body.app .main .form-group > .select2-container--default .select2-selection--single,
body.app .modal .form-group > .form-control:not(textarea):not([multiple]):not([size]) { height: 46px; }
body.app .main .form-group > .select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 44px; }
body.app .main .form-group > .select2-container--default .select2-selection--single .select2-selection__arrow { height: 44px; }
body.app .main .form-group > textarea.form-control { padding-top: 14px; min-height: 46px; }

/* checkbox: bloco do tamanho de um campo, rótulo à esquerda e chave à direita */
body.app .main .form-group:has(> input[type="checkbox"]) {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  height: 46px;
  margin-top: 8px;
  margin-bottom: 22px;
  padding: 0 14px;
  border: 1px solid var(--lx-line-strong);
  border-radius: var(--lx-r);
  background: var(--lx-surface);
}
body.app .main .form-group:has(> input[type="checkbox"]) > br { display: none; }
body.app .main .form-group:has(> input[type="checkbox"]) > label {
  margin: 0;
  color: var(--lx-text-2);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.25;
}
body.app .main .form-group > input[type="checkbox"],
body.app .main .form-check:not(.form-check-inline) > input[type="checkbox"].lx-switch {
  -webkit-appearance: none;
  appearance: none;
  position: relative;
  flex: none;
  width: 38px;
  height: 22px;
  margin: 0;
  border-radius: 999px;
  background: #cfd6de;
  cursor: pointer;
  transition: background-color .2s ease;
}
body.app .main .form-group > input[type="checkbox"]::before {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(16, 24, 40, .25);
  transition: transform .2s cubic-bezier(.2, .8, .2, 1);
}
body.app .main .form-group > input[type="checkbox"]:checked { background: var(--lx-navy); }
body.app .main .form-group > input[type="checkbox"]:checked::before { transform: translateX(16px); }
body.app .main .form-group > input[type="checkbox"]:focus-visible { outline: 0; box-shadow: var(--lx-ring); }
body.app .main .form-group > input[type="checkbox"]:disabled { opacity: .5; cursor: not-allowed; }

/* campo de arquivo: área tracejada com botão próprio */
body.app .main input[type="file"] {
  width: 100%;
  height: 46px;
  padding: 6px;
  border: 1px dashed var(--lx-line-strong);
  border-radius: var(--lx-r);
  background: var(--lx-surface-2);
  color: var(--lx-muted);
  font-size: 12px;
  cursor: pointer;
}
body.app .main input[type="file"]::file-selector-button {
  height: 32px;
  margin-right: 10px;
  padding: 0 12px;
  border: 0;
  border-radius: 6px;
  background: var(--lx-surface);
  box-shadow: inset 0 0 0 1px var(--lx-line-strong);
  color: var(--lx-navy);
  font-family: var(--lx-font);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
}
body.app .main input[type="file"]:hover::file-selector-button { background: var(--lx-active-bg); }
body.app .main .form-group:has(> input[type="file"]) { position: relative; margin-top: 8px; margin-bottom: 22px; }
body.app .main .form-group:has(> input[type="file"]) > label {
  position: absolute;
  top: -8px;
  left: 10px;
  z-index: 3;
  margin: 0;
  padding: 0 6px;
  background: var(--lx-surface);
  border-radius: 4px;
  color: var(--lx-muted);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .06em;
  line-height: 16px;
  text-transform: uppercase;
  white-space: nowrap;
}

/* botões dos formulários (Salvar, Voltar...): mesma altura dos campos */
body.app .main [ng-controller]:not([ng-controller="DashboardController"]) > .container-fluid:not(:has(.card)) .btn:not(.table .btn):not(.dropdown-item):not(.close) {
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4em;
  padding: .4rem 1.4rem;
}
body.app .main [ng-controller] > .container-fluid a:has(> .btn) { display: inline-block; text-decoration: none; }

/* formulários: campos alinhados pelo topo (a regra dos filtros alinha pela base) */
body.app .main [ng-controller]:not([ng-controller="DashboardController"]) > .container-fluid:not(:has(.card)) .row { align-items: flex-start !important; }
/* grupo de radios à esquerda (o HTML força justify-content-center com !important) */
body.app .main .row.justify-content-center:has(> :is(.col-form-label, [class*="col"]) > .form-check-inline > input[type="radio"]) { justify-content: flex-start !important; }
/* aviso "Carregando..." escondido (classe invisible) não ocupa espaço; quando o
   script tira a classe, ele aparece normalmente */
body.app .main .alert.invisible { display: none; }
/* rótulos longos na borda: espaçamento menor para caber mais antes de cortar */
body.app .main .form-group > label { letter-spacing: .04em; }

/* "Simcards" -> "SIM Cards" no item do menu: o texto original (nó solto no HTML)
   some com font-size 0 e o novo é desenhado no ::before do link. O resto do
   sistema ("Total de Simcards", títulos, botões) está no HTML: ver LEIA-ME. */
body.app .sidebar .nav-link[href="#/dashboard"] { font-size: 0 !important; }
body.app .sidebar .nav-link[href="#/dashboard"] > .nav-icon { grid-column: 1; }
body.app .sidebar .nav-link[href="#/dashboard"]::before {
  content: "SIM Cards" !important;
  display: inline !important;
  position: static !important;
  grid-column: 2;
  grid-row: 1;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  background: none !important;
  font-size: .875rem;
  transform: none !important;
}

/* formulários: botões de ação à direita, com o Salvar na ponta */
body.app .main [ng-controller]:not([ng-controller="DashboardController"]) > .container-fluid:not(:has(.card)) [class*="col"]:has(> .btn, > a > .btn, > button):not(:has(.form-group)) {
  display: flex;
  flex-direction: row-reverse;      /* Salvar vem antes no HTML: assim fica na ponta direita */
  justify-content: flex-start;
  align-items: center;
  gap: 10px;
}
body.app .main [ng-controller]:not([ng-controller="DashboardController"]) > .container-fluid:not(:has(.card)) [class*="col"]:has(> .row > [class*="col"] > .btn):not(:has(.form-group)) {
  margin-left: auto;                /* bloco Voltar | Salvar (Novo cliente) vai para a direita */
}
body.app.sidebar-minimized .sidebar .nav > .nav-item > .nav-link[href="#/dashboard"]::before,
body.app:not(.sidebar-minimized) .sidebar .nav > .nav-item > .nav-link[href="#/dashboard"]::before {
  content: "SIM Cards" !important;
  display: inline !important;
}
/* item ativo no hover: o ::after deixa de ser o quadrado de destaque e vira a descrição */
body.app.sidebar-minimized .sidebar .nav > .nav-item:hover > .nav-link.active::after {
  position: static;
  width: auto;
  height: auto;
  background: none;
  border: 0;
  border-radius: 0;
  transform: none;
}

/* Cliente (novo/editar): "Plataforma de Pagamento (Chips/Plataforma)" era cortado
   na borda e o que diferencia os dois sumia. Rótulo visível vira
   "Pagamento · Chips" / "Pagamento · Plataforma"; o texto original continua no
   HTML (font-size 0), e é o que o leitor de tela lê. */
body.app .main [ng-controller] > .container-fluid:not(:has(.card)) .form-group:has(> select[name="payment_method"]) > label,
body.app .main [ng-controller] > .container-fluid:not(:has(.card)) .form-group:has(> select[name="payment_method2"]) > label { font-size: 0 !important; }
body.app .main [ng-controller] > .container-fluid:not(:has(.card)) .form-group:has(> select[name="payment_method"]) > label::after,
body.app .main [ng-controller] > .container-fluid:not(:has(.card)) .form-group:has(> select[name="payment_method2"]) > label::after { font-size: 10.5px; }
body.app .main [ng-controller] > .container-fluid:not(:has(.card)) .form-group:has(> select[name="payment_method"]) > label::after  { content: "Pagamento · Chips"; }
body.app .main [ng-controller] > .container-fluid:not(:has(.card)) .form-group:has(> select[name="payment_method2"]) > label::after { content: "Pagamento · Plataforma"; }
body.app .main [ng-controller] > .container-fluid:not(:has(.card)) .form-group:has(> select[name="payment_method"]) > label::after,
body.app .main [ng-controller] > .container-fluid:not(:has(.card)) .form-group:has(> select[name="payment_method2"]) > label::after { font-size: 13px; font-weight: 500; letter-spacing: .06em; }
body.app .main [ng-controller] > .container-fluid:not(:has(.card)) .form-group:has(> select[name="payment_method"]) > label::after,
body.app .main [ng-controller] > .container-fluid:not(:has(.card)) .form-group:has(> select[name="payment_method2"]) > label::after { font-size: 10.5px; font-weight: 600; letter-spacing: .06em; white-space: nowrap; }

/* Topo: ícones na mesma família do menu (traço fino do Mapper) */
body.app .app-header .navbar-nav i[class*="fa-"]::before {
  font-family: "lx-uicons-tr" !important;
  font-weight: 400 !important;
  font-style: normal;
}
body.app .app-header .navbar-nav .nav-item .nav-link > i { font-size: 18px; line-height: 1; display: inline-flex; }
body.app .app-header .navbar-nav .nav-item.dropdown > .nav-link > i { font-size: 16px; }
body.app .app-header a[href^="tel:"] > i { font-size: 14px; line-height: 1; display: inline-flex; }
body.app .app-header .dropdown-menu .dropdown-item > i::before { font-family: "lx-uicons-tr" !important; font-weight: 400 !important; }
body.app .app-header i.fa-bell::before { content: "\e1da"; }   /* bell */
body.app .app-header i.fa-money-bill::before { content: "\ed4f"; }   /* money-bill-wave */
body.app .app-header i.fa-exchange-alt::before { content: "\e12e"; }   /* arrows-repeat */
body.app .app-header i.fa-user::before { content: "\f4f9"; }   /* user */
body.app .app-header i.fa-phone::before { content: "\ef14"; }   /* phone-call */
body.app .app-header .dropdown-menu i.fa-lock::before { content: "\f1b3"; }   /* sign-out-alt */
body.app .app-header .navbar-nav .nav-item .nav-link > i { font-size: 19px; color: var(--lx-text-2); }
body.app .app-header .navbar-nav .nav-item .nav-link:hover > i { color: var(--lx-navy); }
body.app .app-header .navbar-nav .nav-item.dropdown > .nav-link > i { color: #fff; }
body.app .app-header .navbar-nav .nav-item .nav-link .navbar-badge {
  top: -3px;
  right: -7px;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  font-size: 9.5px;
}
/* SIM Cards: o texto original (invisível) cria uma 3ª linha na grade do item;
   o ícone passa a ocupar as três para ficar centralizado com título e descrição */
body.app.sidebar-minimized .sidebar .nav > .nav-item > .nav-link[href="#/dashboard"] > .nav-icon { grid-row: 1 / span 3; }

/* ==========================================================================
   TOPO, proposta A2 (escolhida): linha de status sem caixas.
   Telefone em duas linhas ("SAC e Vendas" + número); cada alerta com ícone e
   número em cor, lado a lado; filetes finos separam os grupos e a conta.
   ========================================================================== */
body.app .app-header .navbar-nav.ml-auto { gap: 0; margin-right: 18px; }
body.app .app-header .navbar-nav a[href^="tel:"] {
  display: block !important;
  position: relative;
  height: auto;
  margin-right: 22px !important;
  padding: 0 0 0 44px !important;
  border: 0 !important;
  background: none !important;
  color: var(--lx-navy) !important;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .01em;
  line-height: 1.15;
}
body.app .app-header .navbar-nav a[href^="tel:"] > i {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #fbe9ea;
  color: var(--lx-voxter);
  font-size: 15px;
}
body.app .app-header .navbar-nav a[href^="tel:"]::before {
  content: "SAC e Vendas";
  display: block;
  margin-bottom: 3px;
  color: #a3acb8;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .04em;
  line-height: 1;
  text-transform: uppercase;
}
body.app .app-header .navbar-nav a[href^="tel:"]:hover { color: var(--lx-voxter) !important; background: none !important; }

body.app .app-header .navbar-nav .nav-item:not(.dropdown) { border-left: 1px solid var(--lx-line); }
body.app .app-header .navbar-nav .nav-item:not(.dropdown) .nav-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: auto;
  height: 40px;
  padding: 0 18px;
  border-radius: 0;
  background: none !important;
}
body.app .app-header .navbar-nav .nav-item:not(.dropdown) .nav-link > i { font-size: 20px; color: #667085; }
body.app .app-header .navbar-nav .nav-item:not(.dropdown) .nav-link:hover > i { color: var(--lx-navy); }
body.app .app-header .navbar-nav .nav-item:not(.dropdown) .nav-link .navbar-badge {
  position: static;
  display: inline;
  min-width: 0;
  height: auto;
  margin: 0;
  padding: 0;
  background: none !important;
  box-shadow: none;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.1;
}
body.app .app-header .navbar-nav .nav-item:not(.dropdown) .navbar-badge.badge-info    { color: var(--lx-blue) !important; }
body.app .app-header .navbar-nav .nav-item:not(.dropdown) .navbar-badge.badge-warning { color: #b7790e !important; }
body.app .app-header .navbar-nav .nav-item:not(.dropdown) .navbar-badge.badge-danger  { color: var(--lx-voxter) !important; }
body.app .app-header .navbar-nav .nav-item.dropdown { margin-left: 0; padding-left: 16px; border-left: 1px solid var(--lx-line); }
body.app .app-header .navbar-nav .nav-item.dropdown > .nav-link { width: 40px; height: 40px; }

/* Rastreadores: ícone redesenhado em traço (mesmo estilo dos demais ícones).
   Menu e submenu usam como máscara (pega a cor do estado); o cabeçalho usa a
   versão branca. Arquivos: assets/img/icons_rastreador/ico_rastreador-linha*.svg */
body.app .sidebar .nav-icon:has(> img[src*="ico_rastreador"]) {
  -webkit-mask-image: url("../img/icons_rastreador/ico_rastreador-linha.svg");
          mask-image: url("../img/icons_rastreador/ico_rastreador-linha.svg");
  -webkit-mask-size: 21px 21px;
          mask-size: 21px 21px;
}
body.app.sidebar-minimized .sidebar .nav-dropdown-items .nav-link .nav-icon:has(> img[src*="ico_rastreador"]) {
  -webkit-mask: none;
          mask: none;
  background: var(--lx-surface-2) url("../img/icons_rastreador/ico_rastreador-linha.svg") no-repeat center / 17px 17px;
}
body.app.sidebar-minimized .sidebar .nav-dropdown-items .nav-link:hover .nav-icon:has(> img[src*="ico_rastreador"]) { background-color: var(--lx-active-bg); }
body.app [ng-controller="TrackerController"] .breadcrumb::before {
  background: url("../img/icons_rastreador/ico_rastreador-linha-branco.svg") no-repeat center / 22px 22px,
              linear-gradient(135deg, var(--lx-voxter) 0%, var(--lx-navy) 78%);
}
/* rastreador em traço um pouco maior: o desenho é inclinado e parecia menor que os vizinhos */
body.app .sidebar .nav-icon:has(> img[src*="ico_rastreador"]) { -webkit-mask-size: 25px 25px; mask-size: 25px 25px; }
body.app.sidebar-minimized .sidebar .nav-dropdown-items .nav-link .nav-icon:has(> img[src*="ico_rastreador"]) { background-size: 20px 20px; }
body.app [ng-controller="TrackerController"] .breadcrumb::before { background-size: 25px 25px, auto; }

/* botões dentro de modais (ex.: Código de Rastreamento): mesma altura de 46px dos demais */
body.app .modal .btn:not(.close):not(.table .btn):not(.dropdown-item):not(.btn-sm) {
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4em;
  padding: .4rem 1.4rem;
  font-size: .875rem;
  border-radius: var(--lx-r);
}
body.app .modal .btn-block:not(.close) { display: flex; width: 100%; }
/* histórico de rastreamento vazio (sem eventos e sem "carregando") não desenha a borda solta;
   quando o Lara preenche a lista, o card volta a aparecer */
body.app .modal #tracking-history:not(:has(li)):has(#loading-tracking:empty) { display: none; }

/* ==========================================================================
   Barra de rolagem (WebKit: Chrome/Edge/Safari; Firefox via scrollbar-*)
   ========================================================================== */
html { scrollbar-width: thin; scrollbar-color: #c9d1da transparent; }      /* Firefox */
body.app ::-webkit-scrollbar { width: 10px; height: 10px; }
body.app ::-webkit-scrollbar-track { background: transparent; }
body.app ::-webkit-scrollbar-corner { background: transparent; }
body.app ::-webkit-scrollbar-thumb {
  background-color: #c9d1da;
  border: 3px solid transparent;          /* "respiro" em volta: a barra parece flutuar */
  border-radius: 999px;
  background-clip: content-box;
  min-height: 40px;
}
body.app ::-webkit-scrollbar-thumb:hover { background-color: #98a2b3; }
body.app ::-webkit-scrollbar-thumb:active { background-color: var(--lx-navy); }
body.app ::-webkit-scrollbar-button { display: none; width: 0; height: 0; }   /* sem setinhas */

/* áreas que rolam por dentro: barra mais fina */
body.app :is(.select2-results__options, .dropdown-menu, .modal-body, .datepicker, .sidebar-nav, .table-responsive, .dataTables_scrollBody)::-webkit-scrollbar { width: 8px; height: 8px; }
body.app :is(.select2-results__options, .dropdown-menu, .modal-body, .datepicker, .sidebar-nav, .table-responsive, .dataTables_scrollBody)::-webkit-scrollbar-thumb { border-width: 2px; }
body.app :is(.select2-results__options, .dropdown-menu, .modal-body, .datepicker, .sidebar-nav, .table-responsive, .dataTables_scrollBody) { scrollbar-width: thin; }

/* Barra que "engorda" com o mouse em cima (só CSS): a barra reserva 14px, mas o
   cursor tem borda transparente grossa e aparece fino (6px); com o mouse sobre
   ele, a borda diminui e ele passa a 10px. O Chrome não anima barras de rolagem,
   então a troca é instantânea. */
body.app ::-webkit-scrollbar { width: 14px; height: 14px; }
body.app ::-webkit-scrollbar-thumb { border: 4px solid transparent; }
body.app ::-webkit-scrollbar-thumb:hover { border-width: 2px; background-color: #98a2b3; }
body.app ::-webkit-scrollbar-thumb:active { border-width: 2px; background-color: var(--lx-navy); }
/* áreas internas: 10px reservados, cursor de 4px que vai a 8px */
body.app :is(.select2-results__options, .dropdown-menu, .modal-body, .datepicker, .sidebar-nav, .table-responsive, .dataTables_scrollBody)::-webkit-scrollbar { width: 10px; height: 10px; }
body.app :is(.select2-results__options, .dropdown-menu, .modal-body, .datepicker, .sidebar-nav, .table-responsive, .dataTables_scrollBody)::-webkit-scrollbar-thumb { border-width: 3px; }
body.app :is(.select2-results__options, .dropdown-menu, .modal-body, .datepicker, .sidebar-nav, .table-responsive, .dataTables_scrollBody)::-webkit-scrollbar-thumb:hover { border-width: 1px; }

/* --------------------------------------------------------------------------
   Campos de data: os dois tipos do Lara com a mesma cara
   - type="date" (calendário nativo do navegador: a janela é do Chrome, o CSS
     não alcança; aqui só o campo e o ícone)
   - class="datepicker" (calendário do Lara, já estilizado acima)
   Mesmo ícone de calendário em traço fino à direita nos dois.
   -------------------------------------------------------------------------- */
body.app input[type="date"]::-webkit-calendar-picker-indicator {
  width: 18px;
  height: 18px;
  padding: 0;
  margin: 0;
  background: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23667085' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='5' width='17' height='15.5' rx='3'/%3E%3Cpath d='M3.5 10h17M8 3v4M16 3v4'/%3E%3Ccircle cx='8.5' cy='14.5' r='.6' fill='%23667085'/%3E%3Ccircle cx='12' cy='14.5' r='.6' fill='%23667085'/%3E%3Ccircle cx='15.5' cy='14.5' r='.6' fill='%23667085'/%3E%3C/svg%3E") no-repeat center / 18px 18px;
  opacity: .85;
  cursor: pointer;
}
body.app input[type="date"]::-webkit-calendar-picker-indicator:hover { opacity: 1; }
body.app input[type="date"]:invalid::-webkit-datetime-edit,
body.app input[type="date"]:not(:focus):in-range::-webkit-datetime-edit-day-field:placeholder-shown { color: #a0a9b6; }
body.app input[type="date"]::-webkit-datetime-edit-fields-wrapper { padding: 0; }
body.app input[type="date"]::-webkit-datetime-edit-text { color: #a0a9b6; padding: 0 2px; }
/* calendário do Lara: mesmo ícone dentro do campo */
body.app input.datepicker {
  padding-right: 2.4rem !important;
  background: var(--lx-surface) url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23667085' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='5' width='17' height='15.5' rx='3'/%3E%3Cpath d='M3.5 10h17M8 3v4M16 3v4'/%3E%3Ccircle cx='8.5' cy='14.5' r='.6' fill='%23667085'/%3E%3Ccircle cx='12' cy='14.5' r='.6' fill='%23667085'/%3E%3Ccircle cx='15.5' cy='14.5' r='.6' fill='%23667085'/%3E%3C/svg%3E") no-repeat right .75rem center / 18px 18px !important;
  cursor: pointer;
}

/* Documentação J16 (ação no cabeçalho de Rastreadores): fica compacta; a regra
   de 46px dos botões de formulário não vale para ela */
body.app [ng-controller="TrackerController"] .card-body > .float-right .btn {
  min-height: 34px !important;
  height: 34px;
  padding: 0 .9rem !important;
  font-size: .8125rem;
  font-weight: 500;
  gap: .45em;
}
body.app [ng-controller="TrackerController"] .card-body > .float-right { top: -81px; right: 21px; }   /* centro da faixa de 76px */
/* botões de criar no topo das listas (Novo Usuário, Novo Contrato...): 46px, como os demais */
body.app .main .card-body > .text-right .btn,
body.app .main .btn-create:not(.table .btn) {
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4em;
  padding: .4rem 1.4rem;
}
/* J16: no modo ao vivo o texto ficava no topo do botão; centraliza nas duas direções */
body.app [ng-controller="TrackerController"] .card-body > .float-right .btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  white-space: nowrap;
}
body.app [ng-controller="TrackerController"] .card-body > .float-right .btn > i { font-size: 13px; }

/* filtros: o form-group (quando existe) não traz a margem dos formulários; o espaço vem da linha */
body.app .main .row:not(.modal .row):not([class*="col"] .row):not(form .row):not([ng-controller="SimcardSharingController"] .row):has(> [class*="col"] > label, > [class*="col"] > .form-group > label):has(> [class*="col"] > .btn, > [class*="col"] > .btn-group, > [class*="col"] > a > .btn, > [class*="col"] > a.btn, + .row > [class*="col"] > .btn, + .row > [class*="col"] > .btn-group, + .row > [class*="col"] > a > .btn, + .row > [class*="col"] > a.btn) .form-group { margin-top: 0 !important; margin-bottom: 0 !important; }
/* coluna que é ela mesma form-group (Produto, Modalidade em Pedidos): mantém o espaço de 26px das outras */
body.app .main .row:not(.modal .row):not([class*="col"] .row):not(form .row):not([ng-controller="SimcardSharingController"] .row):has(> [class*="col"] > label, > [class*="col"] > .form-group > label):has(> [class*="col"] > .btn, > [class*="col"] > .btn-group, > [class*="col"] > a > .btn, > [class*="col"] > a.btn, + .row > [class*="col"] > .btn, + .row > [class*="col"] > .btn-group, + .row > [class*="col"] > a > .btn, + .row > [class*="col"] > a.btn) > [class*="col"].form-group { margin-bottom: 26px !important; }

/* coluna com duas datas ("Período: x até y") ocupa sempre 2 colunas do filtro,
   mesmo quando o HTML a marca como estreita em tela grande (col-lg-3): senão
   o "Data inicial" era cortado (Cadastro de SIM Cards) */
body.app .main .row:not(.modal .row):not([class*="col"] .row):not(form .row):not([ng-controller="SimcardSharingController"] .row):has(> [class*="col"] > label, > [class*="col"] > .form-group > label):has(> [class*="col"] > .btn, > [class*="col"] > .btn-group, > [class*="col"] > a > .btn, > [class*="col"] > a.btn, + .row > [class*="col"] > .btn, + .row > [class*="col"] > .btn-group, + .row > [class*="col"] > a > .btn, + .row > [class*="col"] > a.btn) > [class*="col"]:not(:has(> .btn, > .btn-group, > a > .btn, > a.btn)):has(input ~ input) {
  flex: 2 1 calc(var(--lx-cel) * 2 + 20px);
}

/* ---- Visualizar Pedido (gaveta): cesta e totais ---- */
body.app #modal_view_order .modal-body .card { border: 0; box-shadow: none; background: transparent; }
body.app #modal_view_order .modal-body .card > .card-body { padding: 4px 0 0; }
body.app #modal_view_order .modal-body .card > .card-body > h4 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 4px;
  text-align: left !important;
  color: var(--lx-navy);
  font-size: 15px;
  font-weight: 600;
}
body.app #modal_view_order .modal-body .card > .card-body > h4 > i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: #fbe9ea;
  color: var(--lx-voxter);
  font-size: 14px;
}
/* itens da cesta: cartões, produto em destaque */
body.app #modal_view_order .list-group { gap: 8px; }
body.app #modal_view_order .list-group-item {
  border: 1px solid var(--lx-line) !important;
  border-radius: 10px !important;
  padding: 12px 16px;
  color: var(--lx-text-2);
  font-size: 13px;
}
body.app #modal_view_order .list-group-item > .row { align-items: center; row-gap: 6px; }
body.app #modal_view_order .list-group-item > .row > [class*="col"]:first-child { color: var(--lx-text); font-weight: 500; font-size: 14px; }
/* totais: painel à direita; Valor Total em destaque */
body.app #modal_view_order .card-body > .text-right {
  width: min(360px, 100%);
  margin-left: auto;
  padding: 0 18px;
  background: var(--lx-surface-2);
}
body.app #modal_view_order .card-body > .text-right.mt-2 {
  margin-top: 18px !important;
  padding-top: 14px;
  border-radius: 12px 12px 0 0;
}
body.app #modal_view_order .card-body > .text-right:last-child {
  padding-bottom: 14px;
  border-radius: 0 0 12px 12px;
}
body.app #modal_view_order .card-body > .text-right > h5 {
  margin: 0;
  padding: 4px 0;
  color: var(--lx-text-2);
  font-size: 13px;
  font-weight: 500;
}
body.app #modal_view_order .card-body > .text-right > h4 {
  margin: 8px 0 0;
  padding-top: 10px;
  border-top: 1px dashed var(--lx-line-strong);
  color: var(--lx-navy);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -.01em;
}
/* o margin do h4 vazava para fora do painel (faixa branca entre Desconto e Total) */
body.app #modal_view_order .card-body > .text-right:last-child { padding-top: 8px; }
body.app #modal_view_order .card-body > .text-right > h4 { margin-top: 0; }

/* Sentinela (#/trackers/config): não tem título no HTML. Faixa de cabeçalho
   desenhada no container, igual às outras telas; o resto da página mantém o
   estilo próprio. Ícone: o mesmo do menu (escudo). */
body.app [ng-controller="TrackerConfigController"] > .container-fluid { position: relative; }
body.app [ng-controller="TrackerConfigController"] > .container-fluid::before {
  content: "Sentinela";
  display: flex;
  align-items: center;
  margin: 24px 0 8px;
  padding: 16px 20px 16px 80px;
  min-height: 76px;
  background-color: var(--lx-surface);
  background-image:
    radial-gradient(60% 140% at 100% 0%, rgba(209, 77, 82, .07) 0%, rgba(209, 77, 82, 0) 70%),
    radial-gradient(110% 160% at 85% 0%, #e6f0f8 0%, rgba(230, 240, 248, 0) 60%);
  border: 1px solid var(--lx-line);
  border-radius: 14px;
  box-shadow: var(--lx-shadow-1);
  color: var(--lx-navy);
  font-size: 1.3rem;
  font-weight: 500;
  letter-spacing: -.01em;
  line-height: 1.3;
}
body.app [ng-controller="TrackerConfigController"] > .container-fluid::after {
  content: "\f176";
  position: absolute;
  top: 16px;
  left: 51px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--lx-voxter) 0%, var(--lx-navy) 78%);
  box-shadow: 0 6px 14px -6px rgba(209, 77, 82, .45);
  color: #fff;
  font-family: "lx-uicons-tr";
  font-size: 20px;
  line-height: 1;
}

/* selo sozinho numa célula de tabela (ex.: "Ativa" na autenticação de dois
   fatores em Usuários): mesmo padrão dos status, 35px de altura */
body.app .main table.dataTable td > .badge:only-child {
  display: inline-flex;
  align-items: center;
  height: 35px;
  padding: 0 12px;
  border-radius: 9px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .01em;
}

/* telas que tinham ficado sem ícone na família nova */
body.app [ng-controller="NotificationController"] { --lx-ico: "\e1da"; --lx-ico-font: "lx-uicons-tr"; --lx-ico-peso: 400; }   /* bell */
body.app [ng-controller="ProfileController"] { --lx-ico: "\eaee"; --lx-ico-font: "lx-uicons-tr"; --lx-ico-peso: 400; }   /* id-badge */

/* Home: o título "Home" vira uma saudação (o texto original fica no HTML, invisível) */
body.app [ng-controller="HomeController"] .breadcrumb > .breadcrumb-item { font-size: 0; }
body.app [ng-controller="HomeController"] .breadcrumb > .breadcrumb-item::after {
  content: "Bem-vindo!";
  font-size: 1.3rem;
  font-weight: 500;
  letter-spacing: -.01em;
}

/* Sentinela: ícone de "aba anônima" (incognito: chapéu + óculos) no lugar do escudo */
body.app .sidebar .nav-link[href="#/trackers/config"] > .nav-icon::before { content: "\eb05" !important; }
body.app [ng-controller="TrackerConfigController"] > .container-fluid::after { content: "\eb05"; }
body.app [ng-controller="TrackerConfigController"],
body.app [ng-controller="TrackerCommandController"],
body.app [ng-controller="TrackerCommandLotController"] { --lx-ico: "\eb05"; }

/* selos ao lado de texto nas tabelas (Mapper, D.U.F, C, Em dias...): um padrão
   único e compacto. (:only-child ignora texto solto: "nome + 1 selo" era tratado
   como selo sozinho e ganhava 35px, por isso o mesmo selo aparecia em 2 tamanhos) */
body.app .main [ng-controller="ClientController"] table.dataTable td .badge {
  display: inline-flex;
  align-items: center;
  gap: .3em;
  height: 22px;
  padding: 0 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .01em;
  line-height: 1;
  vertical-align: middle;
}
body.app .main [ng-controller="ClientController"] table.dataTable td .badge > i { font-size: 10px; }

/* ---- Menu: item da página atual ----
   O Lara não marca a página atual no menu: o CoreUI só põe .active ao carregar a
   página do zero (e sempre no "Início", porque "#/" casa com tudo). Navegando por
   clique, nenhum item acende; só acendia o que estava aberto no recarregamento.
   Aqui o destaque vem da tela aberta: cada link do menu é ligado ao controller da
   tela que ele abre (mapa gerado das rotas do Lara; 1 controller por link).
   O .active do CoreUI fica neutralizado para não acender o item errado. */
body.app.sidebar-minimized .sidebar .nav > .nav-item:not(:hover) > .nav-link.active::after { content: none; }
body.app .sidebar .nav-link.active:not(:hover) .nav-icon { color: var(--lx-icon); }
body.app.sidebar-minimized .sidebar .nav-dropdown-items .nav-link.active:not(:hover) { font-weight: 400; }
body.app.sidebar-minimized .sidebar .nav-dropdown-items .nav-link.active:not(:hover) .nav-icon { background: var(--lx-surface-2); color: var(--lx-icon); }
body.app:not(.sidebar-minimized) .sidebar .nav-link.active:not(:hover) { background: transparent; box-shadow: none; }

body.app.sidebar-minimized:has([ng-controller="HomeController"]) .sidebar .nav > .nav-item:not(:hover) > .nav-link[href="#/"]::after,
body.app.sidebar-minimized:has([ng-controller="ApnController"]) .sidebar .nav > .nav-item:not(:hover) > .nav-link[href="#/apn"]::after,
body.app.sidebar-minimized:has([ng-controller="AuditController"]) .sidebar .nav > .nav-item:not(:hover) > .nav-link[href="#/audit"]::after,
body.app.sidebar-minimized:has([ng-controller="BillingController"]) .sidebar .nav > .nav-item:not(:hover) > .nav-link[href="#/bills"]::after,
body.app.sidebar-minimized:has([ng-controller="BlockController"]) .sidebar .nav > .nav-item:not(:hover) > .nav-link[href="#/block"]::after,
body.app.sidebar-minimized:has([ng-controller="CampaignController"]) .sidebar .nav > .nav-item:not(:hover) > .nav-link[href="#/campaigns"]::after,
body.app.sidebar-minimized:has([ng-controller="ClientController"]) .sidebar .nav > .nav-item:not(:hover) > .nav-link[href="#/clients"]::after,
body.app.sidebar-minimized:has([ng-controller="ContractController"]) .sidebar .nav > .nav-item:not(:hover) > .nav-link[href="#/contracts"]::after,
body.app.sidebar-minimized:has([ng-controller="DashboardController"]) .sidebar .nav > .nav-item:not(:hover) > .nav-link[href="#/dashboard"]::after,
body.app.sidebar-minimized:has([ng-controller="DashboardSupportController"]) .sidebar .nav > .nav-item:not(:hover) > .nav-link[href="#/dashboard2"]::after,
body.app.sidebar-minimized:has([ng-controller="ErbsController"]) .sidebar .nav > .nav-item:not(:hover) > .nav-link[href="#/erbs"]::after,
body.app.sidebar-minimized:has([ng-controller="FaqController"]) .sidebar .nav > .nav-item:not(:hover) > .nav-link[href="#/faq"]::after,
body.app.sidebar-minimized:has([ng-controller="FinanceController"]) .sidebar .nav > .nav-item:not(:hover) > .nav-link[href="#/finances"]::after,
body.app.sidebar-minimized:has([ng-controller="OtherController"]) .sidebar .nav > .nav-item:not(:hover) > .nav-link[href="#/finances2"]::after,
body.app.sidebar-minimized:has([ng-controller="IdeaController"]) .sidebar .nav > .nav-item:not(:hover) > .nav-link[href="#/ideas"]::after,
body.app.sidebar-minimized:has([ng-controller="ImportController"]) .sidebar .nav > .nav-item:not(:hover) > .nav-link[href="#/import"]::after,
body.app.sidebar-minimized:has([ng-controller="LogController"]) .sidebar .nav > .nav-item:not(:hover) > .nav-link[href="#/logs"]::after,
body.app.sidebar-minimized:has([ng-controller="MapperBillingController"]) .sidebar .nav > .nav-item:not(:hover) > .nav-link[href="#/mapper/bills"]::after,
body.app.sidebar-minimized:has([ng-controller="MonitoringController"]) .sidebar .nav > .nav-item:not(:hover) > .nav-link[href="#/monitoring"]::after,
body.app.sidebar-minimized:has([ng-controller="NFController"]) .sidebar .nav > .nav-item:not(:hover) > .nav-link[href="#/nfs"]::after,
body.app.sidebar-minimized:has([ng-controller="OnlineUsersController"]) .sidebar .nav > .nav-item:not(:hover) > .nav-link[href="#/online-users"]::after,
body.app.sidebar-minimized:has([ng-controller="OrderController"]) .sidebar .nav > .nav-item:not(:hover) > .nav-link[href="#/orders"]::after,
body.app.sidebar-minimized:has([ng-controller="PreOrderController"]) .sidebar .nav > .nav-item:not(:hover) > .nav-link[href="#/preorder"]::after,
body.app.sidebar-minimized:has([ng-controller="ProductController"]) .sidebar .nav > .nav-item:not(:hover) > .nav-link[href="#/products"]::after,
body.app.sidebar-minimized:has([ng-controller="ReportController"]) .sidebar .nav > .nav-item:not(:hover) > .nav-link[href="#/reports"]::after,
body.app.sidebar-minimized:has([ng-controller="ReportActivationController"]) .sidebar .nav > .nav-item:not(:hover) > .nav-link[href="#/reports/activation"]::after,
body.app.sidebar-minimized:has([ng-controller="ReportBillAnalysisController"]) .sidebar .nav > .nav-item:not(:hover) > .nav-link[href="#/reports/analysis_bills"]::after,
body.app.sidebar-minimized:has([ng-controller="ReportClosingController"]) .sidebar .nav > .nav-item:not(:hover) > .nav-link[href="#/reports/closing"]::after,
body.app.sidebar-minimized:has([ng-controller="ReportDataController"]) .sidebar .nav > .nav-item:not(:hover) > .nav-link[href="#/reports/data"]::after,
body.app.sidebar-minimized:has([ng-controller="ReportSalesController"]) .sidebar .nav > .nav-item:not(:hover) > .nav-link[href="#/reports/sales"]::after,
body.app.sidebar-minimized:has([ng-controller="ReportSalesDetailsController"]) .sidebar .nav > .nav-item:not(:hover) > .nav-link[href="#/reports/sales/details"]::after,
body.app.sidebar-minimized:has([ng-controller="ReportSalesMonitoringController"]) .sidebar .nav > .nav-item:not(:hover) > .nav-link[href="#/reports/sales/monitoring"]::after,
body.app.sidebar-minimized:has([ng-controller="ReportProductsSalesController"]) .sidebar .nav > .nav-item:not(:hover) > .nav-link[href="#/reports/sales/products"]::after,
body.app.sidebar-minimized:has([ng-controller="ReportOrdersController"]) .sidebar .nav > .nav-item:not(:hover) > .nav-link[href="#/reports/sales_orders"]::after,
body.app.sidebar-minimized:has([ng-controller="ReportTrackerSalesController"]) .sidebar .nav > .nav-item:not(:hover) > .nav-link[href="#/reports/sales_trackers"]::after,
body.app.sidebar-minimized:has([ng-controller="ResellerController"]) .sidebar .nav > .nav-item:not(:hover) > .nav-link[href="#/resellers"]::after,
body.app.sidebar-minimized:has([ng-controller="SimcardController"]) .sidebar .nav > .nav-item:not(:hover) > .nav-link[href="#/simcards"]::after,
body.app.sidebar-minimized:has([ng-controller="SimcardsExchangeController"]) .sidebar .nav > .nav-item:not(:hover) > .nav-link[href="#/simcards/exchange"]::after,
body.app.sidebar-minimized:has([ng-controller="SimcardSharingController"]) .sidebar .nav > .nav-item:not(:hover) > .nav-link[href="#/simcards/sharing"]::after,
body.app.sidebar-minimized:has([ng-controller="SimcardSharingHistoryController"]) .sidebar .nav > .nav-item:not(:hover) > .nav-link[href="#/simcards/sharing/history"]::after,
body.app.sidebar-minimized:has([ng-controller="SupportController"]) .sidebar .nav > .nav-item:not(:hover) > .nav-link[href="#/support"]::after,
body.app.sidebar-minimized:has([ng-controller="TrackerController"]) .sidebar .nav > .nav-item:not(:hover) > .nav-link[href="#/trackers"]::after,
body.app.sidebar-minimized:has([ng-controller="TrackerConfigController"]) .sidebar .nav > .nav-item:not(:hover) > .nav-link[href="#/trackers/config"]::after,
body.app.sidebar-minimized:has([ng-controller="UserController"]) .sidebar .nav > .nav-item:not(:hover) > .nav-link[href="#/users"]::after,
body.app.sidebar-minimized:has([ng-controller="AdimUserController"]) .sidebar .nav > .nav-item:not(:hover) > .nav-link[href="#/users/admin"]::after,
body.app.sidebar-minimized:has([ng-controller="HomeController"]) .sidebar .nav > .nav-dropdown:not(:hover):has(> .nav-dropdown-items .nav-link[href="#/"]) > .nav-link::after,
body.app.sidebar-minimized:has([ng-controller="ApnController"]) .sidebar .nav > .nav-dropdown:not(:hover):has(> .nav-dropdown-items .nav-link[href="#/apn"]) > .nav-link::after,
body.app.sidebar-minimized:has([ng-controller="AuditController"]) .sidebar .nav > .nav-dropdown:not(:hover):has(> .nav-dropdown-items .nav-link[href="#/audit"]) > .nav-link::after,
body.app.sidebar-minimized:has([ng-controller="BillingController"]) .sidebar .nav > .nav-dropdown:not(:hover):has(> .nav-dropdown-items .nav-link[href="#/bills"]) > .nav-link::after,
body.app.sidebar-minimized:has([ng-controller="BlockController"]) .sidebar .nav > .nav-dropdown:not(:hover):has(> .nav-dropdown-items .nav-link[href="#/block"]) > .nav-link::after,
body.app.sidebar-minimized:has([ng-controller="CampaignController"]) .sidebar .nav > .nav-dropdown:not(:hover):has(> .nav-dropdown-items .nav-link[href="#/campaigns"]) > .nav-link::after,
body.app.sidebar-minimized:has([ng-controller="ClientController"]) .sidebar .nav > .nav-dropdown:not(:hover):has(> .nav-dropdown-items .nav-link[href="#/clients"]) > .nav-link::after,
body.app.sidebar-minimized:has([ng-controller="ContractController"]) .sidebar .nav > .nav-dropdown:not(:hover):has(> .nav-dropdown-items .nav-link[href="#/contracts"]) > .nav-link::after,
body.app.sidebar-minimized:has([ng-controller="DashboardController"]) .sidebar .nav > .nav-dropdown:not(:hover):has(> .nav-dropdown-items .nav-link[href="#/dashboard"]) > .nav-link::after,
body.app.sidebar-minimized:has([ng-controller="DashboardSupportController"]) .sidebar .nav > .nav-dropdown:not(:hover):has(> .nav-dropdown-items .nav-link[href="#/dashboard2"]) > .nav-link::after,
body.app.sidebar-minimized:has([ng-controller="ErbsController"]) .sidebar .nav > .nav-dropdown:not(:hover):has(> .nav-dropdown-items .nav-link[href="#/erbs"]) > .nav-link::after,
body.app.sidebar-minimized:has([ng-controller="FaqController"]) .sidebar .nav > .nav-dropdown:not(:hover):has(> .nav-dropdown-items .nav-link[href="#/faq"]) > .nav-link::after,
body.app.sidebar-minimized:has([ng-controller="FinanceController"]) .sidebar .nav > .nav-dropdown:not(:hover):has(> .nav-dropdown-items .nav-link[href="#/finances"]) > .nav-link::after,
body.app.sidebar-minimized:has([ng-controller="OtherController"]) .sidebar .nav > .nav-dropdown:not(:hover):has(> .nav-dropdown-items .nav-link[href="#/finances2"]) > .nav-link::after,
body.app.sidebar-minimized:has([ng-controller="IdeaController"]) .sidebar .nav > .nav-dropdown:not(:hover):has(> .nav-dropdown-items .nav-link[href="#/ideas"]) > .nav-link::after,
body.app.sidebar-minimized:has([ng-controller="ImportController"]) .sidebar .nav > .nav-dropdown:not(:hover):has(> .nav-dropdown-items .nav-link[href="#/import"]) > .nav-link::after,
body.app.sidebar-minimized:has([ng-controller="LogController"]) .sidebar .nav > .nav-dropdown:not(:hover):has(> .nav-dropdown-items .nav-link[href="#/logs"]) > .nav-link::after,
body.app.sidebar-minimized:has([ng-controller="MapperBillingController"]) .sidebar .nav > .nav-dropdown:not(:hover):has(> .nav-dropdown-items .nav-link[href="#/mapper/bills"]) > .nav-link::after,
body.app.sidebar-minimized:has([ng-controller="MonitoringController"]) .sidebar .nav > .nav-dropdown:not(:hover):has(> .nav-dropdown-items .nav-link[href="#/monitoring"]) > .nav-link::after,
body.app.sidebar-minimized:has([ng-controller="NFController"]) .sidebar .nav > .nav-dropdown:not(:hover):has(> .nav-dropdown-items .nav-link[href="#/nfs"]) > .nav-link::after,
body.app.sidebar-minimized:has([ng-controller="OnlineUsersController"]) .sidebar .nav > .nav-dropdown:not(:hover):has(> .nav-dropdown-items .nav-link[href="#/online-users"]) > .nav-link::after,
body.app.sidebar-minimized:has([ng-controller="OrderController"]) .sidebar .nav > .nav-dropdown:not(:hover):has(> .nav-dropdown-items .nav-link[href="#/orders"]) > .nav-link::after,
body.app.sidebar-minimized:has([ng-controller="PreOrderController"]) .sidebar .nav > .nav-dropdown:not(:hover):has(> .nav-dropdown-items .nav-link[href="#/preorder"]) > .nav-link::after,
body.app.sidebar-minimized:has([ng-controller="ProductController"]) .sidebar .nav > .nav-dropdown:not(:hover):has(> .nav-dropdown-items .nav-link[href="#/products"]) > .nav-link::after,
body.app.sidebar-minimized:has([ng-controller="ReportController"]) .sidebar .nav > .nav-dropdown:not(:hover):has(> .nav-dropdown-items .nav-link[href="#/reports"]) > .nav-link::after,
body.app.sidebar-minimized:has([ng-controller="ReportActivationController"]) .sidebar .nav > .nav-dropdown:not(:hover):has(> .nav-dropdown-items .nav-link[href="#/reports/activation"]) > .nav-link::after,
body.app.sidebar-minimized:has([ng-controller="ReportBillAnalysisController"]) .sidebar .nav > .nav-dropdown:not(:hover):has(> .nav-dropdown-items .nav-link[href="#/reports/analysis_bills"]) > .nav-link::after,
body.app.sidebar-minimized:has([ng-controller="ReportClosingController"]) .sidebar .nav > .nav-dropdown:not(:hover):has(> .nav-dropdown-items .nav-link[href="#/reports/closing"]) > .nav-link::after,
body.app.sidebar-minimized:has([ng-controller="ReportDataController"]) .sidebar .nav > .nav-dropdown:not(:hover):has(> .nav-dropdown-items .nav-link[href="#/reports/data"]) > .nav-link::after,
body.app.sidebar-minimized:has([ng-controller="ReportSalesController"]) .sidebar .nav > .nav-dropdown:not(:hover):has(> .nav-dropdown-items .nav-link[href="#/reports/sales"]) > .nav-link::after,
body.app.sidebar-minimized:has([ng-controller="ReportSalesDetailsController"]) .sidebar .nav > .nav-dropdown:not(:hover):has(> .nav-dropdown-items .nav-link[href="#/reports/sales/details"]) > .nav-link::after,
body.app.sidebar-minimized:has([ng-controller="ReportSalesMonitoringController"]) .sidebar .nav > .nav-dropdown:not(:hover):has(> .nav-dropdown-items .nav-link[href="#/reports/sales/monitoring"]) > .nav-link::after,
body.app.sidebar-minimized:has([ng-controller="ReportProductsSalesController"]) .sidebar .nav > .nav-dropdown:not(:hover):has(> .nav-dropdown-items .nav-link[href="#/reports/sales/products"]) > .nav-link::after,
body.app.sidebar-minimized:has([ng-controller="ReportOrdersController"]) .sidebar .nav > .nav-dropdown:not(:hover):has(> .nav-dropdown-items .nav-link[href="#/reports/sales_orders"]) > .nav-link::after,
body.app.sidebar-minimized:has([ng-controller="ReportTrackerSalesController"]) .sidebar .nav > .nav-dropdown:not(:hover):has(> .nav-dropdown-items .nav-link[href="#/reports/sales_trackers"]) > .nav-link::after,
body.app.sidebar-minimized:has([ng-controller="ResellerController"]) .sidebar .nav > .nav-dropdown:not(:hover):has(> .nav-dropdown-items .nav-link[href="#/resellers"]) > .nav-link::after,
body.app.sidebar-minimized:has([ng-controller="SimcardController"]) .sidebar .nav > .nav-dropdown:not(:hover):has(> .nav-dropdown-items .nav-link[href="#/simcards"]) > .nav-link::after,
body.app.sidebar-minimized:has([ng-controller="SimcardsExchangeController"]) .sidebar .nav > .nav-dropdown:not(:hover):has(> .nav-dropdown-items .nav-link[href="#/simcards/exchange"]) > .nav-link::after,
body.app.sidebar-minimized:has([ng-controller="SimcardSharingController"]) .sidebar .nav > .nav-dropdown:not(:hover):has(> .nav-dropdown-items .nav-link[href="#/simcards/sharing"]) > .nav-link::after,
body.app.sidebar-minimized:has([ng-controller="SimcardSharingHistoryController"]) .sidebar .nav > .nav-dropdown:not(:hover):has(> .nav-dropdown-items .nav-link[href="#/simcards/sharing/history"]) > .nav-link::after,
body.app.sidebar-minimized:has([ng-controller="SupportController"]) .sidebar .nav > .nav-dropdown:not(:hover):has(> .nav-dropdown-items .nav-link[href="#/support"]) > .nav-link::after,
body.app.sidebar-minimized:has([ng-controller="TrackerController"]) .sidebar .nav > .nav-dropdown:not(:hover):has(> .nav-dropdown-items .nav-link[href="#/trackers"]) > .nav-link::after,
body.app.sidebar-minimized:has([ng-controller="TrackerConfigController"]) .sidebar .nav > .nav-dropdown:not(:hover):has(> .nav-dropdown-items .nav-link[href="#/trackers/config"]) > .nav-link::after,
body.app.sidebar-minimized:has([ng-controller="UserController"]) .sidebar .nav > .nav-dropdown:not(:hover):has(> .nav-dropdown-items .nav-link[href="#/users"]) > .nav-link::after,
body.app.sidebar-minimized:has([ng-controller="AdimUserController"]) .sidebar .nav > .nav-dropdown:not(:hover):has(> .nav-dropdown-items .nav-link[href="#/users/admin"]) > .nav-link::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 12px;
  width: 36px;
  height: 36px;
  transform: translateY(-50%);
  background: var(--lx-active-bg);
  border: 1px solid var(--lx-active-line);
  border-radius: 11px;
  pointer-events: none;
}
body.app:has([ng-controller="HomeController"]) .sidebar .nav > .nav-item > .nav-link[href="#/"] .nav-icon,
body.app:has([ng-controller="ApnController"]) .sidebar .nav > .nav-item > .nav-link[href="#/apn"] .nav-icon,
body.app:has([ng-controller="AuditController"]) .sidebar .nav > .nav-item > .nav-link[href="#/audit"] .nav-icon,
body.app:has([ng-controller="BillingController"]) .sidebar .nav > .nav-item > .nav-link[href="#/bills"] .nav-icon,
body.app:has([ng-controller="BlockController"]) .sidebar .nav > .nav-item > .nav-link[href="#/block"] .nav-icon,
body.app:has([ng-controller="CampaignController"]) .sidebar .nav > .nav-item > .nav-link[href="#/campaigns"] .nav-icon,
body.app:has([ng-controller="ClientController"]) .sidebar .nav > .nav-item > .nav-link[href="#/clients"] .nav-icon,
body.app:has([ng-controller="ContractController"]) .sidebar .nav > .nav-item > .nav-link[href="#/contracts"] .nav-icon,
body.app:has([ng-controller="DashboardController"]) .sidebar .nav > .nav-item > .nav-link[href="#/dashboard"] .nav-icon,
body.app:has([ng-controller="DashboardSupportController"]) .sidebar .nav > .nav-item > .nav-link[href="#/dashboard2"] .nav-icon,
body.app:has([ng-controller="ErbsController"]) .sidebar .nav > .nav-item > .nav-link[href="#/erbs"] .nav-icon,
body.app:has([ng-controller="FaqController"]) .sidebar .nav > .nav-item > .nav-link[href="#/faq"] .nav-icon,
body.app:has([ng-controller="FinanceController"]) .sidebar .nav > .nav-item > .nav-link[href="#/finances"] .nav-icon,
body.app:has([ng-controller="OtherController"]) .sidebar .nav > .nav-item > .nav-link[href="#/finances2"] .nav-icon,
body.app:has([ng-controller="IdeaController"]) .sidebar .nav > .nav-item > .nav-link[href="#/ideas"] .nav-icon,
body.app:has([ng-controller="ImportController"]) .sidebar .nav > .nav-item > .nav-link[href="#/import"] .nav-icon,
body.app:has([ng-controller="LogController"]) .sidebar .nav > .nav-item > .nav-link[href="#/logs"] .nav-icon,
body.app:has([ng-controller="MapperBillingController"]) .sidebar .nav > .nav-item > .nav-link[href="#/mapper/bills"] .nav-icon,
body.app:has([ng-controller="MonitoringController"]) .sidebar .nav > .nav-item > .nav-link[href="#/monitoring"] .nav-icon,
body.app:has([ng-controller="NFController"]) .sidebar .nav > .nav-item > .nav-link[href="#/nfs"] .nav-icon,
body.app:has([ng-controller="OnlineUsersController"]) .sidebar .nav > .nav-item > .nav-link[href="#/online-users"] .nav-icon,
body.app:has([ng-controller="OrderController"]) .sidebar .nav > .nav-item > .nav-link[href="#/orders"] .nav-icon,
body.app:has([ng-controller="PreOrderController"]) .sidebar .nav > .nav-item > .nav-link[href="#/preorder"] .nav-icon,
body.app:has([ng-controller="ProductController"]) .sidebar .nav > .nav-item > .nav-link[href="#/products"] .nav-icon,
body.app:has([ng-controller="ReportController"]) .sidebar .nav > .nav-item > .nav-link[href="#/reports"] .nav-icon,
body.app:has([ng-controller="ReportActivationController"]) .sidebar .nav > .nav-item > .nav-link[href="#/reports/activation"] .nav-icon,
body.app:has([ng-controller="ReportBillAnalysisController"]) .sidebar .nav > .nav-item > .nav-link[href="#/reports/analysis_bills"] .nav-icon,
body.app:has([ng-controller="ReportClosingController"]) .sidebar .nav > .nav-item > .nav-link[href="#/reports/closing"] .nav-icon,
body.app:has([ng-controller="ReportDataController"]) .sidebar .nav > .nav-item > .nav-link[href="#/reports/data"] .nav-icon,
body.app:has([ng-controller="ReportSalesController"]) .sidebar .nav > .nav-item > .nav-link[href="#/reports/sales"] .nav-icon,
body.app:has([ng-controller="ReportSalesDetailsController"]) .sidebar .nav > .nav-item > .nav-link[href="#/reports/sales/details"] .nav-icon,
body.app:has([ng-controller="ReportSalesMonitoringController"]) .sidebar .nav > .nav-item > .nav-link[href="#/reports/sales/monitoring"] .nav-icon,
body.app:has([ng-controller="ReportProductsSalesController"]) .sidebar .nav > .nav-item > .nav-link[href="#/reports/sales/products"] .nav-icon,
body.app:has([ng-controller="ReportOrdersController"]) .sidebar .nav > .nav-item > .nav-link[href="#/reports/sales_orders"] .nav-icon,
body.app:has([ng-controller="ReportTrackerSalesController"]) .sidebar .nav > .nav-item > .nav-link[href="#/reports/sales_trackers"] .nav-icon,
body.app:has([ng-controller="ResellerController"]) .sidebar .nav > .nav-item > .nav-link[href="#/resellers"] .nav-icon,
body.app:has([ng-controller="SimcardController"]) .sidebar .nav > .nav-item > .nav-link[href="#/simcards"] .nav-icon,
body.app:has([ng-controller="SimcardsExchangeController"]) .sidebar .nav > .nav-item > .nav-link[href="#/simcards/exchange"] .nav-icon,
body.app:has([ng-controller="SimcardSharingController"]) .sidebar .nav > .nav-item > .nav-link[href="#/simcards/sharing"] .nav-icon,
body.app:has([ng-controller="SimcardSharingHistoryController"]) .sidebar .nav > .nav-item > .nav-link[href="#/simcards/sharing/history"] .nav-icon,
body.app:has([ng-controller="SupportController"]) .sidebar .nav > .nav-item > .nav-link[href="#/support"] .nav-icon,
body.app:has([ng-controller="TrackerController"]) .sidebar .nav > .nav-item > .nav-link[href="#/trackers"] .nav-icon,
body.app:has([ng-controller="TrackerConfigController"]) .sidebar .nav > .nav-item > .nav-link[href="#/trackers/config"] .nav-icon,
body.app:has([ng-controller="UserController"]) .sidebar .nav > .nav-item > .nav-link[href="#/users"] .nav-icon,
body.app:has([ng-controller="AdimUserController"]) .sidebar .nav > .nav-item > .nav-link[href="#/users/admin"] .nav-icon,
body.app:has([ng-controller="HomeController"]) .sidebar .nav > .nav-dropdown:has(> .nav-dropdown-items .nav-link[href="#/"]) > .nav-link .nav-icon,
body.app:has([ng-controller="ApnController"]) .sidebar .nav > .nav-dropdown:has(> .nav-dropdown-items .nav-link[href="#/apn"]) > .nav-link .nav-icon,
body.app:has([ng-controller="AuditController"]) .sidebar .nav > .nav-dropdown:has(> .nav-dropdown-items .nav-link[href="#/audit"]) > .nav-link .nav-icon,
body.app:has([ng-controller="BillingController"]) .sidebar .nav > .nav-dropdown:has(> .nav-dropdown-items .nav-link[href="#/bills"]) > .nav-link .nav-icon,
body.app:has([ng-controller="BlockController"]) .sidebar .nav > .nav-dropdown:has(> .nav-dropdown-items .nav-link[href="#/block"]) > .nav-link .nav-icon,
body.app:has([ng-controller="CampaignController"]) .sidebar .nav > .nav-dropdown:has(> .nav-dropdown-items .nav-link[href="#/campaigns"]) > .nav-link .nav-icon,
body.app:has([ng-controller="ClientController"]) .sidebar .nav > .nav-dropdown:has(> .nav-dropdown-items .nav-link[href="#/clients"]) > .nav-link .nav-icon,
body.app:has([ng-controller="ContractController"]) .sidebar .nav > .nav-dropdown:has(> .nav-dropdown-items .nav-link[href="#/contracts"]) > .nav-link .nav-icon,
body.app:has([ng-controller="DashboardController"]) .sidebar .nav > .nav-dropdown:has(> .nav-dropdown-items .nav-link[href="#/dashboard"]) > .nav-link .nav-icon,
body.app:has([ng-controller="DashboardSupportController"]) .sidebar .nav > .nav-dropdown:has(> .nav-dropdown-items .nav-link[href="#/dashboard2"]) > .nav-link .nav-icon,
body.app:has([ng-controller="ErbsController"]) .sidebar .nav > .nav-dropdown:has(> .nav-dropdown-items .nav-link[href="#/erbs"]) > .nav-link .nav-icon,
body.app:has([ng-controller="FaqController"]) .sidebar .nav > .nav-dropdown:has(> .nav-dropdown-items .nav-link[href="#/faq"]) > .nav-link .nav-icon,
body.app:has([ng-controller="FinanceController"]) .sidebar .nav > .nav-dropdown:has(> .nav-dropdown-items .nav-link[href="#/finances"]) > .nav-link .nav-icon,
body.app:has([ng-controller="OtherController"]) .sidebar .nav > .nav-dropdown:has(> .nav-dropdown-items .nav-link[href="#/finances2"]) > .nav-link .nav-icon,
body.app:has([ng-controller="IdeaController"]) .sidebar .nav > .nav-dropdown:has(> .nav-dropdown-items .nav-link[href="#/ideas"]) > .nav-link .nav-icon,
body.app:has([ng-controller="ImportController"]) .sidebar .nav > .nav-dropdown:has(> .nav-dropdown-items .nav-link[href="#/import"]) > .nav-link .nav-icon,
body.app:has([ng-controller="LogController"]) .sidebar .nav > .nav-dropdown:has(> .nav-dropdown-items .nav-link[href="#/logs"]) > .nav-link .nav-icon,
body.app:has([ng-controller="MapperBillingController"]) .sidebar .nav > .nav-dropdown:has(> .nav-dropdown-items .nav-link[href="#/mapper/bills"]) > .nav-link .nav-icon,
body.app:has([ng-controller="MonitoringController"]) .sidebar .nav > .nav-dropdown:has(> .nav-dropdown-items .nav-link[href="#/monitoring"]) > .nav-link .nav-icon,
body.app:has([ng-controller="NFController"]) .sidebar .nav > .nav-dropdown:has(> .nav-dropdown-items .nav-link[href="#/nfs"]) > .nav-link .nav-icon,
body.app:has([ng-controller="OnlineUsersController"]) .sidebar .nav > .nav-dropdown:has(> .nav-dropdown-items .nav-link[href="#/online-users"]) > .nav-link .nav-icon,
body.app:has([ng-controller="OrderController"]) .sidebar .nav > .nav-dropdown:has(> .nav-dropdown-items .nav-link[href="#/orders"]) > .nav-link .nav-icon,
body.app:has([ng-controller="PreOrderController"]) .sidebar .nav > .nav-dropdown:has(> .nav-dropdown-items .nav-link[href="#/preorder"]) > .nav-link .nav-icon,
body.app:has([ng-controller="ProductController"]) .sidebar .nav > .nav-dropdown:has(> .nav-dropdown-items .nav-link[href="#/products"]) > .nav-link .nav-icon,
body.app:has([ng-controller="ReportController"]) .sidebar .nav > .nav-dropdown:has(> .nav-dropdown-items .nav-link[href="#/reports"]) > .nav-link .nav-icon,
body.app:has([ng-controller="ReportActivationController"]) .sidebar .nav > .nav-dropdown:has(> .nav-dropdown-items .nav-link[href="#/reports/activation"]) > .nav-link .nav-icon,
body.app:has([ng-controller="ReportBillAnalysisController"]) .sidebar .nav > .nav-dropdown:has(> .nav-dropdown-items .nav-link[href="#/reports/analysis_bills"]) > .nav-link .nav-icon,
body.app:has([ng-controller="ReportClosingController"]) .sidebar .nav > .nav-dropdown:has(> .nav-dropdown-items .nav-link[href="#/reports/closing"]) > .nav-link .nav-icon,
body.app:has([ng-controller="ReportDataController"]) .sidebar .nav > .nav-dropdown:has(> .nav-dropdown-items .nav-link[href="#/reports/data"]) > .nav-link .nav-icon,
body.app:has([ng-controller="ReportSalesController"]) .sidebar .nav > .nav-dropdown:has(> .nav-dropdown-items .nav-link[href="#/reports/sales"]) > .nav-link .nav-icon,
body.app:has([ng-controller="ReportSalesDetailsController"]) .sidebar .nav > .nav-dropdown:has(> .nav-dropdown-items .nav-link[href="#/reports/sales/details"]) > .nav-link .nav-icon,
body.app:has([ng-controller="ReportSalesMonitoringController"]) .sidebar .nav > .nav-dropdown:has(> .nav-dropdown-items .nav-link[href="#/reports/sales/monitoring"]) > .nav-link .nav-icon,
body.app:has([ng-controller="ReportProductsSalesController"]) .sidebar .nav > .nav-dropdown:has(> .nav-dropdown-items .nav-link[href="#/reports/sales/products"]) > .nav-link .nav-icon,
body.app:has([ng-controller="ReportOrdersController"]) .sidebar .nav > .nav-dropdown:has(> .nav-dropdown-items .nav-link[href="#/reports/sales_orders"]) > .nav-link .nav-icon,
body.app:has([ng-controller="ReportTrackerSalesController"]) .sidebar .nav > .nav-dropdown:has(> .nav-dropdown-items .nav-link[href="#/reports/sales_trackers"]) > .nav-link .nav-icon,
body.app:has([ng-controller="ResellerController"]) .sidebar .nav > .nav-dropdown:has(> .nav-dropdown-items .nav-link[href="#/resellers"]) > .nav-link .nav-icon,
body.app:has([ng-controller="SimcardController"]) .sidebar .nav > .nav-dropdown:has(> .nav-dropdown-items .nav-link[href="#/simcards"]) > .nav-link .nav-icon,
body.app:has([ng-controller="SimcardsExchangeController"]) .sidebar .nav > .nav-dropdown:has(> .nav-dropdown-items .nav-link[href="#/simcards/exchange"]) > .nav-link .nav-icon,
body.app:has([ng-controller="SimcardSharingController"]) .sidebar .nav > .nav-dropdown:has(> .nav-dropdown-items .nav-link[href="#/simcards/sharing"]) > .nav-link .nav-icon,
body.app:has([ng-controller="SimcardSharingHistoryController"]) .sidebar .nav > .nav-dropdown:has(> .nav-dropdown-items .nav-link[href="#/simcards/sharing/history"]) > .nav-link .nav-icon,
body.app:has([ng-controller="SupportController"]) .sidebar .nav > .nav-dropdown:has(> .nav-dropdown-items .nav-link[href="#/support"]) > .nav-link .nav-icon,
body.app:has([ng-controller="TrackerController"]) .sidebar .nav > .nav-dropdown:has(> .nav-dropdown-items .nav-link[href="#/trackers"]) > .nav-link .nav-icon,
body.app:has([ng-controller="TrackerConfigController"]) .sidebar .nav > .nav-dropdown:has(> .nav-dropdown-items .nav-link[href="#/trackers/config"]) > .nav-link .nav-icon,
body.app:has([ng-controller="UserController"]) .sidebar .nav > .nav-dropdown:has(> .nav-dropdown-items .nav-link[href="#/users"]) > .nav-link .nav-icon,
body.app:has([ng-controller="AdimUserController"]) .sidebar .nav > .nav-dropdown:has(> .nav-dropdown-items .nav-link[href="#/users/admin"]) > .nav-link .nav-icon { color: var(--lx-voxter); }
body.app.sidebar-minimized:has([ng-controller="HomeController"]) .sidebar .nav-dropdown-items .nav-link[href="#/"],
body.app.sidebar-minimized:has([ng-controller="ApnController"]) .sidebar .nav-dropdown-items .nav-link[href="#/apn"],
body.app.sidebar-minimized:has([ng-controller="AuditController"]) .sidebar .nav-dropdown-items .nav-link[href="#/audit"],
body.app.sidebar-minimized:has([ng-controller="BillingController"]) .sidebar .nav-dropdown-items .nav-link[href="#/bills"],
body.app.sidebar-minimized:has([ng-controller="BlockController"]) .sidebar .nav-dropdown-items .nav-link[href="#/block"],
body.app.sidebar-minimized:has([ng-controller="CampaignController"]) .sidebar .nav-dropdown-items .nav-link[href="#/campaigns"],
body.app.sidebar-minimized:has([ng-controller="ClientController"]) .sidebar .nav-dropdown-items .nav-link[href="#/clients"],
body.app.sidebar-minimized:has([ng-controller="ContractController"]) .sidebar .nav-dropdown-items .nav-link[href="#/contracts"],
body.app.sidebar-minimized:has([ng-controller="DashboardController"]) .sidebar .nav-dropdown-items .nav-link[href="#/dashboard"],
body.app.sidebar-minimized:has([ng-controller="DashboardSupportController"]) .sidebar .nav-dropdown-items .nav-link[href="#/dashboard2"],
body.app.sidebar-minimized:has([ng-controller="ErbsController"]) .sidebar .nav-dropdown-items .nav-link[href="#/erbs"],
body.app.sidebar-minimized:has([ng-controller="FaqController"]) .sidebar .nav-dropdown-items .nav-link[href="#/faq"],
body.app.sidebar-minimized:has([ng-controller="FinanceController"]) .sidebar .nav-dropdown-items .nav-link[href="#/finances"],
body.app.sidebar-minimized:has([ng-controller="OtherController"]) .sidebar .nav-dropdown-items .nav-link[href="#/finances2"],
body.app.sidebar-minimized:has([ng-controller="IdeaController"]) .sidebar .nav-dropdown-items .nav-link[href="#/ideas"],
body.app.sidebar-minimized:has([ng-controller="ImportController"]) .sidebar .nav-dropdown-items .nav-link[href="#/import"],
body.app.sidebar-minimized:has([ng-controller="LogController"]) .sidebar .nav-dropdown-items .nav-link[href="#/logs"],
body.app.sidebar-minimized:has([ng-controller="MapperBillingController"]) .sidebar .nav-dropdown-items .nav-link[href="#/mapper/bills"],
body.app.sidebar-minimized:has([ng-controller="MonitoringController"]) .sidebar .nav-dropdown-items .nav-link[href="#/monitoring"],
body.app.sidebar-minimized:has([ng-controller="NFController"]) .sidebar .nav-dropdown-items .nav-link[href="#/nfs"],
body.app.sidebar-minimized:has([ng-controller="OnlineUsersController"]) .sidebar .nav-dropdown-items .nav-link[href="#/online-users"],
body.app.sidebar-minimized:has([ng-controller="OrderController"]) .sidebar .nav-dropdown-items .nav-link[href="#/orders"],
body.app.sidebar-minimized:has([ng-controller="PreOrderController"]) .sidebar .nav-dropdown-items .nav-link[href="#/preorder"],
body.app.sidebar-minimized:has([ng-controller="ProductController"]) .sidebar .nav-dropdown-items .nav-link[href="#/products"],
body.app.sidebar-minimized:has([ng-controller="ReportController"]) .sidebar .nav-dropdown-items .nav-link[href="#/reports"],
body.app.sidebar-minimized:has([ng-controller="ReportActivationController"]) .sidebar .nav-dropdown-items .nav-link[href="#/reports/activation"],
body.app.sidebar-minimized:has([ng-controller="ReportBillAnalysisController"]) .sidebar .nav-dropdown-items .nav-link[href="#/reports/analysis_bills"],
body.app.sidebar-minimized:has([ng-controller="ReportClosingController"]) .sidebar .nav-dropdown-items .nav-link[href="#/reports/closing"],
body.app.sidebar-minimized:has([ng-controller="ReportDataController"]) .sidebar .nav-dropdown-items .nav-link[href="#/reports/data"],
body.app.sidebar-minimized:has([ng-controller="ReportSalesController"]) .sidebar .nav-dropdown-items .nav-link[href="#/reports/sales"],
body.app.sidebar-minimized:has([ng-controller="ReportSalesDetailsController"]) .sidebar .nav-dropdown-items .nav-link[href="#/reports/sales/details"],
body.app.sidebar-minimized:has([ng-controller="ReportSalesMonitoringController"]) .sidebar .nav-dropdown-items .nav-link[href="#/reports/sales/monitoring"],
body.app.sidebar-minimized:has([ng-controller="ReportProductsSalesController"]) .sidebar .nav-dropdown-items .nav-link[href="#/reports/sales/products"],
body.app.sidebar-minimized:has([ng-controller="ReportOrdersController"]) .sidebar .nav-dropdown-items .nav-link[href="#/reports/sales_orders"],
body.app.sidebar-minimized:has([ng-controller="ReportTrackerSalesController"]) .sidebar .nav-dropdown-items .nav-link[href="#/reports/sales_trackers"],
body.app.sidebar-minimized:has([ng-controller="ResellerController"]) .sidebar .nav-dropdown-items .nav-link[href="#/resellers"],
body.app.sidebar-minimized:has([ng-controller="SimcardController"]) .sidebar .nav-dropdown-items .nav-link[href="#/simcards"],
body.app.sidebar-minimized:has([ng-controller="SimcardsExchangeController"]) .sidebar .nav-dropdown-items .nav-link[href="#/simcards/exchange"],
body.app.sidebar-minimized:has([ng-controller="SimcardSharingController"]) .sidebar .nav-dropdown-items .nav-link[href="#/simcards/sharing"],
body.app.sidebar-minimized:has([ng-controller="SimcardSharingHistoryController"]) .sidebar .nav-dropdown-items .nav-link[href="#/simcards/sharing/history"],
body.app.sidebar-minimized:has([ng-controller="SupportController"]) .sidebar .nav-dropdown-items .nav-link[href="#/support"],
body.app.sidebar-minimized:has([ng-controller="TrackerController"]) .sidebar .nav-dropdown-items .nav-link[href="#/trackers"],
body.app.sidebar-minimized:has([ng-controller="TrackerConfigController"]) .sidebar .nav-dropdown-items .nav-link[href="#/trackers/config"],
body.app.sidebar-minimized:has([ng-controller="UserController"]) .sidebar .nav-dropdown-items .nav-link[href="#/users"],
body.app.sidebar-minimized:has([ng-controller="AdimUserController"]) .sidebar .nav-dropdown-items .nav-link[href="#/users/admin"] { font-weight: 500; }
body.app.sidebar-minimized:has([ng-controller="HomeController"]) .sidebar .nav-dropdown-items .nav-link[href="#/"] .nav-icon,
body.app.sidebar-minimized:has([ng-controller="ApnController"]) .sidebar .nav-dropdown-items .nav-link[href="#/apn"] .nav-icon,
body.app.sidebar-minimized:has([ng-controller="AuditController"]) .sidebar .nav-dropdown-items .nav-link[href="#/audit"] .nav-icon,
body.app.sidebar-minimized:has([ng-controller="BillingController"]) .sidebar .nav-dropdown-items .nav-link[href="#/bills"] .nav-icon,
body.app.sidebar-minimized:has([ng-controller="BlockController"]) .sidebar .nav-dropdown-items .nav-link[href="#/block"] .nav-icon,
body.app.sidebar-minimized:has([ng-controller="CampaignController"]) .sidebar .nav-dropdown-items .nav-link[href="#/campaigns"] .nav-icon,
body.app.sidebar-minimized:has([ng-controller="ClientController"]) .sidebar .nav-dropdown-items .nav-link[href="#/clients"] .nav-icon,
body.app.sidebar-minimized:has([ng-controller="ContractController"]) .sidebar .nav-dropdown-items .nav-link[href="#/contracts"] .nav-icon,
body.app.sidebar-minimized:has([ng-controller="DashboardController"]) .sidebar .nav-dropdown-items .nav-link[href="#/dashboard"] .nav-icon,
body.app.sidebar-minimized:has([ng-controller="DashboardSupportController"]) .sidebar .nav-dropdown-items .nav-link[href="#/dashboard2"] .nav-icon,
body.app.sidebar-minimized:has([ng-controller="ErbsController"]) .sidebar .nav-dropdown-items .nav-link[href="#/erbs"] .nav-icon,
body.app.sidebar-minimized:has([ng-controller="FaqController"]) .sidebar .nav-dropdown-items .nav-link[href="#/faq"] .nav-icon,
body.app.sidebar-minimized:has([ng-controller="FinanceController"]) .sidebar .nav-dropdown-items .nav-link[href="#/finances"] .nav-icon,
body.app.sidebar-minimized:has([ng-controller="OtherController"]) .sidebar .nav-dropdown-items .nav-link[href="#/finances2"] .nav-icon,
body.app.sidebar-minimized:has([ng-controller="IdeaController"]) .sidebar .nav-dropdown-items .nav-link[href="#/ideas"] .nav-icon,
body.app.sidebar-minimized:has([ng-controller="ImportController"]) .sidebar .nav-dropdown-items .nav-link[href="#/import"] .nav-icon,
body.app.sidebar-minimized:has([ng-controller="LogController"]) .sidebar .nav-dropdown-items .nav-link[href="#/logs"] .nav-icon,
body.app.sidebar-minimized:has([ng-controller="MapperBillingController"]) .sidebar .nav-dropdown-items .nav-link[href="#/mapper/bills"] .nav-icon,
body.app.sidebar-minimized:has([ng-controller="MonitoringController"]) .sidebar .nav-dropdown-items .nav-link[href="#/monitoring"] .nav-icon,
body.app.sidebar-minimized:has([ng-controller="NFController"]) .sidebar .nav-dropdown-items .nav-link[href="#/nfs"] .nav-icon,
body.app.sidebar-minimized:has([ng-controller="OnlineUsersController"]) .sidebar .nav-dropdown-items .nav-link[href="#/online-users"] .nav-icon,
body.app.sidebar-minimized:has([ng-controller="OrderController"]) .sidebar .nav-dropdown-items .nav-link[href="#/orders"] .nav-icon,
body.app.sidebar-minimized:has([ng-controller="PreOrderController"]) .sidebar .nav-dropdown-items .nav-link[href="#/preorder"] .nav-icon,
body.app.sidebar-minimized:has([ng-controller="ProductController"]) .sidebar .nav-dropdown-items .nav-link[href="#/products"] .nav-icon,
body.app.sidebar-minimized:has([ng-controller="ReportController"]) .sidebar .nav-dropdown-items .nav-link[href="#/reports"] .nav-icon,
body.app.sidebar-minimized:has([ng-controller="ReportActivationController"]) .sidebar .nav-dropdown-items .nav-link[href="#/reports/activation"] .nav-icon,
body.app.sidebar-minimized:has([ng-controller="ReportBillAnalysisController"]) .sidebar .nav-dropdown-items .nav-link[href="#/reports/analysis_bills"] .nav-icon,
body.app.sidebar-minimized:has([ng-controller="ReportClosingController"]) .sidebar .nav-dropdown-items .nav-link[href="#/reports/closing"] .nav-icon,
body.app.sidebar-minimized:has([ng-controller="ReportDataController"]) .sidebar .nav-dropdown-items .nav-link[href="#/reports/data"] .nav-icon,
body.app.sidebar-minimized:has([ng-controller="ReportSalesController"]) .sidebar .nav-dropdown-items .nav-link[href="#/reports/sales"] .nav-icon,
body.app.sidebar-minimized:has([ng-controller="ReportSalesDetailsController"]) .sidebar .nav-dropdown-items .nav-link[href="#/reports/sales/details"] .nav-icon,
body.app.sidebar-minimized:has([ng-controller="ReportSalesMonitoringController"]) .sidebar .nav-dropdown-items .nav-link[href="#/reports/sales/monitoring"] .nav-icon,
body.app.sidebar-minimized:has([ng-controller="ReportProductsSalesController"]) .sidebar .nav-dropdown-items .nav-link[href="#/reports/sales/products"] .nav-icon,
body.app.sidebar-minimized:has([ng-controller="ReportOrdersController"]) .sidebar .nav-dropdown-items .nav-link[href="#/reports/sales_orders"] .nav-icon,
body.app.sidebar-minimized:has([ng-controller="ReportTrackerSalesController"]) .sidebar .nav-dropdown-items .nav-link[href="#/reports/sales_trackers"] .nav-icon,
body.app.sidebar-minimized:has([ng-controller="ResellerController"]) .sidebar .nav-dropdown-items .nav-link[href="#/resellers"] .nav-icon,
body.app.sidebar-minimized:has([ng-controller="SimcardController"]) .sidebar .nav-dropdown-items .nav-link[href="#/simcards"] .nav-icon,
body.app.sidebar-minimized:has([ng-controller="SimcardsExchangeController"]) .sidebar .nav-dropdown-items .nav-link[href="#/simcards/exchange"] .nav-icon,
body.app.sidebar-minimized:has([ng-controller="SimcardSharingController"]) .sidebar .nav-dropdown-items .nav-link[href="#/simcards/sharing"] .nav-icon,
body.app.sidebar-minimized:has([ng-controller="SimcardSharingHistoryController"]) .sidebar .nav-dropdown-items .nav-link[href="#/simcards/sharing/history"] .nav-icon,
body.app.sidebar-minimized:has([ng-controller="SupportController"]) .sidebar .nav-dropdown-items .nav-link[href="#/support"] .nav-icon,
body.app.sidebar-minimized:has([ng-controller="TrackerController"]) .sidebar .nav-dropdown-items .nav-link[href="#/trackers"] .nav-icon,
body.app.sidebar-minimized:has([ng-controller="TrackerConfigController"]) .sidebar .nav-dropdown-items .nav-link[href="#/trackers/config"] .nav-icon,
body.app.sidebar-minimized:has([ng-controller="UserController"]) .sidebar .nav-dropdown-items .nav-link[href="#/users"] .nav-icon,
body.app.sidebar-minimized:has([ng-controller="AdimUserController"]) .sidebar .nav-dropdown-items .nav-link[href="#/users/admin"] .nav-icon { background: var(--lx-navy); color: #fff; }
body.app:not(.sidebar-minimized):has([ng-controller="HomeController"]) .sidebar .nav-link[href="#/"],
body.app:not(.sidebar-minimized):has([ng-controller="ApnController"]) .sidebar .nav-link[href="#/apn"],
body.app:not(.sidebar-minimized):has([ng-controller="AuditController"]) .sidebar .nav-link[href="#/audit"],
body.app:not(.sidebar-minimized):has([ng-controller="BillingController"]) .sidebar .nav-link[href="#/bills"],
body.app:not(.sidebar-minimized):has([ng-controller="BlockController"]) .sidebar .nav-link[href="#/block"],
body.app:not(.sidebar-minimized):has([ng-controller="CampaignController"]) .sidebar .nav-link[href="#/campaigns"],
body.app:not(.sidebar-minimized):has([ng-controller="ClientController"]) .sidebar .nav-link[href="#/clients"],
body.app:not(.sidebar-minimized):has([ng-controller="ContractController"]) .sidebar .nav-link[href="#/contracts"],
body.app:not(.sidebar-minimized):has([ng-controller="DashboardController"]) .sidebar .nav-link[href="#/dashboard"],
body.app:not(.sidebar-minimized):has([ng-controller="DashboardSupportController"]) .sidebar .nav-link[href="#/dashboard2"],
body.app:not(.sidebar-minimized):has([ng-controller="ErbsController"]) .sidebar .nav-link[href="#/erbs"],
body.app:not(.sidebar-minimized):has([ng-controller="FaqController"]) .sidebar .nav-link[href="#/faq"],
body.app:not(.sidebar-minimized):has([ng-controller="FinanceController"]) .sidebar .nav-link[href="#/finances"],
body.app:not(.sidebar-minimized):has([ng-controller="OtherController"]) .sidebar .nav-link[href="#/finances2"],
body.app:not(.sidebar-minimized):has([ng-controller="IdeaController"]) .sidebar .nav-link[href="#/ideas"],
body.app:not(.sidebar-minimized):has([ng-controller="ImportController"]) .sidebar .nav-link[href="#/import"],
body.app:not(.sidebar-minimized):has([ng-controller="LogController"]) .sidebar .nav-link[href="#/logs"],
body.app:not(.sidebar-minimized):has([ng-controller="MapperBillingController"]) .sidebar .nav-link[href="#/mapper/bills"],
body.app:not(.sidebar-minimized):has([ng-controller="MonitoringController"]) .sidebar .nav-link[href="#/monitoring"],
body.app:not(.sidebar-minimized):has([ng-controller="NFController"]) .sidebar .nav-link[href="#/nfs"],
body.app:not(.sidebar-minimized):has([ng-controller="OnlineUsersController"]) .sidebar .nav-link[href="#/online-users"],
body.app:not(.sidebar-minimized):has([ng-controller="OrderController"]) .sidebar .nav-link[href="#/orders"],
body.app:not(.sidebar-minimized):has([ng-controller="PreOrderController"]) .sidebar .nav-link[href="#/preorder"],
body.app:not(.sidebar-minimized):has([ng-controller="ProductController"]) .sidebar .nav-link[href="#/products"],
body.app:not(.sidebar-minimized):has([ng-controller="ReportController"]) .sidebar .nav-link[href="#/reports"],
body.app:not(.sidebar-minimized):has([ng-controller="ReportActivationController"]) .sidebar .nav-link[href="#/reports/activation"],
body.app:not(.sidebar-minimized):has([ng-controller="ReportBillAnalysisController"]) .sidebar .nav-link[href="#/reports/analysis_bills"],
body.app:not(.sidebar-minimized):has([ng-controller="ReportClosingController"]) .sidebar .nav-link[href="#/reports/closing"],
body.app:not(.sidebar-minimized):has([ng-controller="ReportDataController"]) .sidebar .nav-link[href="#/reports/data"],
body.app:not(.sidebar-minimized):has([ng-controller="ReportSalesController"]) .sidebar .nav-link[href="#/reports/sales"],
body.app:not(.sidebar-minimized):has([ng-controller="ReportSalesDetailsController"]) .sidebar .nav-link[href="#/reports/sales/details"],
body.app:not(.sidebar-minimized):has([ng-controller="ReportSalesMonitoringController"]) .sidebar .nav-link[href="#/reports/sales/monitoring"],
body.app:not(.sidebar-minimized):has([ng-controller="ReportProductsSalesController"]) .sidebar .nav-link[href="#/reports/sales/products"],
body.app:not(.sidebar-minimized):has([ng-controller="ReportOrdersController"]) .sidebar .nav-link[href="#/reports/sales_orders"],
body.app:not(.sidebar-minimized):has([ng-controller="ReportTrackerSalesController"]) .sidebar .nav-link[href="#/reports/sales_trackers"],
body.app:not(.sidebar-minimized):has([ng-controller="ResellerController"]) .sidebar .nav-link[href="#/resellers"],
body.app:not(.sidebar-minimized):has([ng-controller="SimcardController"]) .sidebar .nav-link[href="#/simcards"],
body.app:not(.sidebar-minimized):has([ng-controller="SimcardsExchangeController"]) .sidebar .nav-link[href="#/simcards/exchange"],
body.app:not(.sidebar-minimized):has([ng-controller="SimcardSharingController"]) .sidebar .nav-link[href="#/simcards/sharing"],
body.app:not(.sidebar-minimized):has([ng-controller="SimcardSharingHistoryController"]) .sidebar .nav-link[href="#/simcards/sharing/history"],
body.app:not(.sidebar-minimized):has([ng-controller="SupportController"]) .sidebar .nav-link[href="#/support"],
body.app:not(.sidebar-minimized):has([ng-controller="TrackerController"]) .sidebar .nav-link[href="#/trackers"],
body.app:not(.sidebar-minimized):has([ng-controller="TrackerConfigController"]) .sidebar .nav-link[href="#/trackers/config"],
body.app:not(.sidebar-minimized):has([ng-controller="UserController"]) .sidebar .nav-link[href="#/users"],
body.app:not(.sidebar-minimized):has([ng-controller="AdimUserController"]) .sidebar .nav-link[href="#/users/admin"] {
  background: var(--lx-active-bg);
  box-shadow: inset 0 0 0 1px var(--lx-active-line);
}

/* Rastreadores como página atual no submenu: o ícone é imagem de fundo, então o
   quadradinho azul-escuro precisa trazer a versão branca do traço */
body.app.sidebar-minimized:has([ng-controller="TrackerController"]) .sidebar .nav-dropdown-items .nav-link[href="#/trackers"] .nav-icon:has(> img[src*="ico_rastreador"]) {
  background: var(--lx-navy) url("../img/icons_rastreador/ico_rastreador-linha-branco.svg") no-repeat center / 20px 20px;
}

/* ---- Compartilhamento de Dados (#/simcards/sharing) ----
   Não é filtro: é a transferência de dados de uma linha (Saída) para outra
   (Entrada). Vira um cartão em 2 lados: linha e plano de cada SIM Card; o
   −/+ fica entre os dois planos; ações na base, salvar à direita. */
body.app [ng-controller="SimcardSharingController"] > .container-fluid > .row:first-child {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  column-gap: 20px;
  row-gap: 26px;
  margin: 0 0 24px;
  padding: 30px 24px 24px;
  background: var(--lx-surface);
  border: 1px solid var(--lx-line);
  border-radius: var(--lx-r-lg);
  box-shadow: var(--lx-shadow-1);
}
body.app [ng-controller="SimcardSharingController"] > .container-fluid > .row:first-child > [class*="col"] {
  max-width: none;
  padding: 0;
  margin: 0;
}
body.app [ng-controller="SimcardSharingController"] > .container-fluid > .row:first-child > .col-md-6:nth-child(1) { grid-column: 1; }
body.app [ng-controller="SimcardSharingController"] > .container-fluid > .row:first-child > .col-md-6:nth-child(2) { grid-column: 3; }
body.app [ng-controller="SimcardSharingController"] > .container-fluid > .row:first-child > .col-md-5:nth-child(3) { grid-column: 1; }
body.app [ng-controller="SimcardSharingController"] > .container-fluid > .row:first-child > .col-md-2 { grid-column: 2; align-self: start; }
body.app [ng-controller="SimcardSharingController"] > .container-fluid > .row:first-child > .col-md-5:nth-child(5) { grid-column: 3; }
body.app [ng-controller="SimcardSharingController"] > .container-fluid > .row:first-child > .col-md-12 { grid-column: 1 / -1; }
/* seta de "Saída → Entrada" no meio da primeira linha */
body.app [ng-controller="SimcardSharingController"] > .container-fluid > .row:first-child::before {
  content: "→";
  grid-column: 2;
  grid-row: 1;
  align-self: start;
  justify-self: center;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  color: var(--lx-icon);
  font-size: 20px;
}
body.app [ng-controller="SimcardSharingController"] .form-group { margin: 0 !important; }
body.app [ng-controller="SimcardSharingController"] .form-control { height: 46px; }
/* saldos abaixo do campo */
body.app [ng-controller="SimcardSharingController"] .form-group > .badge { margin: 8px 6px 0 0; height: 24px; display: inline-flex; align-items: center; padding: 0 9px; border-radius: 6px; font-size: 11px; font-weight: 600; }
/* −/+ : dois botões quadrados de 46px, colados, cinza neutro */
body.app [ng-controller="SimcardSharingController"] .col-md-2 > br { display: none; }
body.app [ng-controller="SimcardSharingController"] .col-md-2 > .btn-group { display: inline-flex; border: 1px solid var(--lx-line); border-radius: var(--lx-r); overflow: hidden; }
body.app [ng-controller="SimcardSharingController"] .col-md-2 > .btn-group > .btn {
  width: 46px;
  height: 44px;
  padding: 0;
  border: 0 !important;
  border-radius: 0 !important;
  background: var(--lx-surface) !important;
  color: var(--lx-navy) !important;
  font-size: 20px;
  font-weight: 500;
  box-shadow: none !important;
}
body.app [ng-controller="SimcardSharingController"] .col-md-2 > .btn-group > .btn + .btn { border-left: 1px solid var(--lx-line) !important; }
body.app [ng-controller="SimcardSharingController"] .col-md-2 > .btn-group > .btn:hover { background: var(--lx-active-bg) !important; }
/* ações: vídeo à esquerda como link discreto; Voltar e Salvar à direita */
body.app [ng-controller="SimcardSharingController"] .col-md-12 > .row {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  gap: 12px;
  margin: 0;
  padding-top: 20px;
  border-top: 1px solid var(--lx-line);
}
body.app [ng-controller="SimcardSharingController"] .col-md-12 > .row > [class*="col"] { flex: none; width: auto; max-width: none; padding: 0; }
body.app [ng-controller="SimcardSharingController"] .col-md-12 > .row > .col-md-5:last-child { margin-right: auto; }
body.app [ng-controller="SimcardSharingController"] .col-md-12 > .row .btn { height: 46px; display: inline-flex; align-items: center; justify-content: center; padding: 0 22px; }
body.app [ng-controller="SimcardSharingController"] .col-md-12 > .row .btn-success { min-width: 160px; }
body.app [ng-controller="SimcardSharingController"] .col-md-12 > .row .btn-info {
  background: transparent !important;
  border-color: transparent !important;
  color: var(--lx-blue) !important;
  padding: 0 4px;
  box-shadow: none !important;
}
body.app [ng-controller="SimcardSharingController"] .col-md-12 > .row .btn-info:hover { color: var(--lx-navy) !important; }
@media (max-width: 767px) {
  body.app [ng-controller="SimcardSharingController"] > .container-fluid > .row:first-child { grid-template-columns: minmax(0, 1fr); }
  body.app [ng-controller="SimcardSharingController"] > .container-fluid > .row:first-child > [class*="col"],
  body.app [ng-controller="SimcardSharingController"] > .container-fluid > .row:first-child::before { grid-column: 1 !important; grid-row: auto; }
  body.app [ng-controller="SimcardSharingController"] > .container-fluid > .row:first-child::before { content: "↓"; }
  body.app [ng-controller="SimcardSharingController"] .col-md-12 > .row { flex-direction: column-reverse; align-items: stretch; }
  body.app [ng-controller="SimcardSharingController"] .col-md-12 > .row > .col-md-5:last-child { margin-right: 0; }
}
/* resposta vazia da transferência não ocupa espaço */
body.app [ng-controller="SimcardSharingController"] #sharing_response:empty { display: none; }
body.app [ng-controller="SimcardSharingController"] .col-md-2 > .btn-group > .btn { font-size: 22px !important; line-height: 1 !important; }

/* ==========================================================================
   Avisos: toastr (canto superior direito) e SweetAlert2 (confirmações)
   O Lara chama toastr.success/error/warning/info (~470 chamadas) e Swal.fire
   (~26). O CSS do Swal vem embutido no JS; por isso algumas regras usam !important.
   ========================================================================== */
#toast-container { top: 72px !important; right: 20px !important; }
#toast-container > .toast {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 360px;
  min-height: 64px;
  margin: 0 0 10px;
  padding: 14px 40px 14px 64px !important;
  border: 1px solid var(--lx-line);
  border-radius: 12px;
  background-image: none !important;
  background-color: #fff;
  color: var(--lx-text);
  font-size: 13px;
  line-height: 1.45;
  box-shadow: 0 12px 32px -8px rgba(16, 24, 40, .22) !important;
  opacity: 1 !important;
  overflow: hidden;
  animation: lx-toast-in .28s cubic-bezier(.2, .8, .2, 1);
}
#toast-container > .toast:hover { box-shadow: 0 16px 40px -8px rgba(16, 24, 40, .28) !important; }
@keyframes lx-toast-in { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }
/* ícone num quadradinho com a cor do tipo; o cartão inteiro leva um tom leve da mesma cor */
#toast-container > .toast::before {
  content: "";
  position: absolute;
  left: 14px;
  top: 50%;
  width: 36px;
  height: 36px;
  margin-top: -18px;
  border-radius: 10px;
  background: var(--lx-t-cor) var(--lx-t-ico) no-repeat center / 18px 18px;
}
#toast-container > .toast-success { --lx-t-cor: var(--lx-green); background-color: #f2fbf6; border-color: #c9ecd8; }
#toast-container > .toast-error   { --lx-t-cor: #d64545;         background-color: #fdf3f3; border-color: #f4cccc; }
#toast-container > .toast-warning { --lx-t-cor: var(--lx-amber); background-color: #fefaf0; border-color: #f6e2b3; }
#toast-container > .toast-info    { --lx-t-cor: var(--lx-blue);  background-color: #f2f8fd; border-color: #cbe1f2; }
#toast-container > .toast-success { --lx-t-ico: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E"); }
#toast-container > .toast-error   { --lx-t-ico: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M7 7l10 10M17 7L7 17'/%3E%3C/svg%3E"); }
#toast-container > .toast-warning { --lx-t-ico: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 6v8'/%3E%3Ccircle cx='12' cy='18.5' r='.6' fill='%23fff'/%3E%3C/svg%3E"); }
#toast-container > .toast-info    { --lx-t-ico: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 11v7'/%3E%3Ccircle cx='12' cy='6.5' r='.6' fill='%23fff'/%3E%3C/svg%3E"); }
#toast-container > .toast .toast-title { color: var(--lx-navy); font-weight: 600; font-size: 13.5px; margin-bottom: 1px; }
#toast-container > .toast .toast-message { color: var(--lx-text); word-wrap: break-word; }
#toast-container > .toast .toast-message a { color: var(--lx-blue); text-decoration: none; }
#toast-container > .toast .toast-close-button {
  position: absolute;
  top: 10px;
  right: 10px;
  float: none;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  color: var(--lx-muted);
  font-size: 18px;
  font-weight: 400;
  line-height: 22px;
  text-align: center;
  text-shadow: none;
  opacity: .8;
}
#toast-container > .toast .toast-close-button:hover { background: rgba(16, 24, 40, .06); color: var(--lx-navy); opacity: 1; }
#toast-container > .toast .toast-progress { height: 3px; background: var(--lx-t-cor); opacity: .45; }
@media (max-width: 480px) {
  #toast-container { left: 12px !important; right: 12px !important; }
  #toast-container > .toast { width: auto; }
}

/* SweetAlert2 */
body .swal2-container.swal2-backdrop-show { background: rgba(10, 45, 66, .38) !important; backdrop-filter: blur(2px); }
body .swal2-popup {
  width: 440px !important;
  max-width: calc(100vw - 32px);
  padding: 28px 28px 24px !important;
  border-radius: 16px !important;
  font-family: inherit !important;
  box-shadow: 0 24px 60px -12px rgba(10, 45, 66, .35);
}
body .swal2-popup .swal2-icon { margin: 4px auto 16px !important; transform: scale(.7); margin-top: -10px !important; margin-bottom: 0 !important; }
body .swal2-popup .swal2-icon.swal2-warning  { border-color: #f6d58a !important; color: var(--lx-amber) !important; background: #fefaf0; }
body .swal2-popup .swal2-icon.swal2-error    { border-color: #f1b8b8 !important; background: #fdf3f3; }
body .swal2-popup .swal2-icon.swal2-question,
body .swal2-popup .swal2-icon.swal2-info     { border-color: #b9d6ee !important; color: var(--lx-blue) !important; background: #f2f8fd; }
body .swal2-popup .swal2-icon.swal2-success  { border-color: #b7e3cb !important; }
body .swal2-popup .swal2-title { padding: 0 !important; color: var(--lx-navy) !important; font-size: 20px !important; font-weight: 600 !important; line-height: 1.3; }
body .swal2-popup .swal2-html-container { margin: 10px 0 0 !important; padding: 0 !important; color: var(--lx-muted) !important; font-size: 14px !important; line-height: 1.55; }
body .swal2-popup .swal2-actions { width: 100%; gap: 10px; margin: 24px 0 0 !important; flex-direction: row-reverse; }
body .swal2-popup .swal2-actions .swal2-styled {
  flex: 1 1 0;
  height: 46px;
  margin: 0 !important;
  padding: 0 20px !important;
  border-radius: var(--lx-r) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  box-shadow: none !important;
}
body .swal2-popup .swal2-actions .swal2-confirm { background: var(--lx-navy) !important; border: 1px solid var(--lx-navy) !important; color: #fff !important; }
body .swal2-popup .swal2-actions .swal2-confirm:hover { background: #12405c !important; }
/* ações destrutivas: o Lara pede confirmar em vermelho (confirmButtonColor "#d33" ou "#dc3741");
   o Swal grava a cor no style do botão, então dá para reconhecer e usar o vermelho do Lara novo */
body .swal2-popup .swal2-actions .swal2-confirm:is([style*="221, 51, 51"], [style*="220, 55, 65"], [style*="#d33"], [style*="#dc3741"]) { background: #d64545 !important; border-color: #d64545 !important; }
body .swal2-popup .swal2-actions .swal2-confirm:is([style*="221, 51, 51"], [style*="220, 55, 65"], [style*="#d33"], [style*="#dc3741"]):hover { background: #b93a3a !important; }
/* três botões (ex.: Chips / Plataforma / Cancelar): Cancelar desce para uma linha própria */
body .swal2-popup .swal2-actions:has(.swal2-deny:not([style*="display: none"])):has(.swal2-cancel:not([style*="display: none"])) { flex-wrap: wrap; }
body .swal2-popup .swal2-actions:has(.swal2-deny:not([style*="display: none"])):has(.swal2-cancel:not([style*="display: none"])) .swal2-cancel { flex-basis: 100%; order: 9; border-color: transparent !important; color: var(--lx-muted) !important; }
body .swal2-popup .swal2-actions .swal2-cancel,
body .swal2-popup .swal2-actions .swal2-deny { background: #fff !important; border: 1px solid var(--lx-line) !important; color: var(--lx-text) !important; }
body .swal2-popup .swal2-actions .swal2-cancel:hover,
body .swal2-popup .swal2-actions .swal2-deny:hover { background: var(--lx-surface-2) !important; }
body .swal2-popup .swal2-actions .swal2-styled:focus-visible { outline: 2px solid var(--lx-active-line) !important; outline-offset: 2px; }
body .swal2-popup .swal2-input,
body .swal2-popup .swal2-select,
body .swal2-popup .swal2-textarea {
  width: 100%;
  height: 46px;
  margin: 18px 0 0 !important;
  padding: 0 14px;
  border: 1px solid var(--lx-line) !important;
  border-radius: var(--lx-r) !important;
  box-shadow: none !important;
  font-size: 14px !important;
  color: var(--lx-text);
}
body .swal2-popup .swal2-input:focus,
body .swal2-popup .swal2-select:focus { border-color: var(--lx-blue) !important; box-shadow: 0 0 0 3px var(--lx-active-bg) !important; }
body .swal2-popup .swal2-validation-message { margin: 14px 0 0 !important; border-radius: var(--lx-r); background: #fdf3f3 !important; color: #b42318 !important; font-size: 13px; }
body .swal2-popup .swal2-close { top: 10px; right: 10px; width: 32px; height: 32px; border-radius: 8px; color: var(--lx-muted); font-size: 24px; }
body .swal2-popup .swal2-close:hover { background: var(--lx-surface-2); color: var(--lx-navy); }

/* ---- Submenu que não cabe embaixo abre para cima ----
   Posicionamento por âncora (CSS puro): o painel dos subitens fica preso ao
   rótulo do item; se não couber abaixo dele na janela, o navegador vira o
   painel para cima do rótulo (flip-block). Em navegador sem suporte, nada muda. */
@supports (position-try-fallbacks: flip-block) {
  body.app.sidebar-minimized .sidebar .nav > .nav-dropdown:hover > .nav-link { anchor-name: --lx-menu; }
  body.app.sidebar-minimized .sidebar .nav > .nav-dropdown:hover > .nav-dropdown-items {
    position: fixed;
    position-anchor: --lx-menu;
    top: anchor(bottom);
    bottom: auto;
    left: calc(anchor(left) + 60px);
    margin: 0;
    position-try-fallbacks: flip-block;
  }
}
@supports (container-type: anchored) {
  /* painel virado para cima: o encaixe com o rótulo também inverte
     (tracejado embaixo, quina arredondada em cima, sombra para o alto) */
  body.app.sidebar-minimized .sidebar .nav > .nav-dropdown:hover > .nav-dropdown-items {
    container-type: anchored;
    margin-top: -1px;
    z-index: 1;
    overflow: visible !important;   /* senão corta a borda e a sombra da moldura */
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
  }
  /* a moldura do painel vira um ::before, para poder inverter quando ele vira */
  body.app.sidebar-minimized .sidebar .nav > .nav-dropdown:hover > .nav-dropdown-items::before {
    content: "";
    position: absolute;
    inset: -1px;
    z-index: -1;
    background: var(--lx-surface);
    border: 1px solid var(--lx-line);
    border-top-style: dashed;
    border-radius: 0 0 12px 0;
    box-shadow: 14px 18px 34px -12px rgba(10, 45, 66, .22);
    pointer-events: none;
  }
  @container anchored(fallback: flip-block) {
    body.app.sidebar-minimized .sidebar .nav > .nav-dropdown:hover > .nav-dropdown-items::before {
      border-top-style: solid;
      border-bottom-style: dashed;
      border-radius: 0 12px 0 0;
      box-shadow: 14px -10px 34px -12px rgba(10, 45, 66, .22);
    }
    body.app.sidebar-minimized .sidebar .nav > .nav-dropdown:hover > .nav-dropdown-items::after {
      content: "";
      position: absolute;
      right: -1px;
      bottom: -13px;
      width: 13px;
      height: 13px;
      background: var(--lx-surface);
      border-right: 1px solid var(--lx-line);
    }
  }
}

/* Compartilhamento: − e + mantêm a cor (vermelho tira, verde põe), no estilo tingido */
body.app [ng-controller="SimcardSharingController"] .col-md-2 > .btn-group { border-color: transparent; gap: 6px; overflow: visible; }
body.app [ng-controller="SimcardSharingController"] .col-md-2 > .btn-group > .btn { height: 46px; border-radius: var(--lx-r) !important; font-weight: 600; }
body.app [ng-controller="SimcardSharingController"] .col-md-2 > .btn-group > .btn + .btn { border-left: 0 !important; }
body.app [ng-controller="SimcardSharingController"] .col-md-2 > .btn-group > .btn-danger  { background: #fdf3f3 !important; color: #c23b3b !important; box-shadow: inset 0 0 0 1px #f4cccc !important; }
body.app [ng-controller="SimcardSharingController"] .col-md-2 > .btn-group > .btn-success { background: #f2fbf6 !important; color: #1a8554 !important; box-shadow: inset 0 0 0 1px #c9ecd8 !important; }
body.app [ng-controller="SimcardSharingController"] .col-md-2 > .btn-group > .btn-danger:hover  { background: #fbe4e4 !important; }
body.app [ng-controller="SimcardSharingController"] .col-md-2 > .btn-group > .btn-success:hover { background: #e2f6ea !important; }
/* o "-" do HTML é hífen (curto); troca pelo sinal de menos, do tamanho do + */
body.app [ng-controller="SimcardSharingController"] .col-md-2 > .btn-group > .btn-danger { font-size: 0 !important; }
body.app [ng-controller="SimcardSharingController"] .col-md-2 > .btn-group > .btn-danger::before { content: "\2212"; font-size: 22px; line-height: 1; }

/* Home (/bills): barras de consumo mais grossas */
body.app [ng-controller="HomeController"] .progress { height: 18px; border-radius: 999px; }
body.app [ng-controller="HomeController"] .progress-bar { min-width: 6px; border-radius: 999px; }
body.app [ng-controller="HomeController"] .progress-bar.text-dark { line-height: 18px; font-size: .8125rem; }
/* valor pequeno: no mínimo um círculo (largura = altura), não uma pílula em pé;
   0% não desenha barra, só o texto */
body.app [ng-controller="HomeController"] .progress-bar { min-width: 18px; }
body.app [ng-controller="HomeController"] .progress-bar:is([aria-valuenow="0"], [aria-valuenow^="0."]) { min-width: 0; background: transparent; }

/* Compartilhamento de Dados: ícone de troca (\f349) girado para a horizontal
   (dados passando entre as linhas), no lugar do "share" de redes sociais */
body.app .sidebar .nav-link[href="#/simcards/sharing"] > .nav-icon::before {
  content: "\f349";
  display: inline-block;
  transform: scaleX(-1) rotate(-90deg);   /* horizontal e espelhado */
}
body.app [ng-controller="SimcardSharingController"] { --lx-ico: "\f349"; --lx-ico-font: "lx-uicons-tr"; --lx-ico-peso: 400; }
/* no cabeçalho o quadrado gira junto: degradê e sombra compensados para ficar igual aos outros */
body.app [ng-controller="SimcardSharingController"] .breadcrumb::before {
  transform: scaleX(-1) rotate(-90deg);
  background: linear-gradient(315deg, var(--lx-voxter) 0%, var(--lx-navy) 78%);
  box-shadow: -6px 0 14px -6px rgba(209, 77, 82, .45);
  font-size: 20px;
}

/* ---- Menu expandido: tudo em uma linha, ícone sempre antes do texto ---- */
body.app:not(.sidebar-minimized) .sidebar .nav-link {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  padding: 8px 30px 8px 12px;
  white-space: nowrap;
}
body.app:not(.sidebar-minimized) .sidebar .nav-link > .nav-icon {
  order: 0;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  margin: 0;
}
/* ícone do rastreador (imagem): mesma altura dos outros, senão o item cresce e a seta desalinha */
body.app:not(.sidebar-minimized) .sidebar .nav-link > .nav-icon > img { max-width: 20px; max-height: 20px; }
/* SIM Cards: o texto trocado por CSS vem depois do ícone */
body.app:not(.sidebar-minimized) .sidebar .nav > .nav-item > .nav-link[href="#/dashboard"]::before { order: 1; font-size: .875rem; }
/* nomes longos abreviados (só no menu expandido) */
body.app:not(.sidebar-minimized) .sidebar .nav-link:is([href="#/simcards/exchange"], [href="#/simcards/sharing/history"]) { font-size: 0 !important; }
body.app:not(.sidebar-minimized) .sidebar .nav-link:is([href="#/simcards/exchange"], [href="#/simcards/sharing/history"])::after {
  order: 1;
  font-size: .875rem;
  position: static;
}
body.app:not(.sidebar-minimized) .sidebar .nav-link[href="#/simcards/exchange"]::after { content: "Repo. de Linhas"; }
body.app:not(.sidebar-minimized) .sidebar .nav-link[href="#/simcards/sharing/history"]::after { content: "Hist. de Compart."; }
body.app:not(.sidebar-minimized) .sidebar .nav-link { width: auto !important; max-width: calc(100% - 16px); gap: 0; }
body.app:not(.sidebar-minimized) .sidebar .nav-link > .nav-icon { margin-right: 10px !important; }
body.app:not(.sidebar-minimized) .sidebar .nav-item { min-width: 0; max-width: 100%; }
body.app:not(.sidebar-minimized) .sidebar .nav-link { overflow: hidden; padding-right: 12px; font-size: .8125rem; }
body.app:not(.sidebar-minimized) .sidebar .nav-link.nav-dropdown-toggle { padding-right: 30px; }
body.app:not(.sidebar-minimized) .sidebar .nav > .nav-item > .nav-link[href="#/dashboard"]::before,
body.app:not(.sidebar-minimized) .sidebar .nav-link:is([href="#/simcards/exchange"], [href="#/simcards/sharing/history"])::after { font-size: .8125rem; }

/* ---- Menu expandido: logo e botão de recolher ----
   O Lara abre com o menu recolhido mas sem "brand-minimized"; o botão de
   recolher alterna as duas classes juntas, então ao EXPANDIR o menu o logo
   é que recolhia (cortado em 50px). O logo agora ignora essa classe. */
body.app.brand-minimized .app-header .navbar-brand { width: 155px; }
/* menu expandido acompanha a rolagem com a altura da janela: o botão de recolher
   fica sempre visível no rodapé e a lista rola por dentro se não couber */
@media (min-width: 992px) {
  body.app:not(.sidebar-minimized) .sidebar {
    position: sticky;
    top: 0;
    align-self: flex-start;
    height: calc(100vh - 55px);
  }
  body.app:not(.sidebar-minimized) .sidebar .sidebar-nav { overflow-y: auto; padding-bottom: 0; }
}

/* Relatórios: filtro e tabela soltos no fundo viram um cartão, como em Consumo de
   Dados (lá entra pela regra de formulário, porque o HTML usa .form-group; nos
   outros o rótulo fica direto na coluna e ficavam de fora) */
body.app .main [ng-controller^="Report"] > .container-fluid:not(:has(.card)):not(:has(.form-group)):has(> .row > [class*="col"] > label) {
  width: auto;
  margin: 0 30px 30px;
  padding: 30px 28px 26px;
  background: var(--lx-surface);
  border: 1px solid var(--lx-line);
  border-radius: 14px;
  box-shadow: var(--lx-shadow-1);
}

/* ==========================================================================
   Foco do teclado: contorno visível e igual em todo o sistema (Tab).
   Só aparece navegando pelo teclado (:focus-visible), não no clique.
   ========================================================================== */
body.app :is(a, button, .btn, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--lx-blue) !important;
  outline-offset: 2px;
  box-shadow: none;
}
body.app :is(input, select, textarea, .select2-selection):focus-visible { outline-offset: 0; }
body.app .sidebar .nav-link:focus-visible { outline-offset: -2px; border-radius: var(--lx-r); }

/* ==========================================================================
   Impressão (Ctrl+P / salvar em PDF): só o conteúdo, sem menu, topo e botões
   ========================================================================== */
@media print {
  @page { margin: 12mm; }
  body.app { background: #fff !important; }
  body.app .app-header,
  body.app .sidebar,
  body.app .app-footer,
  body.app #toast-container,
  body.app .breadcrumb-menu,
  body.app .btn,
  body.app .dt-buttons,
  body.app .dataTables_length,
  body.app .dataTables_filter,
  body.app .dataTables_paginate,
  body.app .dropdown-menu,
  body.app .modal-backdrop { display: none !important; }
  body.app .app-body { margin-top: 0 !important; }
  body.app .main { margin-left: 0 !important; padding: 0 !important; }
  body.app .main .container-fluid,
  body.app .main .card { margin: 0 0 8mm !important; padding: 0 !important; border: 0 !important; box-shadow: none !important; }
  /* cabeçalho da tela vira só o título, sem o quadrado do ícone */
  body.app .main .breadcrumb { margin: 0 0 6mm !important; padding: 0 !important; border: 0 !important; box-shadow: none !important; background: none !important; }
  body.app .main .breadcrumb::before { display: none !important; }
  body.app .main .breadcrumb-item { font-size: 16pt; }
  /* tabelas: linhas não se partem entre páginas e o cabeçalho repete em cada página */
  body.app table { width: 100% !important; font-size: 9pt; }
  body.app thead { display: table-header-group; }
  body.app tr { break-inside: avoid; }
  body.app .table th, body.app .table td { padding: 4px 6px !important; }
  /* cores de selos e barras saem impressas como na tela */
  body.app * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  /* sombras e animações não servem no papel */
  body.app *, body.app *::before, body.app *::after { box-shadow: none !important; animation: none !important; transition: none !important; }
}

/* ==========================================================================
   Estados: carregando, tabela vazia, erro de campo, dicas (tooltip)
   ========================================================================== */
@keyframes lx-gira { to { transform: rotate(360deg); } }

/* "Carregando..." / "Processando... Aguarde!" (blocos #loading, #loading2...):
   texto discreto com um indicador girando antes; a cor fixa do HTML sai */
body.app [id^="loading"]:is(div) { color: var(--lx-muted) !important; text-align: center; padding: 14px 0; }
body.app [id^="loading"] > :is(h4, h5) {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  color: var(--lx-text-2) !important;
  font-size: 14px;
  font-weight: 500;
}
body.app [id^="loading"] > :is(h4, h5)::before {
  content: "";
  flex: none;
  width: 16px;
  height: 16px;
  border: 2px solid var(--lx-active-line);
  border-top-color: var(--lx-blue);
  border-radius: 50%;
  animation: lx-gira .8s linear infinite;
}
/* aviso de processamento das tabelas (DataTables) */
body.app .dataTables_processing {
  display: inline-flex !important;
  align-items: center;
  gap: 10px;
  width: auto !important;
  margin: 0 !important;
  padding: 12px 18px !important;
  transform: translate(-50%, -50%);
  background: var(--lx-surface) !important;
  border: 1px solid var(--lx-line) !important;
  border-radius: 12px;
  box-shadow: 0 12px 32px -8px rgba(16, 24, 40, .22);
  color: var(--lx-text-2);
  font-size: 13px;
  font-weight: 500;
}
body.app .dataTables_processing[style*="display: none"] { display: none !important; }
body.app .dataTables_processing::before {
  content: "";
  width: 16px;
  height: 16px;
  border: 2px solid var(--lx-active-line);
  border-top-color: var(--lx-blue);
  border-radius: 50%;
  animation: lx-gira .8s linear infinite;
}
body.app .dataTables_processing > div { display: none; }   /* pontinhos do DataTables */

/* tabela sem resultados: ícone de caixa vazia e texto leve */
body.app table.dataTable td.dataTables_empty {
  padding: 40px 16px 36px !important;
  color: var(--lx-muted) !important;
  background: var(--lx-surface) !important;
  font-size: 14px;
  text-align: center;
}
body.app table.dataTable td.dataTables_empty::before {
  content: "\eaff";   /* inbox */
  display: block;
  margin: 0 auto 10px;
  font-family: "lx-uicons-tr";
  font-size: 32px;
  line-height: 1;
  color: #c4ccd8;
}

/* campo com erro (Bootstrap .is-invalid e validação do Angular depois de tocado) */
body.app :is(.form-control, .custom-select):is(.is-invalid, .ng-invalid.ng-touched) {
  border-color: #e5a3a3 !important;
  background-color: #fffafa;
}
body.app :is(.form-control, .custom-select):is(.is-invalid, .ng-invalid.ng-touched):focus {
  border-color: #d64545 !important;
  box-shadow: 0 0 0 3px #fbe4e4 !important;
}
body.app .form-group:has(> :is(.form-control, .custom-select):is(.is-invalid, .ng-invalid.ng-touched)) > label { color: #b42318 !important; }
body.app .invalid-feedback { margin-top: 6px; color: #b42318; font-size: 12px; }
body.app .form-control.is-valid { border-color: #9fd8b9 !important; background-image: none; }
/* lista de erros que algumas telas mostram abaixo do formulário */
body.app .list-group-item-danger { background: #fdf3f3; border-color: #f4cccc; color: #b42318; }

/* dicas ao passar o mouse (tooltip do Bootstrap) */
body.app .tooltip { font-family: inherit; }
body.app .tooltip .tooltip-inner {
  max-width: 260px;
  padding: 7px 10px;
  border-radius: 8px;
  background: var(--lx-navy);
  color: #fff;
  font-size: 12px;
  line-height: 1.45;
  text-align: left;
  box-shadow: 0 8px 20px -6px rgba(10, 45, 66, .35);
}
body.app .tooltip.show { opacity: 1; }
body.app .bs-tooltip-top .arrow::before,    body.app .bs-tooltip-auto[x-placement^="top"] .arrow::before    { border-top-color: var(--lx-navy); }
body.app .bs-tooltip-bottom .arrow::before, body.app .bs-tooltip-auto[x-placement^="bottom"] .arrow::before { border-bottom-color: var(--lx-navy); }
body.app .bs-tooltip-left .arrow::before,   body.app .bs-tooltip-auto[x-placement^="left"] .arrow::before   { border-left-color: var(--lx-navy); }
body.app .bs-tooltip-right .arrow::before,  body.app .bs-tooltip-auto[x-placement^="right"] .arrow::before  { border-right-color: var(--lx-navy); }

/* ---- Página de erro (#/error: toda rota inexistente cai aqui) ----
   O template não tem controller nem classe própria: é reconhecido pelo
   bloco "h1.display-3 + h4 + p". Vira um cartão central com ícone. */
/* o bloco ocupa a altura visível abaixo do topo (55px) e centra o cartão nela,
   acompanhando a altura da janela */
body.app .main .container:has(> .row > [class*="col"] > .clearfix > h1.display-3 + h4) {
  display: grid;
  align-content: center;
  min-height: calc(100dvh - 55px);
  padding-block: 24px;
}
body.app .main .container > .row > [class*="col"] > .clearfix:has(> h1.display-3 + h4) {
  display: grid;
  justify-items: center;
  gap: 6px;
  margin: 0 auto;
  max-width: 440px;
  padding: 40px 32px 36px;
  background: var(--lx-surface);
  border: 1px solid var(--lx-line);
  border-radius: 16px;
  box-shadow: var(--lx-shadow-1);
  text-align: center;
}
body.app .main .clearfix:has(> h1.display-3 + h4)::before {
  content: "\e580";   /* bússola cortada: "você está perdido" */
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  margin-bottom: 10px;
  border-radius: 18px;
  background: var(--lx-active-bg);
  color: var(--lx-blue);
  font-family: "lx-uicons-tr";
  font-size: 30px;
}
body.app .main .clearfix:has(> h1.display-3 + h4) > h1.display-3 {
  float: none !important;
  margin: 0 !important;
  font-size: 56px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.02em;
  background: linear-gradient(135deg, var(--lx-voxter), var(--lx-navy));
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}
body.app .main .clearfix:has(> h1.display-3 + h4) > h4 { margin: 10px 0 0; padding: 0 !important; color: var(--lx-navy); font-size: 18px; font-weight: 600; }
body.app .main .clearfix:has(> h1.display-3 + h4) > p { margin: 0; color: var(--lx-muted) !important; font-size: 14px; }

/* ---- Tabela que rola para o lado (opção D aprovada: colunas presas + setas) ----
   Só com CSS. Se a tabela cabe inteira, não há rolagem e nada disso aparece.
   1. A primeira coluna e a coluna de ações (última, quando tem botão/menu) ficam
      presas nas bordas; o resto passa por baixo, com sombra do lado em que ainda
      há colunas escondidas (acompanha a rolagem por animation-timeline).
   2. Setas redondas nas bordas, na altura do cabeçalho, que rolam a tabela de
      verdade (::scroll-button) e somem na ponta em que não há mais colunas.
   Navegador sem suporte: as colunas presas valem; sombra e setas não aparecem. */
body.app .main :is(.table-responsive, .dataTables_scrollBody, .dataTables_wrapper:has(> table.nowrap), [style*="overflow-x: auto"], [style*="overflow: auto"]) table > :is(thead, tbody) > tr > :is(th, td):first-child,
body.app .main :is(.table-responsive, .dataTables_scrollBody, .dataTables_wrapper:has(> table.nowrap), [style*="overflow-x: auto"], [style*="overflow: auto"]) table:has(> tbody > tr > td:last-child :is(.btn-group, .btn, .dropdown)) > :is(thead, tbody) > tr > :is(th, td):last-child {
  position: sticky;
  z-index: 2;
  background-color: var(--lx-surface);
}
body.app .main :is(.table-responsive, .dataTables_scrollBody, .dataTables_wrapper:has(> table.nowrap), [style*="overflow-x: auto"], [style*="overflow: auto"]) table > thead > tr > th:is(:first-child, :last-child) { background-color: var(--lx-surface-2); }
body.app .main :is(.table-responsive, .dataTables_scrollBody, .dataTables_wrapper:has(> table.nowrap), [style*="overflow-x: auto"], [style*="overflow: auto"]) table > tbody > tr:hover > td:is(:first-child, :last-child) { background-color: #f6f8fb; }
body.app .main :is(.table-responsive, .dataTables_scrollBody, .dataTables_wrapper:has(> table.nowrap), [style*="overflow-x: auto"], [style*="overflow: auto"]) table > :is(thead, tbody) > tr > :is(th, td):first-child { left: 0; }
body.app .main :is(.table-responsive, .dataTables_scrollBody, .dataTables_wrapper:has(> table.nowrap), [style*="overflow-x: auto"], [style*="overflow: auto"]) table > :is(thead, tbody) > tr > :is(th, td):last-child { right: 0; }
@supports (animation-timeline: scroll()) {
  body.app .main :is(.table-responsive, .dataTables_scrollBody, .dataTables_wrapper:has(> table.nowrap), [style*="overflow-x: auto"], [style*="overflow: auto"]) table > :is(thead, tbody) > tr > :is(th, td):first-child {
    animation: lx-rol-sombra-esq linear both;
    animation-timeline: scroll(nearest inline);
  }
  body.app .main :is(.table-responsive, .dataTables_scrollBody, .dataTables_wrapper:has(> table.nowrap), [style*="overflow-x: auto"], [style*="overflow: auto"]) table:has(> tbody > tr > td:last-child :is(.btn-group, .btn, .dropdown)) > :is(thead, tbody) > tr > :is(th, td):last-child {
    animation: lx-rol-sombra-dir linear both;
    animation-timeline: scroll(nearest inline);
  }
}
@keyframes lx-rol-sombra-esq {
  0%        { box-shadow: none; }
  4%, 100%  { box-shadow: 14px 0 16px -10px rgba(10, 45, 66, .28), inset -1px 0 0 var(--lx-line); }
}
@keyframes lx-rol-sombra-dir {
  0%, 96%   { box-shadow: -14px 0 16px -10px rgba(10, 45, 66, .28), inset 1px 0 0 var(--lx-line); }
  100%      { box-shadow: none; }
}
@supports (anchor-name: --a) {
  body.app .main :is(.table-responsive, .dataTables_scrollBody, .dataTables_wrapper:has(> table.nowrap), [style*="overflow-x: auto"], [style*="overflow: auto"]) { anchor-name: --lx-rol; anchor-scope: --lx-rol; scroll-behavior: smooth; }   /* anchor-scope: cada tabela é âncora só das próprias setas */
  body.app .main :is(.table-responsive, .dataTables_scrollBody, .dataTables_wrapper:has(> table.nowrap), [style*="overflow-x: auto"], [style*="overflow: auto"])::scroll-button(*) {
    position: absolute;
    position-anchor: --lx-rol;
    top: calc(anchor(top) + 22px);       /* na altura do cabeçalho da tabela */
    z-index: 5;
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 999px;
    background: var(--lx-navy);
    box-shadow: 0 6px 16px -4px rgba(10, 45, 66, .45);
    color: #fff;
    font: 600 18px/38px var(--lx-font);
    text-align: center;
    cursor: pointer;
    transition: opacity .15s ease, transform .15s ease, background .15s ease;
  }
  body.app .main :is(.table-responsive, .dataTables_scrollBody, .dataTables_wrapper:has(> table.nowrap), [style*="overflow-x: auto"], [style*="overflow: auto"])::scroll-button(left)  { content: "‹" / "Colunas à esquerda"; left: calc(anchor(left) - 12px); }
  body.app .main :is(.table-responsive, .dataTables_scrollBody, .dataTables_wrapper:has(> table.nowrap), [style*="overflow-x: auto"], [style*="overflow: auto"])::scroll-button(right) { content: "›" / "Mais colunas à direita"; right: calc(anchor(right) - 12px); left: auto; }
  body.app .main :is(.table-responsive, .dataTables_scrollBody, .dataTables_wrapper:has(> table.nowrap), [style*="overflow-x: auto"], [style*="overflow: auto"])::scroll-button(*):hover { background: var(--lx-blue); transform: scale(1.08); }
  body.app .main :is(.table-responsive, .dataTables_scrollBody, .dataTables_wrapper:has(> table.nowrap), [style*="overflow-x: auto"], [style*="overflow: auto"])::scroll-button(*):disabled { opacity: 0; pointer-events: none; }
}

/* barra de progresso do envio de arquivo: some em 0% (o Lara deixava a barra
   vazia sempre visível) e, durante o envio, fica fina e afastada do botão */
body.app input[type="file"] ~ .progress { height: 6px !important; margin-top: 10px !important; border-radius: 999px; background: var(--lx-surface-2); }
body.app input[type="file"] ~ .progress:has(> .progress-bar:is([style*="width: 0%"], [style*="width:0%"])) { display: none !important; }
/* rótulo de campo de arquivo dentro de <form> interno (ex.: Anexo da Campanha): mesmo título dos outros campos */
body.app .main .form-group > form > label:has(+ input[type="file"]) {
  display: block;
  margin: 0 0 6px 2px;
  color: var(--lx-text-2);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
}


/* campo de arquivo que também é .form-control (ex.: Anexo da Campanha): a altura
   de campo comum (34px) cortava o botão; volta aos 46px da área de anexo */
body.app .main input[type="file"].form-control { height: 46px !important; min-height: 46px; padding: 6px !important; line-height: 32px; }

/* ==========================================================================
   Radios: cartões de opção (escolha D)
   Cada opção é um cartão com marcador redondo; o escolhido ganha borda e
   fundo azul-claro. Nenhum radio tradicional.
   O HTML do Lara é irregular (rótulo com "for" certo, com "for" para um id
   que não existe, ou sem "for"). Por isso o radio de verdade fica invisível
   e esticado por cima do cartão inteiro: o clique em qualquer ponto marca a
   opção, sem depender do "for". O marcador é desenhado no rótulo.
   ========================================================================== */

/* desenho comum: o marcador redondo (vazio / com ponto) */
body.app .form-check > input[type="radio"] + label::before {
  content: "";
  flex: none;
  width: 16px;
  height: 16px;
  border: 1.5px solid #b9c6d4;
  border-radius: 50%;
  background: #fff;
  transition: border-color .15s ease, box-shadow .15s ease;
}
body.app .form-check > input[type="radio"]:checked + label::before {
  border-color: var(--lx-navy);
  box-shadow: inset 0 0 0 3px #fff, inset 0 0 0 8px var(--lx-navy);
}
body.app .form-check > input[type="radio"] + label {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  color: var(--lx-text-2);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0;
  text-transform: none;
}

/* 1) uma opção por caixa (.form-check / .form-check-inline): a caixa é o cartão */
body.app .form-check:has(> input[type="radio"]:only-of-type) {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 46px;
  margin: 0 8px 8px 0 !important;
  padding: 8px 16px 8px 14px !important;
  border: 1px solid var(--lx-line-strong, #d5dde6);
  border-radius: 10px;
  background: var(--lx-surface);
  vertical-align: middle;
  transition: border-color .15s ease, background-color .15s ease;
}
body.app .form-check:has(> input[type="radio"]:only-of-type:hover) { border-color: #b9c6d4; }
body.app .form-check:has(> input[type="radio"]:only-of-type:checked) {
  border-color: var(--lx-navy);
  background: var(--lx-active-bg);
  box-shadow: inset 0 0 0 1px var(--lx-navy);
}
body.app .form-check:has(> input[type="radio"]:only-of-type:checked) > label { color: var(--lx-navy); }
body.app .form-check:has(> input[type="radio"]:only-of-type:focus-visible) { outline: 2px solid var(--lx-blue); outline-offset: 2px; }
body.app .form-check > input[type="radio"]:only-of-type {
  position: absolute !important;
  inset: 0;
  z-index: 1;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  opacity: 0;
  cursor: pointer;
}

/* o grupo (coluna com "Tipo de Cadastro:" + opções) fica numa linha, título à esquerda */
body.app .main :is(.col-form-label, [class*="col"], .modal-body):has(> .form-check > input[type="radio"]:only-of-type) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 0;
  row-gap: 0;
}

/* 2) várias opções soltas na mesma caixa (Campanha, Importação): cada rótulo
   é um cartão, em grade; o radio fica sobre o seu rótulo por âncora.
   Sem suporte a âncora, nada disto se aplica e os radios ficam nativos. */
@supports (anchor-name: --a) {
  body.app .form-check:has(> input[type="radio"] ~ input[type="radio"]) {
    position: relative;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 8px;
    margin: 0;
    padding: 0 !important;
    font-size: 0;                 /* some com os &nbsp; soltos entre as opções */
  }
  body.app .form-check:has(> input[type="radio"] ~ input[type="radio"]) > br { display: none; }
  body.app .form-check:has(> input[type="radio"] ~ input[type="radio"]) > label {
    min-height: 46px;
    padding: 8px 14px;
    border: 1px solid var(--lx-line-strong, #d5dde6);
    border-radius: 10px;
    background: var(--lx-surface);
    transition: border-color .15s ease, background-color .15s ease;
  }
  body.app .form-check:has(> input[type="radio"] ~ input[type="radio"]) > input[type="radio"]:hover + label { border-color: #b9c6d4; }
  body.app .form-check:has(> input[type="radio"] ~ input[type="radio"]) > input[type="radio"]:checked + label {
    border-color: var(--lx-navy);
    background: var(--lx-active-bg);
    box-shadow: inset 0 0 0 1px var(--lx-navy);
    color: var(--lx-navy);
  }
  body.app .form-check:has(> input[type="radio"] ~ input[type="radio"]) > input[type="radio"]:focus-visible + label { outline: 2px solid var(--lx-blue); outline-offset: 2px; }
  body.app .form-check:has(> input[type="radio"] ~ input[type="radio"]) > input[type="radio"] {
    position: absolute !important;
    z-index: 1;
    top: anchor(top);
    left: anchor(left);
    width: anchor-size(width) !important;
    height: anchor-size(height) !important;
    margin: 0 !important;
    opacity: 0;
    cursor: pointer;
  }
  body.app .form-check > input[type="radio"]:nth-of-type(1) { position-anchor: --lx-op1; } body.app .form-check > label:nth-of-type(1) { anchor-name: --lx-op1; }
  body.app .form-check > input[type="radio"]:nth-of-type(2) { position-anchor: --lx-op2; } body.app .form-check > label:nth-of-type(2) { anchor-name: --lx-op2; }
  body.app .form-check > input[type="radio"]:nth-of-type(3) { position-anchor: --lx-op3; } body.app .form-check > label:nth-of-type(3) { anchor-name: --lx-op3; }
  body.app .form-check > input[type="radio"]:nth-of-type(4) { position-anchor: --lx-op4; } body.app .form-check > label:nth-of-type(4) { anchor-name: --lx-op4; }
  body.app .form-check > input[type="radio"]:nth-of-type(5) { position-anchor: --lx-op5; } body.app .form-check > label:nth-of-type(5) { anchor-name: --lx-op5; }
  body.app .form-check > input[type="radio"]:nth-of-type(6) { position-anchor: --lx-op6; } body.app .form-check > label:nth-of-type(6) { anchor-name: --lx-op6; }
  body.app .form-check > input[type="radio"]:nth-of-type(7) { position-anchor: --lx-op7; } body.app .form-check > label:nth-of-type(7) { anchor-name: --lx-op7; }
  body.app .form-check > input[type="radio"]:nth-of-type(8) { position-anchor: --lx-op8; } body.app .form-check > label:nth-of-type(8) { anchor-name: --lx-op8; }
  /* Campanha: o título "Método de Envio" é texto solto (sumiria com o font-size 0):
     volta como título acima dos cartões, igual aos outros campos */
  body.app [ng-controller="CampaignCreateController"] .form-check:has(> input[type="radio"] ~ input[type="radio"])::before {
    content: "Método de envio";
    grid-column: 1 / -1;
    margin: 0 0 -2px 2px;
    color: var(--lx-text-2);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
  }
}
@supports not (anchor-name: --a) {
  body.app .form-check:has(> input[type="radio"] ~ input[type="radio"]) > label::before { content: none; }
}
/* ajuste: grade trocada por linha que quebra (os &nbsp; soltos do HTML viravam
   células vazias da grade e espalhavam os cartões); cartões com largura parecida */
@supports (anchor-name: --a) {
  body.app .form-check:has(> input[type="radio"] ~ input[type="radio"]) { display: flex; flex-wrap: wrap; gap: 0; margin-right: -8px; }
  body.app .form-check:has(> input[type="radio"] ~ input[type="radio"]) > label { flex: 1 1 200px; max-width: 360px; margin: 0 8px 8px 0; }
  body.app [ng-controller="CampaignCreateController"] .form-check:has(> input[type="radio"] ~ input[type="radio"])::before { flex: 0 0 100%; margin: 0 0 8px 2px; }
}
/* título do grupo ("Tipo de Cadastro:"): mesmo estilo dos títulos de campo */
body.app .main :is(.col-form-label, [class*="col"], .modal-body):has(> .form-check > input[type="radio"]:only-of-type) {
  gap: 8px 10px;
  color: var(--lx-text-2);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
}
body.app .main :is(.col-form-label, [class*="col"], .modal-body):has(> .form-check > input[type="radio"]:only-of-type) > .form-check { margin: 0 !important; }
@supports (anchor-name: --a) {
  body.app .form-check:has(> input[type="radio"] ~ input[type="radio"]) > label { flex: 0 0 calc(50% - 8px); max-width: none; }
}
body.app .main :is(.col-form-label, [class*="col"], .modal-body):has(> .form-check > input[type="radio"]:only-of-type) { margin-bottom: 14px; }

/* ---- Reposição de Linhas (#/simcards/exchange) ----
   O card-body é ao mesmo tempo a linha de filtro e o lugar da tabela (col-12);
   a regra de filtro espremia a tabela numa coluna. Layout próprio: filtros e
   botões numa linha, tabela embaixo na largura toda. */
body.app [ng-controller="SimcardsExchangeController"] .card > .card-body.row {
  display: grid !important;
  grid-template-columns: minmax(180px, 1fr) minmax(320px, 2fr) auto auto;
  align-items: end;
  gap: 22px 12px;
  margin: 0 !important;
  padding: 30px 24px 24px !important;
}
body.app [ng-controller="SimcardsExchangeController"] .card > .card-body.row > [class*="col"] {
  width: auto !important;
  max-width: none !important;
  flex: none !important;
  margin: 0 !important;
  padding: 0 !important;
  grid-column: auto !important;
}
body.app [ng-controller="SimcardsExchangeController"] .card > .card-body.row > .col-12 { grid-column: 1 / -1 !important; margin-top: 4px !important; }
body.app [ng-controller="SimcardsExchangeController"] .card > .card-body.row > [class*="col"] > br { display: none; }
body.app [ng-controller="SimcardsExchangeController"] .card > .card-body.row > [class*="col"] > .btn { height: 46px; padding: 0 22px; display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
/* período: os dois campos de data com "até" entre eles */
body.app [ng-controller="SimcardsExchangeController"] .card > .card-body.row > [class*="col"] > .row {
  display: grid !important;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 10px;
  margin: 0 !important;
}
body.app [ng-controller="SimcardsExchangeController"] .card > .card-body.row > [class*="col"] > .row > [class*="col"] { width: auto !important; max-width: none !important; flex: none !important; padding: 0 !important; margin: 0 !important; }
body.app [ng-controller="SimcardsExchangeController"] .card > .card-body.row > [class*="col"] > .row > .col-2 { color: var(--lx-muted); font-size: 13px; text-align: center; }
@media (max-width: 991px) {
  body.app [ng-controller="SimcardsExchangeController"] .card > .card-body.row { grid-template-columns: 1fr 1fr; }
  body.app [ng-controller="SimcardsExchangeController"] .card > .card-body.row > [class*="col"]:nth-child(2) { grid-column: 1 / -1 !important; }
}

/* ---- Importação de Simcards (#/import) ---- */
/* "Selecione um arquivo" (seletor do Angular, não é input de arquivo): mesma
   área tracejada dos outros campos de arquivo */
body.app [ng-controller="ImportController"] [ngf-select] { cursor: pointer; }
body.app [ng-controller="ImportController"] [ngf-select] > .alert {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 46px;
  margin: 0;
  padding: 6px;
  border: 1px dashed var(--lx-line-strong);
  border-radius: var(--lx-r);
  background: var(--lx-surface-2);
  color: var(--lx-muted);
  font-size: 12px;
}
body.app [ng-controller="ImportController"] [ngf-select] > .alert::before {
  content: "Escolher arquivo";
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 12px;
  border-radius: 6px;
  background: var(--lx-surface);
  box-shadow: inset 0 0 0 1px var(--lx-line-strong);
  color: var(--lx-navy);
  font-weight: 500;
}
body.app [ng-controller="ImportController"] [ngf-select]:hover > .alert::before { background: var(--lx-active-bg); }
/* barra de envio: só aparece durante o envio */
body.app [ng-controller="ImportController"] .progress { height: 6px; margin-top: 10px; border-radius: 999px; }
body.app [ng-controller="ImportController"] .progress:has(> .progress-bar:is([style*="width: 0%"], [style*="width:0%"])) { display: none; }

/* botões pequenos no rodapé de cartão (ex.: "Enviar" da Importação): mesmo
   botão de ação dos formulários, 46px, à direita */
body.app .main .card-footer:has(> .btn-sm:only-child) { display: flex; justify-content: flex-end; }
body.app .main .card-footer > .btn-sm {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 46px;
  min-width: 140px;
  padding: 0 22px;
  border-radius: var(--lx-r);
  font-size: 14px;
  font-weight: 500;
}
body.app [ng-controller="SimcardsExchangeController"] .card > .card-body.row > [class*="col"] { order: 0 !important; margin-top: 0 !important; }
body.app [ng-controller="SimcardsExchangeController"] .card > .card-body.row > .col-12 { margin-top: 4px !important; }
body.app [ng-controller="SimcardsExchangeController"] .card > .card-body.row > .col-12 { margin-top: 2px !important; padding-top: 22px !important; border-top: 1px solid var(--lx-line); }
body.app [ng-controller="SimcardsExchangeController"] .card > .card-body.row > .col-12 { margin-top: 22px !important; }

/* ---- Checkbox em .form-check (fora de tabela): mesma chave liga/desliga dos
   formulários, num bloco do tamanho de um campo (rótulo à esquerda, chave à direita).
   Em tabelas a caixa marca linhas e continua caixa. ---- */
body.app .main .form-check:not(.form-check-inline):not(table *):has(> input[type="checkbox"] + label) {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-height: 46px;
  margin: 0 !important;
  padding: 0 14px !important;
  border: 1px solid var(--lx-line-strong);
  border-radius: var(--lx-r);
  background: var(--lx-surface);
}
body.app .main .form-check:not(.form-check-inline):not(table *):has(> input[type="checkbox"] + label) > label { margin: 0; color: var(--lx-text-2); font-size: 13px; font-weight: 500; cursor: pointer; }
body.app .main .form-check:not(.form-check-inline):not(table *) > input[type="checkbox"]:has(+ label) {
  -webkit-appearance: none;
  appearance: none;
  position: relative !important;
  flex: none;
  width: 38px;
  height: 22px;
  margin: 0 !important;
  border-radius: 999px;
  background: #cfd6de;
  cursor: pointer;
  transition: background-color .2s ease;
}
body.app .main .form-check:not(.form-check-inline):not(table *) > input[type="checkbox"]:has(+ label)::before {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(16, 24, 40, .25);
  transition: transform .2s cubic-bezier(.2, .8, .2, 1);
}
body.app .main .form-check:not(.form-check-inline):not(table *) > input[type="checkbox"]:has(+ label):checked { background: var(--lx-navy); }
body.app .main .form-check:not(.form-check-inline):not(table *) > input[type="checkbox"]:has(+ label):checked::before { transform: translateX(16px); }

/* ---- Usuários Online (#/online-users) ---- */
/* filtros: título na borda e campos de 46px, como nos outros filtros */
body.app [ng-controller="OnlineUsersController"] .card-body > .row.mb-3 { align-items: flex-end; row-gap: 16px; margin-bottom: 22px !important; }
body.app [ng-controller="OnlineUsersController"] .card-body > .row.mb-3 > [class*="col"] { position: relative; }
body.app [ng-controller="OnlineUsersController"] .card-body > .row.mb-3 > [class*="col"] > label {
  position: absolute;
  top: -8px;
  left: 25px;
  z-index: 3;
  margin: 0;
  padding: 0 6px;
  border-radius: 4px;
  background: var(--lx-surface);
  color: var(--lx-text-2);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .06em;
  line-height: 16px;
  text-transform: uppercase;
}
body.app [ng-controller="OnlineUsersController"] .card-body > .row.mb-3 .form-control { height: 46px; }
body.app [ng-controller="OnlineUsersController"] .card-body > .row.mb-3 > [class*="col"]:has(> .form-check) { display: block !important; }

/* status: selo de 35px em tom pastel com ponto, como os status de SIM Cards */
body.app [ng-controller="OnlineUsersController"] td > .badge:is(.badge-success, .badge-secondary) {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 35px;
  padding: 0 12px;
  border-radius: 9px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .01em;
}
body.app [ng-controller="OnlineUsersController"] td > .badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
body.app [ng-controller="OnlineUsersController"] td > .badge.badge-success { background: #e3f5ec; color: #157a4b; }
body.app [ng-controller="OnlineUsersController"] td > .badge.badge-success::before { box-shadow: 0 0 0 3px rgba(31, 157, 99, .18); }
body.app [ng-controller="OnlineUsersController"] td > .badge.badge-secondary { background: #eef1f5; color: #5d6b7c; }
body.app [ng-controller="OnlineUsersController"] td > .badge + .small { margin-top: 4px; }


/* título na borda também quando o HTML põe um <br> entre o rótulo e o campo
   (ex.: Cadastro de Pedido); o <br> some */
body.app .main .form-group:has(> label:not(.form-check-label) + br + :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea)),
body.app .modal .form-group:has(> label:not(.form-check-label) + br + :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea)) {
  position: relative;
  margin-top: 8px;
  margin-bottom: 22px;
}
body.app .main .form-group:has(> label:not(.form-check-label) + br + :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea)) > label,
body.app .modal .form-group:has(> label:not(.form-check-label) + br + :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea)) > label {
  position: absolute;
  top: -8px;
  left: 10px;
  z-index: 3;
  max-width: calc(100% - 20px);
  margin: 0;
  padding: 0 6px;
  background: var(--lx-surface);
  border-radius: 4px;
  color: var(--lx-muted);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .06em;
  line-height: 16px;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
  transition: color .15s ease;
}
body.app :is(.main, .modal) .form-group:has(> label:not(.form-check-label) + br + :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea)) > br { display: none; }

/* textarea sem classe de campo (ex.: Observação do Pedido): mesmo estilo dos campos */
body.app .main textarea:not(.form-control):not(.note-codable) {
  display: block;
  width: 100% !important;
  min-height: 46px;
  padding: 11px 14px;
  border: 1px solid var(--lx-line-strong);
  border-radius: var(--lx-r);
  background: var(--lx-surface);
  color: var(--lx-text);
  font: inherit;
  font-size: 14px;
  resize: vertical;
}
body.app .main textarea:not(.form-control):focus { outline: 0; border-color: var(--lx-blue); box-shadow: 0 0 0 3px var(--lx-active-bg); }

/* ---- Cadastrar novo pedido (#/orders/new) ----
   Os campos de cima ficavam soltos no fundo (a tela tem um card dentro, a Cesta,
   então a regra de "formulário vira card" não pegava). */
body.app [ng-controller="OrderController"] > .container-fluid > form#form > .row:first-child {
  margin: 0 0 24px;
  padding: 30px 13px 0;
  background: var(--lx-surface);
  border: 1px solid var(--lx-line);
  border-radius: 14px;
  box-shadow: var(--lx-shadow-1);
}
body.app [ng-controller="OrderController"] > .container-fluid > form#form .card-body > h4.text-center { margin-bottom: 26px; color: var(--lx-navy); font-size: 18px; font-weight: 600; }
body.app [ng-controller="OrderController"] > .container-fluid > form#form .btn-block { height: 46px; }
/* Salvar e Voltar: à direita, Voltar antes, Salvar por último */
body.app [ng-controller="OrderController"] > .container-fluid > form#form > .row:last-child {
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-start;
  gap: 12px;
  margin: 0;
}
body.app [ng-controller="OrderController"] > .container-fluid > form#form > .row:last-child > [class*="col"] { flex: none; width: auto; max-width: none; padding: 0; }
body.app [ng-controller="OrderController"] > .container-fluid > form#form > .row:last-child .btn { min-width: 140px; height: 46px; padding: 0 22px; }
body.app [ng-controller="OrderController"] > .container-fluid > form#form > .row:last-child .btn-success { min-width: 180px; }
/* campo sem classe de campo dentro de form-group (ex.: Valor Frete, Preço do Pedido): 46px como os outros */
body.app :is(.main, .modal) .form-group > input:not(.form-control):not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]) {
  width: 100% !important;
  height: 46px;
  padding: 0 14px;
  border: 1px solid var(--lx-line-strong);
  border-radius: var(--lx-r);
  background: var(--lx-surface);
  font-size: 14px;
}

/* ---- título na borda quando o form-group é a própria coluna (form-group col-md-6):
   a coluna tem 15px de recuo, então o título recua junto para cair sobre o campo ---- */
body.app :is(.main, .modal) .form-group[class*="col"]:has(> label:not(.form-check-label) + :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea)) > label {
  left: 25px;
  max-width: calc(100% - 50px);
}

/* ---- Gerar Nota Fiscal Avulsa (#/nfs/avulsas/nova) ---- */
/* cabeçalho: Classificação | Importar XML | Cadastrar CFOP numa linha só */
body.app [ng-controller="NFAvulsaFormController"] > .container-fluid > .card:first-child .card-body > .row {
  display: grid !important;
  grid-template-columns: minmax(180px, 220px) minmax(0, 1fr) auto;
  align-items: end;
  gap: 16px;
  margin: 0;
}
body.app [ng-controller="NFAvulsaFormController"] > .container-fluid > .card:first-child .card-body > .row > .form-group { margin: 8px 0 0 !important; align-self: end !important; }
body.app [ng-controller="NFAvulsaFormController"] > .container-fluid > .card:first-child select:not(.form-control) {
  width: 100%;
  height: 46px;
  padding: 0 36px 0 14px;
  border: 1px solid var(--lx-line-strong);
  border-radius: var(--lx-r);
  background-color: var(--lx-surface);
  font-size: 14px;
}
body.app [ng-controller="NFAvulsaFormController"] > .container-fluid > .card:first-child .btn { height: 46px; padding: 0 22px; white-space: nowrap; }
body.app [ng-controller="NFAvulsaFormController"] .card-title { margin-bottom: 22px; color: var(--lx-navy); font-size: 16px; font-weight: 600; }
/* rodapé: Cancelar, Pré-visualizar e Gerar à direita, 46px (Gerar por último) */
body.app [ng-controller="NFAvulsaFormController"] > .container-fluid > .row:has(> [class*="col"] > button[ng-click^="gerarNotaFiscal"]) {
  display: flex !important;
  flex-direction: row !important;
  justify-content: flex-end;
  gap: 12px;
  margin: 8px 0 0;
}
body.app [ng-controller="NFAvulsaFormController"] > .container-fluid > .row:has(> [class*="col"] > button[ng-click^="gerarNotaFiscal"]) > [class*="col"] { flex: none !important; width: auto !important; max-width: none !important; margin: 0 !important; padding: 0 !important; order: 0 !important; }
body.app [ng-controller="NFAvulsaFormController"] > .container-fluid > .row:has(> [class*="col"] > button[ng-click^="gerarNotaFiscal"]) .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 46px; min-width: 140px; padding: 0 22px; }

/* ---- Vinculação de Clientes (#/resellers/client) ---- */
body.app [ng-controller="SellerClientController"] .card-body > .row:first-child { align-items: flex-end; }
body.app [ng-controller="SellerClientController"] .select2-container--default .select2-selection--multiple { min-height: 46px; }
body.app [ng-controller="SellerClientController"] .card-body > .row:first-child .form-group:has(> .btn) > br { display: none; }
body.app [ng-controller="SellerClientController"] .card-body > .row:first-child .btn { height: 46px; }
body.app [ng-controller="SellerClientController"] .card-body > .row:nth-child(2) > [class*="col"] { flex: 0 0 100%; max-width: 100%; margin-left: 0; }
body.app [ng-controller="SellerClientController"] .card-body > .row:first-child .form-group:has(> .btn) { margin: 8px 0 22px !important; }
body.app [ng-controller="NFAvulsaFormController"] > .container-fluid > .row:has(> [class*="col"] > button[ng-click^="gerarNotaFiscal"]) { justify-content: flex-end !important; }

/* ---- APNs (#/apn) ----
   Única tela sem a faixa de cabeçalho (o HTML tem só um h1 "APNs" e uma
   coluna estreita). O h1 vira a faixa padrão, com o mesmo ícone do menu, e as
   operadoras viram uma grade de cartões. */
body.app .main .container[ng-controller="ApnController"] { max-width: none; padding: 0; }
body.app .main [ng-controller="ApnController"] > .row { display: block; margin: 0; }
body.app .main [ng-controller="ApnController"] > .row > .col-md-6 {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 20px;
  max-width: none;
  margin: 0;
  padding: 0 30px 30px;
}
/* faixa de cabeçalho */
body.app .main [ng-controller="ApnController"] > .row > .col-md-6 > h1 {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 24px 0 4px;
  padding: 16px 20px;
  min-height: 76px;
  background-color: var(--lx-surface);
  background-image:
    radial-gradient(60% 140% at 100% 0%, rgba(209, 77, 82, .07) 0%, rgba(209, 77, 82, 0) 70%),
    radial-gradient(110% 160% at 85% 0%, #e6f0f8 0%, rgba(230, 240, 248, 0) 60%);
  border: 1px solid var(--lx-line);
  border-radius: 14px;
  box-shadow: var(--lx-shadow-1);
  color: var(--lx-navy);
  font-size: 1.3rem;
  font-weight: 500;
  letter-spacing: -.01em;
  line-height: 1.3;
  text-align: left !important;
}
body.app .main [ng-controller="ApnController"] > .row > .col-md-6 > h1::before {
  content: "\ed3c";
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--lx-voxter) 0%, var(--lx-navy) 78%);
  box-shadow: 0 6px 14px -6px rgba(209, 77, 82, .45);
  color: #fff;
  font-family: "lx-uicons-tr";
  font-size: 20px;
  font-weight: 400;
}
/* cartão de cada operadora */
body.app .main [ng-controller="ApnController"] .card {
  margin: 0;
  border: 1px solid var(--lx-line);
  border-radius: 14px;
  box-shadow: var(--lx-shadow-1);
  overflow: hidden;
}
body.app .main [ng-controller="ApnController"] .card-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--lx-line);
  background: var(--lx-surface);
  color: var(--lx-navy);
  font-size: 15px;
  font-weight: 600;
}
body.app .main [ng-controller="ApnController"] .card-header > img {
  flex: none;
  width: 36px;
  height: 36px;
  padding: 5px;
  border: 1px solid var(--lx-line);
  border-radius: 9px;
  background: #fff;
  object-fit: contain;
}
/* dados: rótulo pequeno em caixa alta, valor em destaque */
body.app .main [ng-controller="ApnController"] .card-body {
  padding: 16px 20px 18px;
  color: var(--lx-navy);
  font-size: 14px;
  font-weight: 500;
  line-height: 2.1;
}
body.app .main [ng-controller="ApnController"] .card-body > b {
  display: inline-block;
  min-width: 92px;
  color: var(--lx-muted);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
}
/* observações (PIN, atenção): nota em tom âmbar, separada dos dados */
body.app .main [ng-controller="ApnController"] .card-body > div:not(:empty) {
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  background: #fefaf0;
  color: var(--lx-text-2);
  font-size: 12.5px;
  font-weight: 400;
  line-height: 1.55;
}
body.app .main [ng-controller="ApnController"] .card-body > div:not(:empty) b { color: var(--lx-navy); }
body.app .main [ng-controller="ApnController"] > .row > .col-md-6 { align-items: start; }

/* ---- "Selecione um arquivo" (seletor de arquivo do Angular, ngf-select) em
   qualquer tela (Importação de Simcards, Importação de Rastreadores...): mesma
   área tracejada dos campos de arquivo; barra de envio só durante o envio ---- */
body.app .main [ngf-select] { cursor: pointer; }
body.app .main [ngf-select] > .alert {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 46px;
  margin: 0;
  padding: 6px;
  border: 1px dashed var(--lx-line-strong);
  border-radius: var(--lx-r);
  background: var(--lx-surface-2);
  color: var(--lx-muted);
  font-size: 12px;
}
body.app .main [ngf-select] > .alert::before {
  content: "Escolher arquivo";
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 12px;
  border-radius: 6px;
  background: var(--lx-surface);
  box-shadow: inset 0 0 0 1px var(--lx-line-strong);
  color: var(--lx-navy);
  font-weight: 500;
}
body.app .main [ngf-select]:hover > .alert::before { background: var(--lx-active-bg); }
body.app .main :is(form:has([ngf-select]), [ngf-select]) ~ .progress { height: 6px; margin-top: 10px; border-radius: 999px; }
body.app .main :is(form:has([ngf-select]), [ngf-select]) ~ .progress:has(> .progress-bar:is([style*="width: 0%"], [style*="width:0%"])) { display: none; }

/* ---- botão solto no topo do cartão (ex.: "Atualizar" dos Logs de Comandos): 46px ---- */
body.app .main [ng-controller]:not([ng-controller="TrackerController"]) .card-body > .float-right > .btn { display: inline-flex; align-items: center; gap: 8px; height: 46px; padding: 0 20px; }

/* ---- Vendas Parceladas (#/order/installments): "Período" é texto solto acima de
   duas datas; vira título na borda, como nos outros filtros ---- */
body.app [ng-controller="OrderInstallmentController"] .row > [class*="col"] > .row:has(> .col-12.mb-1 + .col-6 > input[type="date"]) { position: relative; margin-top: 8px; }
body.app [ng-controller="OrderInstallmentController"] .row > [class*="col"] > .row > .col-12.mb-1:has(+ .col-6 > input[type="date"]) {
  position: absolute;
  top: -8px;
  left: 25px;
  z-index: 3;
  flex: none;
  width: auto;
  max-width: none;
  margin: 0 !important;
  padding: 0 6px;
  border-radius: 4px;
  background: var(--lx-surface);
  color: var(--lx-text-2);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .06em;
  line-height: 16px;
  text-transform: uppercase;
}

/* ---- Sentinela (#/trackers/config): painel de filtro no padrão ----
   O HTML pinta o card de cinza e faz Buscar/Enfileirar como quadrados de 120px
   (cores fixas no style). Vira o cartão branco dos filtros e botões de 46px. */
body.app [ng-controller="TrackerConfigController"] .card[style*="background-color"] {
  background: var(--lx-surface) !important;
  border: 1px solid var(--lx-line);
  border-radius: 14px;
  box-shadow: var(--lx-shadow-1);
}
body.app [ng-controller="TrackerConfigController"] .card[style*="background-color"] > .card-body { padding: 26px 24px 22px !important; }
/* Sentinela: Buscar e Enfileirar Comandos são blocos grandes, como no Lara original
   (ícone em cima, nome embaixo), num formato só desta tela: o Sentinela se apresenta
   como um software dentro do software. A altura (120px) cobre as duas linhas de
   filtros, do topo do primeiro campo à base do último. Cores sólidas do HTML
   original (#26A7D6 e #03283F), com sombra na própria cor. Buscar fica junto
   dos filtros; Enfileirar Comandos fica sozinho na direita. */
body.app [ng-controller="TrackerConfigController"] :is(button[ng-click="load()"], button[ng-click="loadSendCommand()"]) {
  position: relative;
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 132px !important;
  height: 120px !important;
  margin: 0;
  padding: 12px !important;
  border: 0;
  border-radius: 16px !important;
  color: #fff !important;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.2;
  text-align: center;
  transition: transform .18s cubic-bezier(.2, .8, .2, 1), box-shadow .18s ease, filter .18s ease;
}
body.app [ng-controller="TrackerConfigController"] button[ng-click="load()"] {
  background: #26a7d6 !important;
  box-shadow: 0 12px 24px -12px rgba(22, 136, 184, .75);
}
body.app [ng-controller="TrackerConfigController"] button[ng-click="loadSendCommand()"] {
  background: #03283f !important;
  box-shadow: 0 12px 24px -12px rgba(3, 40, 63, .8);
}
body.app [ng-controller="TrackerConfigController"] :is(button[ng-click="load()"], button[ng-click="loadSendCommand()"]):hover { transform: translateY(-3px); filter: brightness(1.06); }
body.app [ng-controller="TrackerConfigController"] :is(button[ng-click="load()"], button[ng-click="loadSendCommand()"]):active { transform: translateY(0) scale(.98); }
body.app [ng-controller="TrackerConfigController"] :is(button[ng-click="load()"], button[ng-click="loadSendCommand()"]):focus-visible { outline: 3px solid rgba(38, 167, 214, .45); outline-offset: 3px; }
body.app [ng-controller="TrackerConfigController"] :is(button[ng-click="load()"], button[ng-click="loadSendCommand()"]) img { height: 36px; }
body.app [ng-controller="TrackerConfigController"] :is(button[ng-click="load()"], button[ng-click="loadSendCommand()"]) :is(span, div) { margin: 0 !important; font-size: 15px !important; font-weight: 500; white-space: normal !important; }
body.app [ng-controller="TrackerConfigController"] :is(button[ng-click="load()"], button[ng-click="loadSendCommand()"]) .ng-hide { display: none !important; }
/* coluna dos blocos: Buscar no começo (colado aos filtros), Enfileirar no fim,
   com o filete vertical do original antes dele */
body.app [ng-controller="TrackerConfigController"] .col-lg-6:has(> div > button[ng-click="load()"]) { align-items: flex-end !important; justify-content: space-between !important; gap: 0; }
body.app [ng-controller="TrackerConfigController"] .col-lg-6:has(> div > button[ng-click="load()"]) label { display: none; }
body.app [ng-controller="TrackerConfigController"] .col-lg-6:has(> div > button[ng-click="load()"]) .d-flex { align-items: flex-end !important; }
body.app [ng-controller="TrackerConfigController"] .col-lg-6:has(> div > button[ng-click="load()"]) .pr-4 { display: block; padding: 0 18px !important; }
body.app [ng-controller="TrackerConfigController"] .col-lg-6:has(> div > button[ng-click="load()"]) .pr-4 > div { height: 96px !important; margin-bottom: 12px; border-left: 1px solid var(--lx-line-strong) !important; opacity: 1 !important; }
/* tabela larga: rola por dentro do cartão em vez de vazar */
body.app [ng-controller="TrackerConfigController"] .dataTables_wrapper { overflow-x: auto; }
/* Vendas Parceladas: as duas datas do Período lado a lado, título na borda da primeira */
body.app [ng-controller="OrderInstallmentController"] .row > [class*="col"] > .row:has(> .col-12.mb-1 + .col-6 > input[type="date"]) {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 8px 0 0 !important;
}
body.app [ng-controller="OrderInstallmentController"] .row > [class*="col"] > .row:has(> .col-12.mb-1 + .col-6 > input[type="date"]) > .col-6 { width: auto !important; max-width: none !important; flex: none !important; margin: 0 !important; padding: 0 !important; }
body.app [ng-controller="OrderInstallmentController"] .row > [class*="col"] > .row > .col-12.mb-1:has(+ .col-6 > input[type="date"]) { left: 10px; }

/* Sentinela: títulos na borda dos campos, como nos outros filtros */
body.app [ng-controller="TrackerConfigController"] .card[style*="background-color"] [class*="col"]:has(> label + :is(input, select)) { position: relative; margin-top: 8px; }
body.app [ng-controller="TrackerConfigController"] .card[style*="background-color"] [class*="col"] > label:has(+ :is(input, select)) {
  position: absolute;
  top: -8px;
  left: 25px;
  z-index: 3;
  margin: 0;
  padding: 0 6px;
  border-radius: 4px;
  background: var(--lx-surface);
  color: var(--lx-text-2);
  font-size: 10.5px !important;
  font-weight: 600;
  letter-spacing: .06em;
  line-height: 16px;
  text-transform: uppercase;
}
body.app [ng-controller="TrackerConfigController"] .card[style*="background-color"] .form-control { height: 46px !important; border-radius: var(--lx-r) !important; }
body.app [ng-controller="TrackerConfigController"] .card[style*="background-color"] .row { row-gap: 18px; }
body.app [ng-controller="TrackerConfigController"] .dataTables_wrapper { max-width: 100%; }
body.app [ng-controller="OrderInstallmentController"] .row > [class*="col"] > .row > .col-12.mb-1:has(+ .col-6 > input[type="date"]) { position: absolute !important; top: -8px !important; }
/* Sentinela: a tabela fica solta no fundo (o HTML não tem card); ganha o mesmo
   cartão das outras listas e rola por dentro dele se for mais larga */
body.app [ng-controller="TrackerConfigController"] > .container-fluid > .dataTables_wrapper {
  margin-top: 20px;
  padding: 20px 24px 18px;
  background: var(--lx-surface);
  border: 1px solid var(--lx-line);
  border-radius: 14px;
  box-shadow: var(--lx-shadow-1);
  overflow-x: auto;
}
/* Sentinela: a tabela tem muitas colunas e passava ~90px do cartão; células mais
   justas e o botão Histórico compacto fazem ela caber sem rolar */
body.app [ng-controller="TrackerConfigController"] table.dataTable :is(th, td) { padding-left: 8px !important; padding-right: 8px !important; font-size: 13px; }
body.app [ng-controller="TrackerConfigController"] table.dataTable td .btn { padding: 0 10px !important; font-size: 12px; white-space: nowrap; }

/* ==========================================================================
   Celular (até 767px / 575px)
   ========================================================================== */
@media (max-width: 767.98px) {
  /* topo: o HTML já esconde o telefone abaixo de 768px (d-none d-md-block);
     a regra do topo forçava ele a aparecer e o topo quebrava em 2 linhas */
  body.app .app-header a[href^="tel:"] { display: none !important; }
  body.app .app-header { flex-wrap: nowrap; padding: 0 8px; }
  body.app .app-header .navbar-brand {
    position: absolute;
    left: 50%;
    width: 104px !important;
    margin-left: -52px !important;
    background-size: auto 28px !important;
  }
  body.app .app-header .navbar-nav.ml-auto { flex-wrap: nowrap; gap: 0; margin-left: auto; }
  body.app .app-header .navbar-nav .nav-item .nav-link { padding: 6px 7px !important; min-width: 0; }
  body.app .app-header .navbar-nav .nav-item:not(.dropdown) { border: 0 !important; margin: 0 !important; padding: 0 !important; }
  body.app .app-header .navbar-nav .nav-item.dropdown { margin-left: 4px; padding-left: 6px; }
  /* com o logo no centro, os contadores à direita ficam só com o ícone e o número */
  body.app .app-header .navbar-nav .nav-item:not(.dropdown) .nav-link > i { font-size: 16px; }
  /* faixa de cabeçalho da tela mais compacta */
  body.app .main .breadcrumb { margin: 16px 14px; min-height: 64px; padding: 12px 14px; font-size: 1.1rem; }
  body.app .main .breadcrumb::before { width: 38px; height: 38px; font-size: 16px; }
  body.app .main .container-fluid { padding-left: 14px; padding-right: 14px; }
}

@media (max-width: 575.98px) {
  /* colunas fixas do HTML (col-3, col-5, col-1...) empilham: cada campo na
     largura toda. (A grade dos filtros tem regra própria, mais forte.) */
  body.app .main .row > [class*="col"] { flex: 0 0 100%; max-width: 100%; }
  /* radios em cartões: um por linha */
  body.app .form-check:has(> input[type="radio"] ~ input[type="radio"]) > label { flex-basis: calc(100% - 8px) !important; }
  /* formulários soltos que viraram card: menos margem lateral */
  body.app .main [ng-controller] > .container-fluid:not(:has(.card)):has(.form-group),
  body.app .main [ng-controller^="Report"] > .container-fluid { margin-left: 14px !important; margin-right: 14px !important; padding: 26px 16px 20px !important; }
  /* Home: gráficos dentro do cartão (o Google Charts desenha com largura fixa) */
  body.app [ng-controller="HomeController"] .card { overflow: hidden; }
  /* botões de ação dos formulários: largura toda, empilhados */
  body.app .main .card-footer:has(> .btn-sm:only-child) > .btn-sm { width: 100%; }
}

/* filtros no celular: 2 colunas (1 em tela bem estreita) em vez de 3 espremidas */
@container (max-width: 560px) { body.app .main .row:not(.modal .row):not([class*="col"] .row):not(form .row):not([ng-controller="SimcardSharingController"] .row):has(> [class*="col"] > label, > [class*="col"] > .form-group > label):has(> [class*="col"] > .btn, > [class*="col"] > .btn-group, > [class*="col"] > a > .btn, > [class*="col"] > a.btn, + .row > [class*="col"] > .btn, + .row > [class*="col"] > .btn-group, + .row > [class*="col"] > a > .btn, + .row > [class*="col"] > a.btn) > * { --lx-n: 2; } }
@container (max-width: 330px) { body.app .main .row:not(.modal .row):not([class*="col"] .row):not(form .row):not([ng-controller="SimcardSharingController"] .row):has(> [class*="col"] > label, > [class*="col"] > .form-group > label):has(> [class*="col"] > .btn, > [class*="col"] > .btn-group, > [class*="col"] > a > .btn, > [class*="col"] > a.btn, + .row > [class*="col"] > .btn, + .row > [class*="col"] > .btn-group, + .row > [class*="col"] > a > .btn, + .row > [class*="col"] > a.btn) > * { --lx-n: 1; } }
@media (max-width: 767.98px) {
  body.app .app-header .navbar-nav > a[href^="tel:"].d-none { display: none !important; }
  /* logo à esquerda, logo depois do menu; contadores e conta à direita */
  body.app .app-header .navbar-brand { position: static !important; left: auto; margin: 0 0 0 2px !important; transform: none !important; }
}

/* ---- campos de mês e data-hora (ex.: Mês de Referência em Problemas do Faturamento):
   mesmo campo dos outros; o ícone do navegador vira o mesmo calendário em traço
   fino, e o ícone de fundo da classe "datepicker" sai (eram dois ícones) ---- */
body.app .main input:is([type="month"], [type="datetime-local"], [type="week"]):not(.form-control) {
  width: 100%;
  height: 46px;
  padding: 0 .75rem;
  border: 1px solid var(--lx-line-strong);
  border-radius: var(--lx-r);
  background-color: var(--lx-surface);
  color: var(--lx-text);
  box-shadow: none;
  font-size: 14px;
}
body.app .main input:is([type="month"], [type="datetime-local"], [type="week"]).datepicker { padding-right: .75rem !important; background-image: none !important; }
body.app input:is([type="month"], [type="datetime-local"], [type="week"])::-webkit-calendar-picker-indicator {
  width: 18px;
  height: 18px;
  padding: 0;
  margin: 0;
  background: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23667085' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='5' width='17' height='15.5' rx='3'/%3E%3Cpath d='M3.5 10h17M8 3v4M16 3v4'/%3E%3Ccircle cx='8.5' cy='14.5' r='.6' fill='%23667085'/%3E%3Ccircle cx='12' cy='14.5' r='.6' fill='%23667085'/%3E%3Ccircle cx='15.5' cy='14.5' r='.6' fill='%23667085'/%3E%3C/svg%3E") no-repeat center / 18px 18px;
  opacity: .85;
  cursor: pointer;
}
body.app input:is([type="month"], [type="datetime-local"], [type="week"])::-webkit-calendar-picker-indicator:hover { opacity: 1; }
/* título em texto solto acima do campo de mês ("Mês de Referência <br>"): estilo de título de campo */
body.app .main .row > [class*="col"]:has(> br + input[type="month"]) {
  color: var(--lx-text-2);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
}
body.app .main .row > [class*="col"]:has(> br + input[type="month"]) > br { content: ""; display: block; margin-bottom: 6px; }
body.app .main .row > [class*="col"]:has(> br + input[type="month"]) > input { letter-spacing: 0; text-transform: none; font-weight: 400; }
/* Problemas do Faturamento (#/bills/errors): campo de mês e Buscar na mesma linha,
   alinhados pela base; Buscar com 46px, à direita, como nos outros filtros */
body.app [ng-controller="BillingErrorsController"] .card-body > .row:has(input[type="month"]) { align-items: flex-end; }
body.app [ng-controller="BillingErrorsController"] .card-body > .row:has(input[type="month"]) > [class*="col"]:has(> .btn) { display: flex; justify-content: flex-end; }
body.app [ng-controller="BillingErrorsController"] .card-body > .row:has(input[type="month"]) > [class*="col"] > br:first-child:not(:only-of-type) { display: none; }
body.app [ng-controller="BillingErrorsController"] .card-body > .row:has(input[type="month"]) > [class*="col"]:has(> .btn) > br { display: none; }
body.app [ng-controller="BillingErrorsController"] .card-body > .row:has(input[type="month"]) .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: auto;
  min-width: 160px;
  height: 46px;
  padding: 0 22px;
  font-size: 14px;
  font-weight: 500;
}

/* FAQ (#/faq): filtros numa linha (categoria, busca larga, Novo FAQ) e, em cada
   pergunta, Editar e Excluir separados, do tamanho dos outros botões */
body.app [ng-controller="FaqController"] .container-fluid > .row.mb-2 {
  display: grid !important;
  grid-template-columns: 240px 1fr 180px;
  gap: 12px;
  margin: 0 0 16px !important;
}
body.app [ng-controller="FaqController"] .container-fluid > .row.mb-2:not(:has(> .col-2 > .btn)) { grid-template-columns: 240px 1fr; }
body.app [ng-controller="FaqController"] .container-fluid > .row.mb-2 > [class*="col"] { width: auto !important; max-width: none !important; padding: 0 !important; }
body.app [ng-controller="FaqController"] .container-fluid > .row.mb-2 :is(.form-control, .btn) { height: 46px !important; }
body.app [ng-controller="FaqController"] .container-fluid > .row.mb-2 .btn { display: flex; align-items: center; justify-content: center; }

body.app [ng-controller="FaqController"] #accordion .card-header h5 {
  display: flex;
  align-items: center;
  gap: 8px;
}
body.app [ng-controller="FaqController"] #accordion .card-header h5 > .btn-link { flex: 1; min-width: 0; margin-right: 8px; text-align: left; white-space: normal; }
body.app [ng-controller="FaqController"] #accordion .card-header h5 > .btn-sm {
  float: none !important;
  height: 36px;
  min-width: 88px;
  padding: 0 16px !important;
  border-radius: var(--lx-r) !important;
  font-size: 13px !important;
  font-weight: 500;
}
/* no HTML o Excluir vem antes (por causa do float); aqui Editar fica primeiro */
body.app [ng-controller="FaqController"] #accordion .card-header h5 > .btn-primary { order: 1; }
body.app [ng-controller="FaqController"] #accordion .card-header h5 > .btn-danger  { order: 2; }

/* Cadastrar/Editar FAQ (#/faq/new, #/faq/edit): o editor do Texto cresce até o
   fim da janela, deixando Voltar e Salvar visíveis embaixo, à direita.
   Cada nível, da .main até a área editável, vira coluna flexível que ocupa a
   sobra; a .main fica com a altura da janela abaixo do topo (55px) em vez da
   altura do menu lateral. */
body.app .main:has([ng-controller="FaqController"] form .note-editor) {
  display: flex;
  flex-direction: column;
  align-self: flex-start;
  min-height: calc(100dvh - 55px);
}
body.app .main:has([ng-controller="FaqController"] form .note-editor) > [ng-view],
body.app .main [ng-view] > [ng-controller="FaqController"]:has(form .note-editor),
body.app [ng-controller="FaqController"] > .container-fluid:has(> form .note-editor),
body.app [ng-controller="FaqController"] form:has(.note-editor),
body.app [ng-controller="FaqController"] form:has(.note-editor) > .row,
body.app [ng-controller="FaqController"] form .row > .col-12:has(.note-editor),
body.app [ng-controller="FaqController"] form .form-group:has(> .note-editor),
body.app [ng-controller="FaqController"] form .note-editor,
body.app [ng-controller="FaqController"] form .note-editing-area {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}
body.app [ng-controller="FaqController"] form:has(.note-editor) > .row { flex-wrap: nowrap; }
body.app [ng-controller="FaqController"] form:has(.note-editor) > .row > [class*="col"] { width: 100%; max-width: none; flex-basis: auto; }
body.app [ng-controller="FaqController"] form .note-editable {
  flex: 1 1 auto;
  height: auto !important;          /* o Summernote grava a altura inline */
  min-height: 120px;            /* janela muito baixa: rola, mas o editor não some */
  padding: 14px 16px;
}
/* moldura do editor no padrão dos campos; a barra de redimensionar perde o sentido */
body.app [ng-controller="FaqController"] form .note-editor.note-frame {
  border: 1px solid var(--lx-line-strong);
  border-radius: var(--lx-r);
  overflow: hidden;
}
body.app [ng-controller="FaqController"] form .note-editor .note-toolbar { padding: 14px 8px 8px; border-bottom: 1px solid var(--lx-line); background: var(--lx-surface-2); }
body.app [ng-controller="FaqController"] form .note-editor .note-statusbar { display: none; }
body.app [ng-controller="FaqController"] form .note-editor:focus-within { border-color: var(--lx-blue); box-shadow: var(--lx-ring); }
/* botões: a regra geral de rodapé já os põe à direita, Voltar antes de Salvar */

/* ---- Menu "Ações" (e demais menus suspensos da área de trabalho) ----
   Itens em linha de 36px com ícone numa coluna fixa, realce azul claro no
   hover, e as ações destrutivas (Excluir, Cancelar, Desativar...) em vermelho,
   separadas das demais por um filete. Menus longos (Pedidos) rolam por dentro. */
body.app .main .dropdown-menu {
  min-width: 232px;
  max-height: min(70vh, 540px);
  overflow-y: auto;
  padding: 6px;
  border: 1px solid var(--lx-line);
  border-radius: 12px;
  background: var(--lx-surface);
  box-shadow: 0 16px 40px -12px rgba(16, 24, 40, .28), 0 2px 6px rgba(16, 24, 40, .06);
  font-size: 13.5px;
}
body.app .main .dropdown-menu .dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 36px;
  margin: 1px 0;
  padding: 0 12px;
  border: 0 !important;
  border-radius: 8px;
  background: transparent !important;   /* alguns itens carregam .btn-info etc. */
  box-shadow: none !important;
  color: var(--lx-text) !important;
  font-size: 13.5px;
  font-weight: 400;
  line-height: 1.25;
  white-space: nowrap;
  cursor: pointer;
}
body.app .main .dropdown-menu .dropdown-item > i {
  flex: 0 0 18px;
  width: 18px;
  margin: 0 !important;
  color: var(--lx-icon);
  font-size: 14px;
  text-align: center;
  transition: color .12s ease;
}
body.app .main .dropdown-menu .dropdown-item:is(:hover, :focus-visible) { background: var(--lx-active-bg) !important; color: var(--lx-navy) !important; }
body.app .main .dropdown-menu .dropdown-item:is(:hover, :focus-visible) > i { color: var(--lx-blue); }
body.app .main .dropdown-menu .dropdown-item:active { background: #dbeafe !important; }
body.app .main .dropdown-menu .dropdown-divider { margin: 6px 8px; border-top-color: var(--lx-line); }

/* destrutivas */
body.app .main .dropdown-menu .dropdown-item:is(:has(> .fa-trash), :has(> .fa-ban), .btn-cancel, .btn-delete, .btn-platform-delete) { color: var(--lx-red) !important; }
body.app .main .dropdown-menu .dropdown-item:is(:has(> .fa-trash), :has(> .fa-ban), .btn-cancel, .btn-delete, .btn-platform-delete) > i { color: var(--lx-red); }
body.app .main .dropdown-menu .dropdown-item:is(:has(> .fa-trash), :has(> .fa-ban), .btn-cancel, .btn-delete, .btn-platform-delete):is(:hover, :focus-visible) { background: #fdf3f3 !important; color: var(--lx-red-hover) !important; }
body.app .main .dropdown-menu .dropdown-item:is(:has(> .fa-trash), :has(> .fa-ban), .btn-cancel, .btn-delete, .btn-platform-delete):is(:hover, :focus-visible) > i { color: var(--lx-red-hover); }
/* filete antes do primeiro item destrutivo de cada bloco */
body.app .main .dropdown-menu .dropdown-item:not(:has(> .fa-trash), :has(> .fa-ban), .btn-cancel, .btn-delete, .btn-platform-delete) + .dropdown-item:is(:has(> .fa-trash), :has(> .fa-ban), .btn-cancel, .btn-delete, .btn-platform-delete) {
  position: relative;
  margin-top: 11px;
}
body.app .main .dropdown-menu .dropdown-item:not(:has(> .fa-trash), :has(> .fa-ban), .btn-cancel, .btn-delete, .btn-platform-delete) + .dropdown-item:is(:has(> .fa-trash), :has(> .fa-ban), .btn-cancel, .btn-delete, .btn-platform-delete)::before {
  content: "";
  position: absolute;
  top: -6px;
  left: 8px;
  right: 8px;
  height: 1px;
  background: var(--lx-line);
}

/* Títulos na borda: um tamanho só. A regra das linhas de filtro (seção 7b)
   pegava os rótulos de formulários em grade e os deixava com 13px, ao lado de
   outros com 10,5px no mesmo formulário (ex.: Importação: Produto × Operadora). */
body.app :is(.main, .modal) .form-group:has(> label:not(.form-check-label) + :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea, br)) > label:not(.form-check-label):not(:has(+ select[name^="payment_method"])),
body.app [ng-controller="OnlineUsersController"] .card-body > .row.mb-3 > [class*="col"] > label {
  font-size: 10.5px !important;
  font-weight: 600 !important;
  letter-spacing: .06em !important;
}

/* Logs (#/logs): o segundo campo de data vem rotulado "Data Inicial:" no HTML.
   O texto original fica (font-size 0) e o visível passa a ser "Data Final:". */
body.app [ng-controller="LogController"] label[for="search_date2"] { font-size: 0 !important; letter-spacing: 0 !important; }
body.app [ng-controller="LogController"] label[for="search_date2"]::after { content: "Data Final:"; font-size: 10.5px; letter-spacing: .06em; }

/* Novo Pedido (#/orders/new): totais da cesta no mesmo painel do Visualizar
   Pedido (fundo claro à direita, Valor Total em destaque). O primeiro bloco
   não tem a classe mt-2 do Visualizar; é reconhecido por vir depois de um não-.text-right. */
body.app [ng-controller="OrderController"] form .card-body > .text-right {
  width: min(360px, 100%);
  margin-left: auto;
  padding: 0 18px;
  background: var(--lx-surface-2);
}
body.app [ng-controller="OrderController"] form .card-body > :not(.text-right) + .text-right {
  margin-top: 18px;
  padding-top: 14px;
  border-radius: 12px 12px 0 0;
}
body.app [ng-controller="OrderController"] form .card-body > .text-right:last-child {
  padding-top: 8px;
  padding-bottom: 14px;
  border-radius: 0 0 12px 12px;
}
body.app [ng-controller="OrderController"] form .card-body > .text-right:only-of-type { border-radius: 12px; }
body.app [ng-controller="OrderController"] form .card-body > .text-right > h5 {
  margin: 0;
  padding: 4px 0;
  color: var(--lx-text-2);
  font-size: 13px;
  font-weight: 500;
}
body.app [ng-controller="OrderController"] form .card-body > .text-right > h4 {
  margin: 0;
  padding-top: 10px;
  border-top: 1px dashed var(--lx-line-strong);
  color: var(--lx-navy);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -.01em;
}
/* sem Frete/Desconto (perfis 2 e 3) o total fica sozinho: sem o tracejado */
body.app [ng-controller="OrderController"] form .card-body > :not(.text-right) + .text-right:last-child > h4 { padding-top: 0; border-top: 0; }

/* Documentação J16 (Rastreadores): presa à faixa do título por anchor positioning,
   centrada na altura dela e com o mesmo recuo da direita. Não depende mais de
   distância fixa até o cartão (que mudava quando outras regras mexiam no topo).
   Sem suporte a anchor: fica o top/right fixo de antes. Altura sempre 34px. */
body.app [ng-controller="TrackerController"] > .breadcrumb { anchor-name: --lx-faixa-rastreadores; }
@supports (anchor-name: --a) {
  /* o cartão deixa de ser a referência do absolute: a âncora (faixa) fica fora dele */
  body.app [ng-controller="TrackerController"] > .container-fluid,
  body.app [ng-controller="TrackerController"] > .container-fluid .card,
  body.app [ng-controller="TrackerController"] > .container-fluid .card-body { position: static !important; }
  body.app [ng-controller="TrackerController"] { position: relative; }
  body.app [ng-controller="TrackerController"] .card-body > .float-right {
    position: absolute;
    position-anchor: --lx-faixa-rastreadores;
    top: anchor(center);
    right: calc(anchor(right) + 20px);
    left: auto;
    bottom: auto;
    transform: translateY(-50%);
  }
}
body.app [ng-controller="TrackerController"] .card-body > .float-right > .btn { height: 34px !important; min-height: 34px !important; padding: 0 .9rem !important; }

/* Logo da Voxter à direita de todas as faixas de título. Entra como mais uma
   camada do fundo da faixa (não usa ::after, que algumas faixas já ocupam).
   Arquivo que o Lara já tem: assets/img/logos/logovoxter.png (200×47). O título
   ganha recuo à direita para nunca passar por baixo do logo. */
body.app .main .breadcrumb,
body.app [ng-controller="DashboardController"] > .container-fluid::before,
body.app [ng-controller="TrackerConfigController"] > .container-fluid::before {
  padding-right: 134px;
  background-image:
    url("../img/logos/logovoxter.png"),
    radial-gradient(60% 140% at 100% 0%, rgba(209, 77, 82, .07) 0%, rgba(209, 77, 82, 0) 70%),
    radial-gradient(110% 160% at 85% 0%, #e6f0f8 0%, rgba(230, 240, 248, 0) 60%);
  background-repeat: no-repeat;
  background-position: right 22px center, 0 0, 0 0;
  background-size: auto 22px, auto, auto;
}
@media (max-width: 575.98px) {
  body.app .main .breadcrumb,
  body.app [ng-controller="DashboardController"] > .container-fluid::before,
  body.app [ng-controller="TrackerConfigController"] > .container-fluid::before {
    padding-right: 96px;
    background-position: right 14px center, 0 0, 0 0;
    background-size: auto 16px, auto, auto;
  }
}
/* Rastreadores: o botão Documentação J16 fica à esquerda do logo */
@supports (anchor-name: --a) {
  body.app [ng-controller="TrackerController"] .card-body > .float-right { right: calc(anchor(right) + 134px); }
}
/* Sentinela: Buscar a 20px do último filtro, o mesmo espaço entre os filtros */
body.app [ng-controller="TrackerConfigController"] .col-lg-6:has(> div > button[ng-click="load()"]) > div:has(> button[ng-click="load()"]) { margin-left: -10px; }

/* Títulos com "Simcards": o texto é o único conteúdo da faixa, então dá para
   trocar inteiro (o original fica no HTML, invisível). Listagem × cadastro do
   mesmo controller: a de cadastro tem <form>. */
body.app :is([ng-controller="SimcardController"], [ng-controller="SimcardClientController"], [ng-controller="ImportController"]) > .breadcrumb > .breadcrumb-item { font-size: 0; }
body.app :is([ng-controller="SimcardController"], [ng-controller="SimcardClientController"], [ng-controller="ImportController"]) > .breadcrumb > .breadcrumb-item::after {
  font-size: 1.3rem;
  font-weight: 500;
  letter-spacing: -.01em;
}
body.app [ng-controller="SimcardController"]:not(:has(form)) > .breadcrumb > .breadcrumb-item::after       { content: "Cadastro de SIM Cards"; }
body.app [ng-controller="SimcardController"]:has(form) > .breadcrumb > .breadcrumb-item::after             { content: "Cadastrar novo SIM Card"; }
body.app [ng-controller="SimcardClientController"]:not(:has(form)) > .breadcrumb > .breadcrumb-item::after { content: "Distribuição de SIM Cards"; }
body.app [ng-controller="SimcardClientController"]:has(form) > .breadcrumb > .breadcrumb-item::after       { content: "Vincular SIM Card"; }
body.app [ng-controller="ImportController"] > .breadcrumb > .breadcrumb-item::after                        { content: "Importação de SIM Cards"; }

/* Home: legendas dos números com "Simcards" (o texto é o elemento inteiro, então
   é trocado como os títulos; o original fica no HTML, invisível). Pelo template,
   bg-primary = "Total de Simcards" e bg-success = "Estoque de Simcards". */
body.app [ng-controller="HomeController"] .card:is(.bg-primary, .bg-success) > .card-body > .text-value { font-size: 0; line-height: 0; }
body.app [ng-controller="HomeController"] .card:is(.bg-primary, .bg-success) > .card-body > .text-value::after { font-size: 21px; line-height: 31.5px; }
body.app [ng-controller="HomeController"] .card.bg-primary > .card-body > .text-value::after { content: "Total de SIM Cards"; }
body.app [ng-controller="HomeController"] .card.bg-success > .card-body > .text-value::after { content: "Estoque de SIM Cards"; }

/* ---- Faixa de título fixa ao rolar (opção B aprovada) ----
   A faixa gruda a 12px do topo da janela. Ao começar a rolar ganha fundo
   translúcido com desfoque e sombra mais forte (0–60px de rolagem) e encolhe
   de 76 para 52px, com ícone, título e logo menores (0–120px). Só CSS: as
   transições acompanham a rolagem por animation-timeline; navegador sem esse
   recurso tem a faixa fixa, sem as transições.
   Pré-requisito: o .app-body do Lara tem overflow-x: hidden, o que o torna uma
   caixa de rolagem e impede o sticky de grudar na janela. overflow-x: clip
   corta igual, sem esse efeito. */
body.app .app-body { overflow-x: clip !important; overflow-y: visible !important; }
body.app .main .breadcrumb {
  position: sticky;
  top: 12px;
  z-index: 20;
}
@supports (animation-timeline: scroll()) {
  body.app .main .breadcrumb {
    animation: lx-faixa-solta linear both, lx-faixa-compacta linear both;
    animation-timeline: scroll(root block), scroll(root block);
    animation-range: 0 60px, 0 120px;
  }
  body.app .main .breadcrumb::before,
  body.app .main .breadcrumb > .breadcrumb-item::after {
    animation: lx-faixa-icone linear both;
    animation-timeline: scroll(root block);
    animation-range: 0 120px;
  }
  body.app .main .breadcrumb > .breadcrumb-item::after { animation-name: lx-faixa-texto; }
}
@keyframes lx-faixa-solta {
  to {
    background-color: rgba(255, 255, 255, .86);
    box-shadow: 0 14px 30px -14px rgba(16, 24, 40, .35), 0 1px 2px rgba(16, 24, 40, .06);
    -webkit-backdrop-filter: blur(10px) saturate(1.2);
            backdrop-filter: blur(10px) saturate(1.2);
  }
}
@keyframes lx-faixa-compacta {
  to {
    min-height: 52px;
    padding-top: 8px;
    padding-bottom: 8px;
    font-size: 1rem;
    background-size: auto 17px, auto, auto;
  }
}
@keyframes lx-faixa-icone { to { width: 32px; height: 32px; border-radius: 9px; font-size: 14px; } }
@keyframes lx-faixa-texto { to { font-size: 1rem; } }
/* celular: o topo do Lara é fixo (55px); a faixa gruda logo abaixo dele */
@media (max-width: 991.98px) {
  body.app .main .breadcrumb { top: 67px; }
}
/* celular estreito: o logo já é menor (16px); encolhe para 13px */
@media (max-width: 575.98px) {
  @supports (animation-timeline: scroll()) {
    body.app .main .breadcrumb { animation-name: lx-faixa-solta, lx-faixa-compacta-cel; }
  }
}
@keyframes lx-faixa-compacta-cel {
  to { min-height: 52px; padding-top: 8px; padding-bottom: 8px; font-size: 1rem; background-size: auto 13px, auto, auto; }
}
/* Rastreadores: o botão Documentação J16 acompanha a faixa fixa, por cima dela */
body.app [ng-controller="TrackerController"] .card-body > .float-right { z-index: 21; }
@media print {
  body.app .main .breadcrumb { position: static; animation: none !important; }
}

/* Faixa fixa também em SIM Cards e no Sentinela. Nessas telas não há faixa no
   HTML: o fundo com o nome é o ::before do container e o ícone é o ::after,
   que ficava "pendurado" por position: absolute e não acompanharia a rolagem.
   O container vira uma grade de uma coluna e os dois pseudo-elementos ocupam a
   mesma célula (linha 1), cada um sticky: andam juntos. Como a grade não
   colapsa margens, a margem de cima sai da faixa e vai para o container. */
body.app :is([ng-controller="DashboardController"], [ng-controller="TrackerConfigController"]) > .container-fluid {
  --lx-faixa-topo: 12px;            /* onde a faixa gruda; o ícone acompanha */
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  margin-top: 24px;
}
body.app :is([ng-controller="DashboardController"], [ng-controller="TrackerConfigController"]) > .container-fluid::before {
  grid-area: 1 / 1;
  position: sticky;
  top: 12px;
  z-index: 20;
  margin-top: 0 !important;
}
body.app :is([ng-controller="DashboardController"], [ng-controller="TrackerConfigController"]) > .container-fluid::after {
  grid-area: 1 / 1;
  justify-self: start;
  position: sticky !important;
  top: calc(var(--lx-faixa-topo) + 17px);   /* faixa + 1 de borda + 16 até o ícone. Sem !important: a animação precisa mexer nele */
  left: auto !important;
  z-index: 21;
  margin: 17px 0 0 21px;             /* 1 de borda + 16 (centro dos 76px) · 1 de borda + 20 de recuo */
}
@supports (animation-timeline: scroll()) {
  body.app :is([ng-controller="DashboardController"], [ng-controller="TrackerConfigController"]) > .container-fluid::before {
    animation: lx-faixa-solta linear both, lx-faixa-compacta-solta linear both;
    animation-timeline: scroll(root block), scroll(root block);
    animation-range: 0 60px, 0 120px;
  }
  body.app :is([ng-controller="DashboardController"], [ng-controller="TrackerConfigController"]) > .container-fluid::after {
    animation: lx-faixa-icone-solto linear both;
    animation-timeline: scroll(root block);
    animation-range: 0 120px;
  }
}
/* faixa desenhada no ::before: o nome se aproxima do ícone menor (80 → 69px, como nas outras) */
@keyframes lx-faixa-compacta-solta {
  to { min-height: 52px; padding-top: 8px; padding-bottom: 8px; padding-left: 69px; font-size: 1rem; background-size: auto 17px, auto, auto; }
}
/* ícone solto: além de encolher, sobe junto com a faixa (centro dos 52px) */
@keyframes lx-faixa-icone-solto {
  to { width: 32px; height: 32px; border-radius: 9px; font-size: 14px; top: calc(var(--lx-faixa-topo) + 10px); margin-top: 10px; }   /* (52 - 32) / 2 */
}
@media (max-width: 991.98px) {
  body.app :is([ng-controller="DashboardController"], [ng-controller="TrackerConfigController"]) > .container-fluid::before { top: 67px; }
  body.app :is([ng-controller="DashboardController"], [ng-controller="TrackerConfigController"]) > .container-fluid { --lx-faixa-topo: 67px; }
}
/* Sentinela: na grade as margens somam; estas devolvem os mesmos espaços de antes
   (16 faixa→aviso, 16 aviso→filtros, 24 filtros→tabela) */
body.app [ng-controller="TrackerConfigController"] > .container-fluid > .alert { margin-top: 8px !important; }
body.app [ng-controller="TrackerConfigController"] > .container-fluid > .alert ~ .card,
body.app [ng-controller="TrackerConfigController"] > .container-fluid > .dataTables_wrapper { margin-top: 0 !important; }
body.app [ng-controller="TrackerConfigController"] > .container-fluid:not(:has(> .alert)) > .card { margin-top: 8px !important; }   /* aviso fechado no × */

/* SIM Cards, coluna Info.: quando a coluna estreita, logo da operadora e selo de
   rede quebram em duas linhas; centralizados, ficam um sobre o outro, alinhados */
body.app .main table td:has(> img:is([src$="_on.png"], [src$="_off.png"])[src*="assets/img/"]) { text-align: center; }
body.app [ng-controller="DashboardController"] table.dataTable > thead > tr > th:nth-child(8) { text-align: center; }
/* o espaço do HTML entre logo e selo deslocava o logo ~3px na centralização: some
   com font-size 0 na célula (o selo tem tamanho próprio, 12px, mantido aqui) */
body.app .main table td:has(> img:is([src$="_on.png"], [src$="_off.png"])[src*="assets/img/"]) { font-size: 0; }
body.app .main table td:has(> img:is([src$="_on.png"], [src$="_off.png"])[src*="assets/img/"]) > .badge { font-size: 12px; margin: 0 3px; }
body.app .main table td:has(> img:is([src$="_on.png"], [src$="_off.png"])[src*="assets/img/"]) > img { margin: 0 3px; }   /* margens iguais dos dois lados: 6px entre eles lado a lado, centro exato empilhados */

/* ==========================================================================
   Ajustes locais (repositório lara-frontend)
   --------------------------------------------------------------------------
   Tudo abaixo foi acrescentado na integração do pacote. Ao receber uma versão
   nova deste arquivo, reaplicar este bloco no fim dela.
   ========================================================================== */

/* Tablet (768–991px): o CoreUI centraliza o logo com position:absolute e o
   telefone "SAC e vendas" (d-md-block) aparece a partir de 768px, então os dois
   se sobrepunham. Mesmo tratamento do celular: logo à esquerda, depois do menu. */
@media (min-width: 768px) and (max-width: 991.98px) {
  body.app .app-header .navbar-brand { position: static !important; left: auto; margin: 0 0 0 2px !important; transform: none !important; }
}

/* Home, gráficos: a entrada animada (lx-fatia / lx-aparece) só no primeiro
   desenho. O Google recria a fatia sob o mouse e a animação recomeçava com
   opacidade 0, então a fatia sumia no hover. O HomeController põe lx-desenhado
   no contêiner depois do primeiro desenho (e nos redesenhos ao redimensionar).
   O :nth-child(n) só reforça a especificidade sobre a regra dos rótulos. */
body.app :is(#myChart, #myChart2).lx-desenhado svg > g:nth-child(n) { animation: none; }

/* Chave liga/desliga (checkbox em .form-group) que também tem class="form-control"
   (Produtos: "É um serviço?"/"É importado?"; Envio de Comandos: "Habilitar o
   ângulo"): as regras de altura/recuo do .form-control esticavam a chave na
   vertical. Devolve as medidas da chave (os :not() repetem os da regra de
   altura padrão dos campos, para esta vencer em especificidade). */
body.app .main .form-group > input[type="checkbox"].form-control:not(textarea):not([multiple]):not([size]) {
  width: 38px;
  height: 22px;
  min-height: 0;
  padding: 0;
  border: 0;
  box-shadow: none;
}

/* Faixa de título que faltava (breadcrumb acrescentado no HTML): Plantão e as
   telas internas de Campanhas, com o mesmo ícone do item no menu. */
body.app [ng-controller="DashboardSupportController"] { --lx-ico: "\eb10"; --lx-ico-font: "lx-uicons-tr"; --lx-ico-peso: 400; }
body.app :is([ng-controller="CampaignCreateController"], [ng-controller="CampaignLogsController"]) { --lx-ico: "\ecd7"; --lx-ico-font: "lx-uicons-tr"; --lx-ico-peso: 400; }

/* Plantão (#/dashboard2): a tela é cópia da de SIM Cards, mas as regras do
   pacote só citavam o DashboardController; filtro e tabela ficavam soltos no
   fundo. Mesmas regras de layout de SIM Cards (gerado a partir delas; a faixa
   de título aqui é o breadcrumb, então as regras da faixa desenhada não entram). */
body.app [ng-controller="DashboardSupportController"] > .container-fluid > .row:first-child { margin: 0 !important; padding: 22px 24px 18px; background: var(--lx-surface); border: 1px solid var(--lx-line); border-bottom: 0; border-radius: 14px 14px 0 0; }
body.app [ng-controller="DashboardSupportController"] > .container-fluid > div:has(> #table_wrapper, > table#table) { margin-top: 0 !important; padding: 6px 24px 22px; background: var(--lx-surface); border: 1px solid var(--lx-line); border-top: 0; border-radius: 0 0 14px 14px; box-shadow: var(--lx-shadow-1); }
body.app [ng-controller="DashboardSupportController"] > .container-fluid > #loading,
body.app [ng-controller="DashboardSupportController"] > .container-fluid > #loading2 { background: var(--lx-surface); border-left: 1px solid var(--lx-line); border-right: 1px solid var(--lx-line); margin: 0; padding: 8px 0; }
body.app [ng-controller="DashboardSupportController"] #div_busca > .row { align-items: flex-end; flex-wrap: nowrap; }
body.app [ng-controller="DashboardSupportController"] #div_busca > .row > .col-10 { flex: 1 1 0%; min-width: 0; max-width: none; padding-right: 8px; }
body.app [ng-controller="DashboardSupportController"] #div_busca > .row > .col-1 { flex: 0 0 calc(1.5em + .9rem + 2px + 15px); max-width: calc(1.5em + .9rem + 2px + 15px); padding-left: 0; }
body.app [ng-controller="DashboardSupportController"] #div_busca > .row > .col-1 > .btn { display: inline-flex; align-items: center; justify-content: center; width: calc(1.5em + .9rem + 2px); height: calc(1.5em + .9rem + 2px); padding: 0; }
body.app [ng-controller="DashboardSupportController"] > .container-fluid > div > .dataTables_wrapper { border-top: 1px solid var(--lx-line); margin-top: 20px; padding-top: 20px; }
body.app [ng-controller="DashboardSupportController"] > .container-fluid > div:has(> #table_wrapper) { padding-top: 0; margin-bottom: 30px; }
body.app [ng-controller="DashboardSupportController"] > .container-fluid > div > .dataTables_wrapper { margin-top: 0; }
body.app [ng-controller="DashboardSupportController"] #div_busca > .row > .col-1 > .btn { width: 46px; height: 46px; }
body.app [ng-controller="DashboardSupportController"] #div_busca > .row > .col-1 { flex-basis: 61px; max-width: 61px; }
body.app [ng-controller="DashboardSupportController"] > .container-fluid > .row:first-child { padding-top: 32px; }
body.app [ng-controller="DashboardSupportController"] > .container-fluid > .row:first-child { padding-top: 34px !important; }
body.app [ng-controller="DashboardSupportController"] #table td:nth-child(6) > .badge { display: inline-flex; align-items: center; height: 35px; padding: 0 12px; border-radius: 9px; font-size: 12px; font-weight: 600; letter-spacing: .01em; margin: 2px 4px 2px 0; white-space: nowrap; }
body.app [ng-controller="DashboardSupportController"] #table :is(td, th):nth-child(8) { text-align: center; }
body.app [ng-controller="DashboardSupportController"] table.dataTable > thead > tr > th:nth-child(8) { text-align: center; }

/* --------------------------------------------------------------------------
   Compatibilidade entre navegadores (Firefox, Safari, Edge)
   Conferido em Chrome 156, Firefox 155 e 132 e WebKit 18 (motor do Safari 18).
   -------------------------------------------------------------------------- */

/* Safari (WebKit 18): o ::after da linha de filtro (a quebra que manda os botões
   para a linha de baixo) também era aplicado às linhas internas de um campo,
   como Busca + botão de filtros em SIM Cards e a Cesta do Novo Pedido. O WebKit
   erra o :not([class*="col"] .row) da regra original na hora de aplicar o estilo
   (o querySelectorAll dele acerta), e a quebra de 100% esmagava o campo.
   Linha dentro de coluna nunca leva essa quebra; aqui com um seletor simples. */
body.app .main [class*="col"] .row::after { content: none !important; }

/* Firefox: campo numérico mostra as setinhas o tempo todo (o Chrome só no
   hover). Só o Firefox lê -moz-appearance, então o Chrome fica como está. */
body.app input[type="number"] { -moz-appearance: textfield; }

/* Sem anchor positioning (Firefox até o 14x/ESR 140, Safari até o 18): o botão
   Documentação J16 de Rastreadores ficava na posição antiga, por cima do logo
   da Voxter na faixa. Mesmo recuo da versão com âncora: à esquerda do logo. */
@supports not (anchor-name: --a) {
  body.app [ng-controller="TrackerController"] .card-body > .float-right { right: 134px; }
}

/* Sem anchor positioning: os cartões de opção (Campanha, Importação) voltavam
   a radios nativos, com o texto na linha de baixo do radio. Mesmo desenho da
   versão com âncora, sem âncora: o radio de verdade fica escondido (continua
   recebendo foco e teclado) e o clique no cartão marca a opção pelo "for" do
   rótulo; o marcador redondo é o ::before do rótulo, como nos outros radios. */
@supports not (anchor-name: --a) {
  body.app .form-check:has(> input[type="radio"] ~ input[type="radio"]) {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    margin: 0 -8px 0 0;
    padding: 0 !important;
    font-size: 0;                 /* some com os &nbsp; e o título soltos no HTML */
  }
  body.app .form-check:has(> input[type="radio"] ~ input[type="radio"]) > br { display: none; }
  body.app .form-check:has(> input[type="radio"] ~ input[type="radio"]) > input[type="radio"] {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: 0 !important;
    opacity: 0;
    pointer-events: none;
  }
  body.app .form-check:has(> input[type="radio"] ~ input[type="radio"]) > label {
    flex: 0 0 calc(50% - 8px);
    min-height: 46px;
    margin: 0 8px 8px 0;
    padding: 8px 14px;
    border: 1px solid var(--lx-line-strong, #d5dde6);
    border-radius: 10px;
    background: var(--lx-surface);
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease;
  }
  body.app .form-check:has(> input[type="radio"] ~ input[type="radio"]) > label::before { content: ""; }
  body.app .form-check:has(> input[type="radio"] ~ input[type="radio"]) > input[type="radio"] + label:hover { border-color: #b9c6d4; }
  body.app .form-check:has(> input[type="radio"] ~ input[type="radio"]) > input[type="radio"]:checked + label {
    border-color: var(--lx-navy);
    background: var(--lx-active-bg);
    box-shadow: inset 0 0 0 1px var(--lx-navy);
    color: var(--lx-navy);
  }
  body.app .form-check:has(> input[type="radio"] ~ input[type="radio"]) > input[type="radio"]:focus-visible + label { outline: 2px solid var(--lx-blue); outline-offset: 2px; }
  body.app [ng-controller="CampaignCreateController"] .form-check:has(> input[type="radio"] ~ input[type="radio"])::before {
    content: "Método de envio";
    flex: 0 0 100%;
    margin: 0 0 8px 2px;
    color: var(--lx-text-2);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
  }
}

/* Linha selecionada (DataTables Select: SIM Cards e outras tabelas com caixa de
   seleção): o DataTables pinta a seleção com box-shadow e deixa o texto branco.
   A regra do "véu" da coluna ordenada (seção da tabela, acima) zera o box-shadow
   e vencia a da seleção, então a coluna ordenada da linha selecionada ficava
   com texto branco sobre fundo claro: parecia em branco. Devolve o azul. */
body.app .main table.dataTable:is(.display, .order-column) tbody tr.selected > :is(.sorting_1, .sorting_2, .sorting_3) {
  box-shadow: inset 0 0 0 9999px rgba(var(--dt-row-selected, 13, 110, 253), .92);
}

/* Coluna ordenada que também é coluna presa (lara-tabelas.js; em SIM Cards a ordem
   padrão é por Cliente, que fica presa): o "véu" da coluna ordenada é
   semitransparente e vencia o fundo branco da coluna presa, então o texto das
   colunas que rolam por baixo aparecia através dela. Mesma cor, opaca
   (o véu sobre branco). */
body.app .main .lxt-rolavel table.dataTable:is(.display, .order-column) tbody tr > :is(.sorting_1, .sorting_2, .sorting_3):is(:first-child, :last-child),
body.app .main .lxt-rolavel.lxt-dupla table.dataTable:is(.display, .order-column) tbody tr > :is(.sorting_1, .sorting_2, .sorting_3):nth-child(2) {
  background-color: rgb(249, 250, 250);
}
body.app .main .lxt-rolavel table.dataTable:is(.display, .order-column) tbody tr:hover > :is(.sorting_1, .sorting_2, .sorting_3):is(:first-child, :last-child),
body.app .main .lxt-rolavel.lxt-dupla table.dataTable:is(.display, .order-column) tbody tr:hover > :is(.sorting_1, .sorting_2, .sorting_3):nth-child(2) {
  background-color: #f6f8fb;
}