/* ==========================================================================
   LARA · tema escuro da camada visual moderna
   --------------------------------------------------------------------------
   Vale só quando o <html> tem data-lx-tema="escuro" (quem põe e tira é o
   assets/js/lara-tema.js, que também guarda a escolha). Sem esse atributo
   nada aqui se aplica e o tema claro fica exatamente como o lara-moderno.css
   desenha. Só na tela: impressão sai sempre no tema claro.

   Como funciona:
   1. A maior parte da tela já usa as variáveis --lx-* do lara-moderno.css;
      aqui elas recebem os valores escuros e o resto acompanha sozinho.
   2. As cores que o lara-moderno.css escreve direto (selos, alertas, toasts,
      faixa de título...) são trocadas abaixo, agrupadas pelo significado,
      com os tons escuros em variáveis próprias (--lx-ok-*, --lx-erro-*...).
   3. --lx-navy vira um azul de preenchimento (botões, paginação, selos com
      texto branco). Onde o lara-moderno.css usa --lx-navy como cor de TEXTO,
      a regra é repetida com --lx-navy-texto, um azul claro legível no fundo
      escuro.
   4. Componentes que o lara-moderno.css deixa com o fundo branco do
      CoreUI/Bootstrap ou do plugin (modal, menu suspenso, SweetAlert,
      Select2, Google Charts...) ganham fundo e texto escuros no fim, e o
      cartão do login (lara-login.css) acompanha a escolha.

   Especificidade: toda regra começa com :where([data-lx-tema="escuro"]), que
   não pesa nada. Cada troca fica com a mesma força da regra original e vence
   só por vir depois; os estados mais fortes do lara-moderno.css (:hover,
   .active, .disabled) continuam valendo por cima dela. Cuidado: a troca de uma
   regra "padrão" também passa por cima das regras de mesma força que o
   lara-moderno.css põe DEPOIS dela (ex.: a cor de cada operadora por
   [src*=...]); regra padrão com variações depois dela não se repete aqui.
   Na seção 10 (plugins) o prefixo inteiro fica no :where(): ali a regra nunca
   passa por cima do lara-moderno.css. Por isso esta folha vem depois do
   lara-moderno.css e do lara-login.css no index.html.

   Mesmas regras de desempenho do lara-moderno.css: nada de "X:has(...) Y".
   Os blocos de consulta de estilo (@container style) repetem os do lara-moderno.css (os
   sinais estão lá) e o gulp build gera o compat.lara-escuro.css com eles de
   volta em :has(), como faz com o compat.lara-moderno.css.

   O lara-visual.js desliga esta folha junto com o lara-moderno.css quando
   o usuário escolhe o visual antigo: o tema escuro não existe no legado.
   ========================================================================== */

@media screen {

/* --------------------------------------------------------------------------
   1. Variáveis
   -------------------------------------------------------------------------- */
html[data-lx-tema="escuro"] {
  color-scheme: dark;          /* barras de rolagem, calendário e listas nativas escuros */

  --lx-bg: #0f161d;
  --lx-surface: #172029;
  --lx-surface-2: #1d2731;
  --lx-line: #2a3541;
  --lx-line-strong: #384554;
  --lx-zebra: #1a232c;
  --lx-linha-hover: #213042;

  --lx-text: #e3e8ee;
  --lx-text-2: #b4beca;
  --lx-muted: #8e9aa9;
  --lx-icon: #7c8898;

  --lx-navy: #2b6a99;          /* preenchimento com texto branco (5,6:1) */
  --lx-navy-hover: #3479ac;
  --lx-navy-texto: #8ec3ea;    /* onde o claro usa --lx-navy como cor de texto */
  --lx-blue: #3d8bc7;
  --lx-blue-soft: #1a3043;
  --lx-green: #23a067;
  --lx-green-hover: #2bb576;
  --lx-red: #dc4f4f;
  --lx-red-hover: #e86a6a;
  --lx-amber: #e8a317;
  --lx-voxter: #dc5a5f;
  --lx-voxter-soft: #3b2226;

  --lx-active-bg: #1b2e42;
  --lx-active-line: #2d4c6b;

  --lx-shadow-1: 0 1px 2px rgba(0, 0, 0, .4);
  --lx-shadow-2: 0 12px 32px -12px rgba(0, 0, 0, .7);
  --lx-ring: 0 0 0 3px rgba(61, 139, 199, .35);

  /* tons dos selos, alertas e toasts (o claro escreve as cores direto) */
  --lx-ok-fundo: #15382a;     --lx-ok-linha: #1f5139;     --lx-ok-texto: #6fd3a0;
  --lx-info-fundo: #16304a;   --lx-info-linha: #234a6b;   --lx-info-texto: #8ec3ea;
  --lx-aviso-fundo: #392d12;  --lx-aviso-linha: #5a471b;  --lx-aviso-texto: #f0c869;
  --lx-erro-fundo: #3c1d20;   --lx-erro-linha: #5e2a2e;   --lx-erro-texto: #f29b9b;
  --lx-neutro-fundo: #26313c; --lx-neutro-texto: #bcc6d1;
  --lx-laranja-fundo: #3d2615; --lx-laranja-texto: #f3a56b;
  --lx-vinho-fundo: #3a1f2e;  --lx-vinho-texto: #e59cc2;
  --lx-amarelo-fundo: #383113; --lx-amarelo-texto: #ecd36a;
  --lx-roxo-fundo: #2c2342;   --lx-roxo-texto: #c4a8ec;
  --lx-verde-agua-fundo: #123a36; --lx-verde-agua-texto: #5fd0c0;

  --lx-trilho: #34414f;        /* barras de progresso, chave desligada, rolagem */
  --lx-trilho-forte: #4a5868;
  --lx-apagado: #5d6978;       /* dia fora do mês, página desabilitada */
  --lx-placeholder: #6f7b8a;

  scrollbar-color: var(--lx-trilho) transparent;
}

/* --------------------------------------------------------------------------
   2. Botão de tema no topo (no visual antigo esta folha fica desligada e o
      botão continua com o atributo hidden do HTML)
   -------------------------------------------------------------------------- */
body.app .app-header .lx-tema-item[hidden] { display: list-item !important; }   /* o Bootstrap esconde [hidden] com !important */
body.app .app-header .lx-tema-alternar { cursor: pointer; }
body.app .app-header .lx-tema-alternar > svg {
  width: 20px;
  height: 20px;
  color: var(--lx-muted);
  transition: color .15s ease;
}
body.app .app-header .lx-tema-alternar:hover > svg { color: var(--lx-navy); }
body.app .app-header .lx-tema-alternar .lx-tema-sol { display: none; }
:where([data-lx-tema="escuro"]) body.app .app-header .lx-tema-alternar .lx-tema-sol { display: inline; }
:where([data-lx-tema="escuro"]) body.app .app-header .lx-tema-alternar .lx-tema-lua { display: none; }
:where([data-lx-tema="escuro"]) body.app .app-header .lx-tema-alternar:hover > svg { color: var(--lx-amber); }

/* --------------------------------------------------------------------------
   3. Base, topo e faixa de título
   -------------------------------------------------------------------------- */
:where([data-lx-tema="escuro"]) body.app ::selection { background: #5b2a2f; }
:where([data-lx-tema="escuro"]) body.app .main a:not(.btn):not(.dropdown-item):not(.nav-link):not(.paginate_button) { color: var(--lx-navy-texto); }
:where([data-lx-tema="escuro"]) body.app .app-header .navbar-brand:has(> #logo-home[src*="laranovo"]) {
  background-image: url("../img/logos/lara-cor-escuro.png");
}
:where([data-lx-tema="escuro"]) body.app .app-header .navbar-nav a[href^="tel:"] > i { background: var(--lx-voxter-soft); }
:where([data-lx-tema="escuro"]) body.app .app-header .navbar-nav a[href^="tel:"]::before { color: var(--lx-muted); }
:where([data-lx-tema="escuro"]) body.app .app-header .navbar-nav .nav-item:not(.dropdown) .nav-link > i { color: var(--lx-muted); }
:where([data-lx-tema="escuro"]) body.app .app-header .navbar-nav .nav-item:not(.dropdown) .navbar-badge.badge-warning { color: var(--lx-aviso-texto) !important; }

:where([data-lx-tema="escuro"]) body.app .main .breadcrumb,
:where([data-lx-tema="escuro"]) body.app [ng-controller="DashboardController"] > .container-fluid::before,
:where([data-lx-tema="escuro"]) body.app [ng-controller="TrackerConfigController"] > .container-fluid::before {
  background-image:
    url("../img/logos/logovoxter.png"),
    radial-gradient(60% 140% at 100% 0%, rgba(220, 90, 95, .10) 0%, rgba(220, 90, 95, 0) 70%),
    radial-gradient(110% 160% at 85% 0%, #1b3045 0%, rgba(27, 48, 69, 0) 60%);
}
:where([data-lx-tema="escuro"]) body.app .main [ng-controller="ApnController"] > .row > .col-md-6 > h1 {
  background-image:
    radial-gradient(60% 140% at 100% 0%, rgba(220, 90, 95, .10) 0%, rgba(220, 90, 95, 0) 70%),
    radial-gradient(110% 160% at 85% 0%, #1b3045 0%, rgba(27, 48, 69, 0) 60%);
}
/* faixa presa no topo ao rolar: o vidro fosco é escuro */
@supports (animation-timeline: scroll()) {
  :where([data-lx-tema="escuro"]) body.app .main .breadcrumb { animation-name: lx-faixa-solta-escuro, lx-faixa-compacta; }
  @media (max-width: 575.98px) {
    :where([data-lx-tema="escuro"]) body.app .main .breadcrumb { animation-name: lx-faixa-solta-escuro, lx-faixa-compacta-cel; }
  }
}
@keyframes lx-faixa-solta-escuro {
  to {
    background-color: rgba(23, 32, 41, .88);
    box-shadow: 0 14px 30px -14px rgba(0, 0, 0, .7), 0 1px 2px rgba(0, 0, 0, .3);
    -webkit-backdrop-filter: blur(10px) saturate(1.2);
            backdrop-filter: blur(10px) saturate(1.2);
  }
}

/* barras de rolagem (Chrome/Edge/Safari; o Firefox usa o scrollbar-color do <html>) */
:where([data-lx-tema="escuro"]) body.app ::-webkit-scrollbar-thumb { background-color: var(--lx-trilho); }
:where([data-lx-tema="escuro"]) body.app ::-webkit-scrollbar-thumb:hover { background-color: var(--lx-trilho-forte); }

/* --------------------------------------------------------------------------
   4. Texto que no claro é azul-marinho (--lx-navy) → --lx-navy-texto
   -------------------------------------------------------------------------- */
:where([data-lx-tema="escuro"]) body.app .app-header .nav-link:hover,
:where([data-lx-tema="escuro"]) body.app .app-header .text-dark:hover,
:where([data-lx-tema="escuro"]) body.app .dataTables_wrapper .dt-button:hover:not(.disabled),
:where([data-lx-tema="escuro"]) body.app .dataTables_wrapper .dt-buttons .btn:hover,
:where([data-lx-tema="escuro"]) body.app .dataTables_wrapper .dataTables_paginate .paginate_button:hover,
:where([data-lx-tema="escuro"]) body.app [ng-controller="OrderController"] #table td > a[title="Boleto"],
:where([data-lx-tema="escuro"]) body.app.sidebar-minimized .sidebar .nav > .nav-item:hover > .nav-link,
:where([data-lx-tema="escuro"]) body.app.sidebar-minimized .sidebar .nav-dropdown-items .nav-link:hover,
:where([data-lx-tema="escuro"]) body.app.sidebar-minimized .sidebar .nav-dropdown-items .nav-link.active,
:where([data-lx-tema="escuro"]) body.app .app-header .navbar-nav a[href^="tel:"],
:where([data-lx-tema="escuro"]) body.app [ng-controller="SimcardSharingController"] .col-md-2 > .btn-group > .btn,
:where([data-lx-tema="escuro"]) body.app [ng-controller="SimcardSharingController"] .col-md-12 > .row .btn-info:hover,
:where([data-lx-tema="escuro"]) body .swal2-popup .swal2-title,
:where([data-lx-tema="escuro"]) body.app .main .dropdown-menu .dropdown-item:is(:hover, :focus-visible) { color: var(--lx-navy-texto) !important; }

:where([data-lx-tema="escuro"]) body.app .sidebar .nav-link:hover .nav-icon,
:where([data-lx-tema="escuro"]) body.app.sidebar-minimized .sidebar .nav-item:hover > .nav-link .nav-icon,
:where([data-lx-tema="escuro"]) body.app.sidebar-minimized .sidebar .nav-dropdown-items .nav-link:hover .nav-icon,
:where([data-lx-tema="escuro"]) body.app .main .breadcrumb,
:where([data-lx-tema="escuro"]) body.app [ng-controller="DashboardController"] > .container-fluid::before,
:where([data-lx-tema="escuro"]) body.app [ng-controller="TrackerConfigController"] > .container-fluid::before,
:where([data-lx-tema="escuro"]) body.app .main .breadcrumb-item,
:where([data-lx-tema="escuro"]) body.app .main .breadcrumb-item.active,
:where([data-lx-tema="escuro"]) body.app .select2-container--default .select2-selection--multiple .select2-selection__choice,
:where([data-lx-tema="escuro"]) body.app .select2-container--default .select2-results__option--highlighted[aria-selected],
:where([data-lx-tema="escuro"]) body.app .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable,
:where([data-lx-tema="escuro"]) body.app .select2-container--default .select2-results__option[aria-selected="true"],
:where([data-lx-tema="escuro"]) body.app .btn-secondary:hover,
:where([data-lx-tema="escuro"]) body.app .btn-light:hover,
:where([data-lx-tema="escuro"]) body.app .btn-secondary:not(:disabled):not(.disabled):active,
:where([data-lx-tema="escuro"]) body.app .show > .btn-secondary.dropdown-toggle,
:where([data-lx-tema="escuro"]) body.app .btn-outline-primary,
:where([data-lx-tema="escuro"]) body.app .main .table .btn-primary.btn-sm,
:where([data-lx-tema="escuro"]) body.app .main .table .btn-group > .btn-primary,
:where([data-lx-tema="escuro"]) body.app .dataTables_wrapper .dataTables_filter label,
:where([data-lx-tema="escuro"]) body.app .main table img[src*="assets/img/"] ~ .badge,
:where([data-lx-tema="escuro"]) body.app .main .badge-primary,
:where([data-lx-tema="escuro"]) body.app .modal .badge-primary,
:where([data-lx-tema="escuro"]) body.app .dropdown-item:hover,
:where([data-lx-tema="escuro"]) body.app .dropdown-item:focus,
:where([data-lx-tema="escuro"]) body.app .dropdown-item:active,
:where([data-lx-tema="escuro"]) body.app .modal-title,
:where([data-lx-tema="escuro"]) body.app .list-group-item.active,
:where([data-lx-tema="escuro"]) body.app .nav-tabs .nav-link.active,
:where([data-lx-tema="escuro"]) body.app [ng-controller="HomeController"] p > strong,
:where([data-lx-tema="escuro"]) body.app [ng-controller="HomeController"] .card-title,
:where([data-lx-tema="escuro"]) body.app .datepicker .datepicker-switch,
:where([data-lx-tema="escuro"]) body.app .datepicker table tr td.day:hover,
:where([data-lx-tema="escuro"]) body.app .datepicker table tr td.focused,
:where([data-lx-tema="escuro"]) body.app .datepicker table tr td span:hover,
:where([data-lx-tema="escuro"]) body.app .app-header .navbar-nav .nav-item .nav-link:hover > i,
:where([data-lx-tema="escuro"]) body.app .app-header .navbar-nav .nav-item:not(.dropdown) .nav-link:hover > i,
:where([data-lx-tema="escuro"]) body.app #modal_view_order .modal-body .card > .card-body > h4,
:where([data-lx-tema="escuro"]) body.app #modal_view_order .card-body > .text-right > h4,
:where([data-lx-tema="escuro"]) #toast-container > .toast .toast-title,
:where([data-lx-tema="escuro"]) #toast-container > .toast .toast-close-button:hover,
:where([data-lx-tema="escuro"]) body .swal2-popup .swal2-close:hover,
:where([data-lx-tema="escuro"]) body.app .form-check > input[type="radio"]:only-of-type:checked + label,
:where([data-lx-tema="escuro"]) body.app [ng-controller="ImportController"] [ngf-select] > .alert::before,
:where([data-lx-tema="escuro"]) body.app .main [ngf-select] > .alert::before,
:where([data-lx-tema="escuro"]) body.app [ng-controller="OrderController"] > .container-fluid > form#form .card-body > h4.text-center,
:where([data-lx-tema="escuro"]) body.app [ng-controller="OrderController"] form .card-body > .text-right > h4,
:where([data-lx-tema="escuro"]) body.app [ng-controller="NFAvulsaFormController"] .card-title,
:where([data-lx-tema="escuro"]) body.app .main [ng-controller="ApnController"] > .row > .col-md-6 > h1,
:where([data-lx-tema="escuro"]) body.app .main [ng-controller="ApnController"] .card-header,
:where([data-lx-tema="escuro"]) body.app .main [ng-controller="ApnController"] .card-body,
:where([data-lx-tema="escuro"]) body.app .main [ng-controller="ApnController"] .card-body > div:not(:empty) b { color: var(--lx-navy-texto); }
/* separados: um seletor que o navegador não entende derruba a lista inteira */
:where([data-lx-tema="escuro"]) body.app .main input[type="file"]::file-selector-button { color: var(--lx-navy-texto); }
:where([data-lx-tema="escuro"]) body.app .card-body:has(> #myChart)::after,
:where([data-lx-tema="escuro"]) body.app .card-body:has(> #myChart2)::after { color: var(--lx-navy-texto); background: var(--lx-info-fundo); border-color: var(--lx-info-linha); }
:where([data-lx-tema="escuro"]) body.app #myChart svg > g:first-of-type text,
:where([data-lx-tema="escuro"]) body.app #myChart2 svg > g:first-of-type text,
:where([data-lx-tema="escuro"]) body.app .main svg text[fill="#0000ff"] { fill: var(--lx-navy-texto); }
@supports (appearance: base-select) {
  :where([data-lx-tema="escuro"]) body.app select option:hover,
  :where([data-lx-tema="escuro"]) body.app select option:focus-visible,
  :where([data-lx-tema="escuro"]) body.app select option:checked { color: var(--lx-navy-texto); }
}
@supports (anchor-name: --a) {
  :where([data-lx-tema="escuro"]) body.app .form-check > input[type="radio"]:not(:only-of-type):checked + label { color: var(--lx-navy-texto); }
}
@supports not (anchor-name: --a) {
  :where([data-lx-tema="escuro"]) body.app .form-check > input[type="radio"]:not(:only-of-type):checked + label { color: var(--lx-navy-texto); }
}
@container style(--lx-h28: 1) {:where([data-lx-tema="escuro"]) body.app .main .clearfix > h4:not(.lx-n):not(lx-n):not(lx-n){ color: var(--lx-navy-texto); }}

/* --------------------------------------------------------------------------
   5. Formulários
   -------------------------------------------------------------------------- */
:where([data-lx-tema="escuro"]) body.app .form-control::placeholder,
:where([data-lx-tema="escuro"]) body.app input[type="date"]::-webkit-datetime-edit-text { color: var(--lx-placeholder); }
:where([data-lx-tema="escuro"]) body.app input[type="date"]:invalid::-webkit-datetime-edit,
:where([data-lx-tema="escuro"]) body.app input[type="date"]:not(:focus):in-range::-webkit-datetime-edit-day-field:placeholder-shown { color: var(--lx-placeholder); }
:where([data-lx-tema="escuro"]) body.app .select2-container--default .select2-selection--multiple .select2-selection__choice { border-color: var(--lx-info-linha); }

/* título na borda do campo (linhas de filtro): o recorte acompanha o fundo do campo */
@container style(--lx-h2: 1) {:where([data-lx-tema="escuro"]) body.app .main .row:not(.modal .row):not([class*="col"] .row):not(form .row):not([ng-controller="SimcardSharingController"] .row) > [class*="col"] > label:not(.form-check-label):not(.lx-n):not(.lx-n):not(.lx-n):not(.lx-n):not(.lx-n):not(lx-n):not(lx-n),
:where([data-lx-tema="escuro"]) body.app .main .row:not(.modal .row):not([class*="col"] .row):not(form .row):not([ng-controller="SimcardSharingController"] .row) > [class*="col"] > .form-group > label:not(.form-check-label):not(.lx-n):not(.lx-n):not(.lx-n):not(.lx-n):not(.lx-n):not(lx-n):not(lx-n){ background: var(--lx-surface); }}
@container style(--lx-h2: 1) {:where([data-lx-tema="escuro"]) body.app .main .row:not(.modal .row):not([class*="col"] .row):not(form .row):not([ng-controller="SimcardSharingController"] .row) > [class*="col"]:has(> input ~ input):not(:has(> label)):not(.lx-n):not(.lx-n):not(.lx-n):not(.lx-n):not(.lx-n):not(lx-n):not(lx-n)::before{ background: var(--lx-surface); }}
@container style(--lx-h2d: 1) {:where([data-lx-tema="escuro"]) body.app .main .row:not(.modal .row):not([class*="col"] .row):not(form .row):not([ng-controller="SimcardSharingController"] .row) > [class*="col"] .row > [class*="col"] > label:not(.lx-n):not(.lx-n):not(.lx-n):not(.lx-n):not(.lx-n):not(lx-n):not(lx-n){ background: var(--lx-surface); }}

/* chave liga/desliga e rádio */
:where([data-lx-tema="escuro"]) body.app .main .form-group > input[type="checkbox"],
:where([data-lx-tema="escuro"]) body.app .main .form-check:not(.form-check-inline) > input[type="checkbox"].lx-switch { background: var(--lx-trilho-forte); }
:where([data-lx-tema="escuro"]) body.app .main .form-check:not(.form-check-inline):not(table *) > input[type="checkbox"]:has(+ label) { background: var(--lx-trilho-forte); }
:where([data-lx-tema="escuro"]) body.app .form-check > input[type="radio"] + label::before { border-color: var(--lx-trilho-forte); background: var(--lx-surface); }
:where([data-lx-tema="escuro"]) body.app .form-check > input[type="radio"]:checked + label::before { box-shadow: inset 0 0 0 3px var(--lx-surface), inset 0 0 0 8px var(--lx-navy-texto); border-color: var(--lx-navy-texto); }
:where([data-lx-tema="escuro"]) body.app .form-check > input[type="radio"]:only-of-type:hover + label::after { border-color: var(--lx-trilho-forte); }
@supports (anchor-name: --a) {
  :where([data-lx-tema="escuro"]) body.app .form-check > input[type="radio"]:not(:only-of-type):hover + label { border-color: var(--lx-trilho-forte); }
}
@supports not (anchor-name: --a) {
  :where([data-lx-tema="escuro"]) body.app .form-check > input[type="radio"]:not(:only-of-type) + label:hover { border-color: var(--lx-trilho-forte); }
}

/* validação */
/* o fundo fica o do cartão (no claro o #fffafa também é quase o branco): o título na
   borda do campo recorta a linha com o fundo do cartão e não pode destoar do campo */
:where([data-lx-tema="escuro"]) body.app :is(.form-control, .custom-select):is(.is-invalid, .ng-invalid.ng-touched) { border-color: #a3474b !important; background-color: var(--lx-surface); }
:where([data-lx-tema="escuro"]) body.app :is(.form-control, .custom-select):is(.is-invalid, .ng-invalid.ng-touched):focus { border-color: var(--lx-red) !important; box-shadow: 0 0 0 3px rgba(220, 79, 79, .3) !important; }
@container style(--lx-h27: 1) {:where([data-lx-tema="escuro"]) body.app .form-group > label:not(.lx-n):not(.lx-n):not(.lx-n){ color: var(--lx-erro-texto) !important; }}
:where([data-lx-tema="escuro"]) body.app .invalid-feedback { color: var(--lx-erro-texto); }
:where([data-lx-tema="escuro"]) body.app .form-control.is-valid { border-color: var(--lx-ok-linha) !important; }

/* --------------------------------------------------------------------------
   6. Botões
   -------------------------------------------------------------------------- */
:where([data-lx-tema="escuro"]) body.app .btn-dark { background-color: var(--lx-surface-2); border-color: var(--lx-line-strong); color: var(--lx-text); }
:where([data-lx-tema="escuro"]) body.app .main .table .btn-primary.btn-sm,
:where([data-lx-tema="escuro"]) body.app .main .table .btn-group > .btn-primary { border-color: var(--lx-info-linha); }
/* Compartilhamento: − e + tingidos */
:where([data-lx-tema="escuro"]) body.app [ng-controller="SimcardSharingController"] .col-md-2 > .btn-group > .btn-danger { background: var(--lx-erro-fundo) !important; color: var(--lx-erro-texto) !important; box-shadow: inset 0 0 0 1px var(--lx-erro-linha) !important; }
:where([data-lx-tema="escuro"]) body.app [ng-controller="SimcardSharingController"] .col-md-2 > .btn-group > .btn-success { background: var(--lx-ok-fundo) !important; color: var(--lx-ok-texto) !important; box-shadow: inset 0 0 0 1px var(--lx-ok-linha) !important; }
:where([data-lx-tema="escuro"]) body.app [ng-controller="SimcardSharingController"] .col-md-2 > .btn-group > .btn-danger:hover { background: #4a2327 !important; }
:where([data-lx-tema="escuro"]) body.app [ng-controller="SimcardSharingController"] .col-md-2 > .btn-group > .btn-success:hover { background: #1a4632 !important; }
/* Sentinela: o "Enfileirar Comandos" é quase da cor do fundo; ganha contorno */
:where([data-lx-tema="escuro"]) body.app [ng-controller="TrackerConfigController"] button[ng-click="loadSendCommand()"] { box-shadow: inset 0 0 0 1px var(--lx-line-strong), 0 12px 24px -12px rgba(0, 0, 0, .8); }

/* --------------------------------------------------------------------------
   7. Tabelas
   -------------------------------------------------------------------------- */
:where([data-lx-tema="escuro"]) body.app .main .table .progress::before { background: var(--lx-trilho); }
:where([data-lx-tema="escuro"]) body.app .main table.dataTable.display tbody tr > .sorting_1,
:where([data-lx-tema="escuro"]) body.app .main table.dataTable.order-column tbody tr > .sorting_1,
:where([data-lx-tema="escuro"]) body.app .main table.dataTable.display tbody tr.odd > .sorting_1,
:where([data-lx-tema="escuro"]) body.app .main table.dataTable.display tbody tr.even > .sorting_1 {
  background-image: linear-gradient(rgba(255, 255, 255, .025), rgba(255, 255, 255, .025));
}
:where([data-lx-tema="escuro"]) body.app .dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
:where([data-lx-tema="escuro"]) body.app .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover { color: var(--lx-apagado) !important; }
:where([data-lx-tema="escuro"]) body.app table.dataTable td.dataTables_empty::before { color: var(--lx-apagado); }

/* operadora desligada (a cor de cada operadora fica como está) */
:where([data-lx-tema="escuro"]) body.app .main table img:is([src$="_on.png"], [src$="_off.png"])[src*="assets/img/"][src$="_off.png"] { background-color: #4a5461 !important; }

/* colunas presas do lara-tabelas.js. O <style> dele entra no <head> depois desta
   folha e venceria o empate; por isso aqui o atributo pesa (sem :where) e as
   regras repetem a ordem dele: célula presa, cabeçalho, linha par, hover. */
[data-lx-tema="escuro"] .lxt-rolavel :is(.lxt-rola > table, .lxt-rola > .table-responsive > table) > * > tr > :first-child,
[data-lx-tema="escuro"] .lxt-rolavel.lxt-dupla :is(.lxt-rola > table, .lxt-rola > .table-responsive > table) > * > tr > :nth-child(2),
[data-lx-tema="escuro"] .lxt-rolavel.lxt-acoes :is(.lxt-rola > table, .lxt-rola > .table-responsive > table) > * > tr > :last-child { background-color: var(--lx-surface); }
[data-lx-tema="escuro"] .lxt-rolavel :is(.lxt-rola > table, .lxt-rola > .table-responsive > table) > thead > tr > * { background-color: var(--lx-surface-2); }
[data-lx-tema="escuro"] .lxt-rolavel :is(.lxt-rola > table, .lxt-rola > .table-responsive > table) > tbody > tr:nth-child(even) > * { background-color: var(--lx-zebra); }
[data-lx-tema="escuro"] .lxt-rolavel :is(.lxt-rola > table, .lxt-rola > .table-responsive > table) > tbody > tr:hover > * { background-color: var(--lx-linha-hover); }
[data-lx-tema="escuro"] .lxt-sombra-esq:not(.lxt-dupla) :is(.lxt-rola > table, .lxt-rola > .table-responsive > table) > * > tr > :first-child,
[data-lx-tema="escuro"] .lxt-sombra-esq.lxt-dupla :is(.lxt-rola > table, .lxt-rola > .table-responsive > table) > * > tr > :nth-child(2) { box-shadow: 14px 0 16px -10px rgba(0, 0, 0, .6), inset -1px 0 0 var(--lx-line); }
[data-lx-tema="escuro"] .lxt-sombra-dir.lxt-acoes :is(.lxt-rola > table, .lxt-rola > .table-responsive > table) > * > tr > :last-child { box-shadow: -14px 0 16px -10px rgba(0, 0, 0, .6), inset 1px 0 0 var(--lx-line); }
[data-lx-tema="escuro"] .lxt-rola::-webkit-scrollbar-thumb { background: var(--lx-trilho); }
[data-lx-tema="escuro"] .lxt-seta { background: var(--lx-navy); }
[data-lx-tema="escuro"] .lxt-seta:hover { background: var(--lx-navy-hover); }

/* --------------------------------------------------------------------------
   8. Selos, status e alertas
   -------------------------------------------------------------------------- */
:where([data-lx-tema="escuro"]) body.app .main .badge-success,
:where([data-lx-tema="escuro"]) body.app .modal .badge-success,
:where([data-lx-tema="escuro"]) body.app .main .table .badge.lx-st-ativo,
:where([data-lx-tema="escuro"]) body.app [ng-controller="OnlineUsersController"] td > .badge.badge-success,
:where([data-lx-tema="escuro"]) body.app [ng-controller="OrderController"] #table td > i[title="Pago"] { background: var(--lx-ok-fundo); color: var(--lx-ok-texto); }
:where([data-lx-tema="escuro"]) body.app [ng-controller="OrderController"] #table td > i[title="Pago"] { color: var(--lx-ok-texto) !important; }
:where([data-lx-tema="escuro"]) body.app .main .badge-info,
:where([data-lx-tema="escuro"]) body.app .modal .badge-info,
:where([data-lx-tema="escuro"]) body.app .main table img[src*="assets/img/"] ~ .badge.lx-rede-4g { background: var(--lx-info-fundo); color: var(--lx-info-texto); }
:where([data-lx-tema="escuro"]) body.app .main table img[src*="assets/img/"] ~ .badge { background: var(--lx-info-fundo); }
:where([data-lx-tema="escuro"]) body.app .main table img[src*="assets/img/"] ~ .badge.lx-rede-3g { background: #1a2c3c; color: #7fb0d8; }
:where([data-lx-tema="escuro"]) body.app .main table img[src*="assets/img/"] ~ .badge.lx-rede-2g { background: #1d2833; color: #8aa3ba; }
:where([data-lx-tema="escuro"]) body.app .main .badge-primary,
:where([data-lx-tema="escuro"]) body.app .modal .badge-primary { background: var(--lx-neutro-fundo); }
:where([data-lx-tema="escuro"]) body.app .main .badge-warning,
:where([data-lx-tema="escuro"]) body.app .modal .badge-warning { background: var(--lx-aviso-fundo); color: var(--lx-aviso-texto); }
:where([data-lx-tema="escuro"]) body.app .main .badge-danger,
:where([data-lx-tema="escuro"]) body.app .modal .badge-danger,
:where([data-lx-tema="escuro"]) body.app .main .table .badge.lx-st-bloqueado { background: var(--lx-erro-fundo); color: var(--lx-erro-texto); }
:where([data-lx-tema="escuro"]) body.app .main .badge-secondary,
:where([data-lx-tema="escuro"]) body.app .modal .badge-secondary,
:where([data-lx-tema="escuro"]) body.app .main .table .badge.lx-st-pre-ativo,
:where([data-lx-tema="escuro"]) body.app [ng-controller="OnlineUsersController"] td > .badge.badge-secondary { background: var(--lx-neutro-fundo); color: var(--lx-neutro-texto); }
:where([data-lx-tema="escuro"]) body.app .main .table .badge.lx-st-suspenso { background: var(--lx-laranja-fundo); color: var(--lx-laranja-texto); }
:where([data-lx-tema="escuro"]) body.app .main .table .badge.lx-st-cancelado { background: var(--lx-vinho-fundo); color: var(--lx-vinho-texto); }
:where([data-lx-tema="escuro"]) body.app .main .table .badge.lx-st-limite { background: var(--lx-amarelo-fundo); color: var(--lx-amarelo-texto); }
:where([data-lx-tema="escuro"]) body.app .main .table .badge.lx-st-reposicao { background: var(--lx-roxo-fundo); color: var(--lx-roxo-texto); }
@container style(--lx-h7d: 1) {:where([data-lx-tema="escuro"]) body.app .main .alert.alert-info .badge-success:not(.lx-n):not(.lx-n):not(.lx-n){ background: var(--lx-ok-fundo); color: var(--lx-ok-texto); }}
@container style(--lx-h7d: 1) {:where([data-lx-tema="escuro"]) body.app .main .alert.alert-info .badge-primary:not(.lx-n):not(.lx-n):not(.lx-n){ background: var(--lx-neutro-fundo); color: var(--lx-navy-texto); }}

/* Pedidos: ícones de situação */
:where([data-lx-tema="escuro"]) body.app [ng-controller="OrderController"] #table td > a[title="Aguardando pagamento"] { background: var(--lx-aviso-fundo) !important; color: var(--lx-aviso-texto) !important; }
:where([data-lx-tema="escuro"]) body.app [ng-controller="OrderController"] #table td > i.btn-delivery { background: var(--lx-info-fundo); color: var(--lx-info-texto) !important; }
:where([data-lx-tema="escuro"]) body.app [ng-controller="OrderController"] #table td > i.btn-delivery.fa-check { background: var(--lx-verde-agua-fundo); color: var(--lx-verde-agua-texto) !important; }
:where([data-lx-tema="escuro"]) body.app [ng-controller="OrderController"] #table td > small:only-child { background: var(--lx-erro-fundo); color: var(--lx-erro-texto); }
:where([data-lx-tema="escuro"]) body.app [ng-controller="OrderController"] #table td > a[title="Boleto"] { background: var(--lx-neutro-fundo) !important; }
:where([data-lx-tema="escuro"]) body.app [ng-controller="OrderController"] #table td > a[title="Nota Fiscal"] { background: var(--lx-roxo-fundo); }
:where([data-lx-tema="escuro"]) body.app [ng-controller="OrderController"] #table td > a[title="Nota Fiscal"] > i { color: var(--lx-roxo-texto) !important; }

:where([data-lx-tema="escuro"]) body.app .alert-info    { background: var(--lx-info-fundo);  border-color: var(--lx-info-linha);  color: var(--lx-info-texto); }
:where([data-lx-tema="escuro"]) body.app .alert-success { background: var(--lx-ok-fundo);    border-color: var(--lx-ok-linha);    color: var(--lx-ok-texto); }
:where([data-lx-tema="escuro"]) body.app .alert-warning { background: var(--lx-aviso-fundo); border-color: var(--lx-aviso-linha); color: var(--lx-aviso-texto); }
:where([data-lx-tema="escuro"]) body.app .alert-danger  { background: var(--lx-erro-fundo);  border-color: var(--lx-erro-linha);  color: var(--lx-erro-texto); }
:where([data-lx-tema="escuro"]) body.app .list-group-item-danger { background: var(--lx-erro-fundo); border-color: var(--lx-erro-linha); color: var(--lx-erro-texto); }
:where([data-lx-tema="escuro"]) body.app .progress,
:where([data-lx-tema="escuro"]) body.app [ng-controller="HomeController"] .progress { background: var(--lx-trilho); }

/* APN: caixa de aviso e logo da operadora (o logo é desenhado para fundo branco) */
:where([data-lx-tema="escuro"]) body.app .main [ng-controller="ApnController"] .card-body > div:not(:empty) { background: var(--lx-aviso-fundo); }
:where([data-lx-tema="escuro"]) body.app #modal_view_order .modal-body .card > .card-body > h4 > i { background: var(--lx-voxter-soft); }

/* --------------------------------------------------------------------------
   9. Modal, menus, calendário, toasts e SweetAlert
   -------------------------------------------------------------------------- */
:where([data-lx-tema="escuro"]) body.app .modal-content { background-color: var(--lx-surface); color: var(--lx-text); border: 1px solid var(--lx-line); }
/* sobre a tela já escura o véu de .45 quase não aparece: mais denso para o modal se destacar */
:where([data-lx-tema="escuro"]) body.app .modal-backdrop.show { background: #000; opacity: .7; }
:where([data-lx-tema="escuro"]) body.app .close { color: var(--lx-text); text-shadow: none; }
:where([data-lx-tema="escuro"]) body.app .dropdown-menu { background-color: var(--lx-surface); border-color: var(--lx-line); }
:where([data-lx-tema="escuro"]) body.app .dropdown-divider { border-top-color: var(--lx-line); }
:where([data-lx-tema="escuro"]) body.app .main .dropdown-menu .dropdown-item:active { background: var(--lx-active-bg) !important; }
:where([data-lx-tema="escuro"]) body.app .main .dropdown-menu .dropdown-item:is(.btn-cancel, .btn-delete, .btn-platform-delete):is(:hover, :focus-visible) { background: var(--lx-erro-fundo) !important; }

:where([data-lx-tema="escuro"]) body.app .datepicker-dropdown { background-color: var(--lx-surface); color: var(--lx-text); }
:where([data-lx-tema="escuro"]) body.app .datepicker-dropdown.datepicker-orient-top::after { border-top-color: var(--lx-surface); }
:where([data-lx-tema="escuro"]) body.app .datepicker-dropdown.datepicker-orient-bottom::after { border-bottom-color: var(--lx-surface); }
:where([data-lx-tema="escuro"]) body.app .datepicker table tr td.old,
:where([data-lx-tema="escuro"]) body.app .datepicker table tr td.new,
:where([data-lx-tema="escuro"]) body.app .datepicker table tr td span.old,
:where([data-lx-tema="escuro"]) body.app .datepicker table tr td span.new { color: var(--lx-apagado); }
:where([data-lx-tema="escuro"]) body.app .datepicker table tr td.disabled,
:where([data-lx-tema="escuro"]) body.app .datepicker table tr td.disabled:hover { color: #4d5866 !important; }

:where([data-lx-tema="escuro"]) #toast-container > .toast { background-color: var(--lx-surface); }
:where([data-lx-tema="escuro"]) #toast-container > .toast-success { background-color: var(--lx-ok-fundo);    border-color: var(--lx-ok-linha); }
:where([data-lx-tema="escuro"]) #toast-container > .toast-error   { background-color: var(--lx-erro-fundo);  border-color: var(--lx-erro-linha); }
:where([data-lx-tema="escuro"]) #toast-container > .toast-warning { background-color: var(--lx-aviso-fundo); border-color: var(--lx-aviso-linha); }
:where([data-lx-tema="escuro"]) #toast-container > .toast-info    { background-color: var(--lx-info-fundo);  border-color: var(--lx-info-linha); }
:where([data-lx-tema="escuro"]) #toast-container > .toast .toast-close-button:hover { background: rgba(255, 255, 255, .08); }

:where([data-lx-tema="escuro"]) body .swal2-popup { background: var(--lx-surface); color: var(--lx-text); }
:where([data-lx-tema="escuro"]) body .swal2-popup :is(.swal2-html-container, .swal2-content) { color: var(--lx-text-2); }
:where([data-lx-tema="escuro"]) body .swal2-popup :is(.swal2-input, .swal2-textarea, .swal2-select, .swal2-file) { background: var(--lx-surface); color: var(--lx-text); border-color: var(--lx-line-strong); }
:where([data-lx-tema="escuro"]) body .swal2-popup .swal2-icon.swal2-warning { border-color: var(--lx-aviso-linha) !important; background: var(--lx-aviso-fundo); }
:where([data-lx-tema="escuro"]) body .swal2-popup .swal2-icon.swal2-error { border-color: var(--lx-erro-linha) !important; background: var(--lx-erro-fundo); }
:where([data-lx-tema="escuro"]) body .swal2-popup .swal2-icon.swal2-question,
:where([data-lx-tema="escuro"]) body .swal2-popup .swal2-icon.swal2-info { border-color: var(--lx-info-linha) !important; background: var(--lx-info-fundo); }
:where([data-lx-tema="escuro"]) body .swal2-popup .swal2-icon.swal2-success { border-color: var(--lx-ok-linha) !important; }
:where([data-lx-tema="escuro"]) body .swal2-popup .swal2-icon.swal2-success [class^="swal2-success-circular-line"],
:where([data-lx-tema="escuro"]) body .swal2-popup .swal2-icon.swal2-success .swal2-success-fix { background-color: var(--lx-surface) !important; }
:where([data-lx-tema="escuro"]) body .swal2-popup .swal2-actions .swal2-cancel,
:where([data-lx-tema="escuro"]) body .swal2-popup .swal2-actions .swal2-deny { background: var(--lx-surface) !important; }
:where([data-lx-tema="escuro"]) body .swal2-popup .swal2-validation-message { background: var(--lx-erro-fundo) !important; color: var(--lx-erro-texto) !important; }

/* --------------------------------------------------------------------------
   10. O que o lara-moderno.css deixa com as cores do CoreUI/Bootstrap e dos
       plugins (no claro já combinam com a camada; no escuro ficariam brancos).
       Aqui o prefixo inteiro fica no :where(): a regra tem a força do seletor
       do próprio plugin e nunca passa por cima de uma regra do lara-moderno.css.
   -------------------------------------------------------------------------- */
:where([data-lx-tema="escuro"] body.app) .card,
:where([data-lx-tema="escuro"] body.app) .list-group-item { background-color: var(--lx-surface); color: var(--lx-text); }
:where([data-lx-tema="escuro"] body.app) .table { color: var(--lx-text); }
:where([data-lx-tema="escuro"] body.app) hr { border-top-color: var(--lx-line); }
:where([data-lx-tema="escuro"] body.app) .border,
:where([data-lx-tema="escuro"] body.app) .border-top,
:where([data-lx-tema="escuro"] body.app) .border-bottom { border-color: var(--lx-line) !important; }
:where([data-lx-tema="escuro"] body.app) .bg-white { background-color: var(--lx-surface) !important; }
:where([data-lx-tema="escuro"] body.app) .text-dark,
:where([data-lx-tema="escuro"] body.app) .text-body,
:where([data-lx-tema="escuro"] body.app) .text-black-50 { color: var(--lx-text) !important; }
:where([data-lx-tema="escuro"] body.app) .text-muted,
:where([data-lx-tema="escuro"] body.app) .text-secondary { color: var(--lx-muted) !important; }
/* HTML/JS com cor inline (color: black, background-color: white) */
:where([data-lx-tema="escuro"] body.app) .main [style*="color: black"],
:where([data-lx-tema="escuro"] body.app) .main [style*="color:black"] { color: var(--lx-text) !important; }
:where([data-lx-tema="escuro"] body.app) .main .form-control[style*="background-color: white"] { background-color: var(--lx-surface-2) !important; }
:where([data-lx-tema="escuro"] body.app) [ng-controller="TrackerConfigController"] .card[style*="background-color"] { background-color: var(--lx-surface-2) !important; }

:where([data-lx-tema="escuro"] body.app) .custom-select,
:where([data-lx-tema="escuro"] body.app) select.form-control { background-color: var(--lx-surface); color: var(--lx-text); }
:where([data-lx-tema="escuro"] body.app) .custom-file-label { background-color: var(--lx-surface); border-color: var(--lx-line-strong); color: var(--lx-text-2); }
:where([data-lx-tema="escuro"] body.app) .custom-file-label::after { background-color: var(--lx-surface-2); color: var(--lx-text-2); }
:where([data-lx-tema="escuro"] body.app) .nav-tabs { border-bottom-color: var(--lx-line); }
:where([data-lx-tema="escuro"] body.app) .nav-tabs .nav-link.active { background-color: var(--lx-surface); border-color: var(--lx-line) var(--lx-line) var(--lx-surface); }
:where([data-lx-tema="escuro"] body.app) .tab-content { background: var(--lx-surface); border-color: var(--lx-line); }
:where([data-lx-tema="escuro"] body.app) .page-link { background-color: var(--lx-surface); border-color: var(--lx-line); color: var(--lx-text-2); }
:where([data-lx-tema="escuro"] body.app) .page-item.disabled .page-link { background-color: var(--lx-surface); border-color: var(--lx-line); color: var(--lx-apagado); }
:where([data-lx-tema="escuro"] body.app) .popover { background-color: var(--lx-surface); border-color: var(--lx-line); }
:where([data-lx-tema="escuro"] body.app) .popover-body { color: var(--lx-text); }
:where([data-lx-tema="escuro"] body.app) .popover-header { background-color: var(--lx-surface-2); border-bottom-color: var(--lx-line); color: var(--lx-text); }

/* DataTables */
:where([data-lx-tema="escuro"] body.app) table.dataTable tbody tr { background-color: transparent; }
:where([data-lx-tema="escuro"] body.app) .dataTables_wrapper :is(.dataTables_length, .dataTables_filter, .dataTables_info, .dataTables_processing, .dataTables_paginate) { color: var(--lx-muted); }
:where([data-lx-tema="escuro"] body.app) .dataTables_wrapper .dataTables_processing { background: var(--lx-surface); }
:where([data-lx-tema="escuro"] body.app) table.dataTable.dtr-inline.collapsed > tbody > tr.child,
:where([data-lx-tema="escuro"] body.app) table.dataTable > tbody > tr.child ul.dtr-details > li { border-bottom-color: var(--lx-line); }

/* Select2: a lista aberta vai para o fim do <body>, fora do .main */
:where([data-lx-tema="escuro"] body.app) .select2-dropdown { background-color: var(--lx-surface); color: var(--lx-text); }
:where([data-lx-tema="escuro"] body.app) .select2-container--default .select2-selection--single,
:where([data-lx-tema="escuro"] body.app) .select2-container--default .select2-selection--multiple,
:where([data-lx-tema="escuro"] body.app) .select2-container--default .select2-search--dropdown .select2-search__field { background-color: var(--lx-surface); color: var(--lx-text); }
:where([data-lx-tema="escuro"] body.app) .select2-container--default .select2-selection--single .select2-selection__rendered { color: var(--lx-text); }
:where([data-lx-tema="escuro"] body.app) .select2-container--default.select2-container--disabled :is(.select2-selection--single, .select2-selection--multiple) { background-color: var(--lx-surface-2); }

/* Summernote (FAQ) */
:where([data-lx-tema="escuro"] body.app) .note-editor.note-frame,
:where([data-lx-tema="escuro"] body.app) .note-editor .note-editing-area .note-editable { background-color: var(--lx-surface); color: var(--lx-text); }
:where([data-lx-tema="escuro"] body.app) .note-editor .note-toolbar,
:where([data-lx-tema="escuro"] body.app) .note-editor .note-statusbar { background-color: var(--lx-surface-2); border-color: var(--lx-line); }
:where([data-lx-tema="escuro"] body.app) .note-btn { background-color: var(--lx-surface); border-color: var(--lx-line-strong); color: var(--lx-text-2); }
:where([data-lx-tema="escuro"] body.app) .note-dropdown-menu,
:where([data-lx-tema="escuro"] body.app) .note-modal-content { background-color: var(--lx-surface); color: var(--lx-text); }

/* Google Charts: SVG com fundo, textos e linhas de grade gravados como atributo */
:where([data-lx-tema="escuro"]) body.app .main svg rect[fill="#ffffff"] { fill: transparent; }
:where([data-lx-tema="escuro"]) body.app .main svg text:is([fill="#222222"], [fill="#444444"], [fill="#000000"], [fill="#757575"]) { fill: var(--lx-text-2); }
:where([data-lx-tema="escuro"]) body.app .main svg rect:is([fill="#cccccc"], [fill="#333333"]) { fill: var(--lx-line-strong); }
:where([data-lx-tema="escuro"]) body.app .main svg rect[fill="#ebebeb"] { fill: var(--lx-line); }
:where([data-lx-tema="escuro"]) body.app .main svg path[stroke="#ffffff"] { stroke: var(--lx-surface); }
:where([data-lx-tema="escuro"]) body.app .google-visualization-tooltip { background: var(--lx-surface-2); border-color: var(--lx-line-strong); color: var(--lx-text); }

/* Leaflet (mapa de ERBs e rastreadores): o mapa fica como é; os balões e controles escurecem */
:where([data-lx-tema="escuro"] body.app) .leaflet-popup-content-wrapper,
:where([data-lx-tema="escuro"] body.app) .leaflet-popup-tip,
:where([data-lx-tema="escuro"] body.app) .leaflet-bar a { background: var(--lx-surface); color: var(--lx-text); }
:where([data-lx-tema="escuro"] body.app) .leaflet-bar a { border-bottom-color: var(--lx-line); }
:where([data-lx-tema="escuro"] body.app) .leaflet-control-layers { background: var(--lx-surface); color: var(--lx-text); }
:where([data-lx-tema="escuro"] body.app) .leaflet-control-layers-separator { border-top-color: var(--lx-line); }
:where([data-lx-tema="escuro"] body.app) .leaflet-bar a:hover { background: var(--lx-surface-2); }
:where([data-lx-tema="escuro"] body.app) .leaflet-container .leaflet-control-attribution { background: rgba(23, 32, 41, .8); color: var(--lx-muted); }

/* listas e links do fix.css */
:where([data-lx-tema="escuro"] body.app) .bulk-selection-list { border-color: var(--lx-line); }
:where([data-lx-tema="escuro"] body.app) .dt-truncate-toggle { color: var(--lx-navy-texto); }

/* --------------------------------------------------------------------------
   11. Login (lara-login.css, fora do body.app): o fundo já é escuro; o cartão
       acompanha a escolha feita lá dentro
   -------------------------------------------------------------------------- */
:where([data-lx-tema="escuro"]) .lx-login {
  --lx-l-texto: var(--lx-text);
  --lx-l-texto-2: var(--lx-text-2);
  --lx-l-mudo: var(--lx-muted);
  --lx-l-linha: var(--lx-line-strong);
  --lx-l-campo: var(--lx-surface-2);
}
:where([data-lx-tema="escuro"]) .lx-login-cartao { background: var(--lx-surface); border-color: var(--lx-line); }
:where([data-lx-tema="escuro"]) .lx-login-logo img { content: url("../img/logos/lara-cor-escuro.png"); }
:where([data-lx-tema="escuro"]) .lx-campo > svg.lx-campo-ico,
:where([data-lx-tema="escuro"]) .lx-campo-olho,
:where([data-lx-tema="escuro"]) .lx-campo input::placeholder { color: var(--lx-placeholder); }
:where([data-lx-tema="escuro"]) .lx-campo input:focus { background: var(--lx-surface); }
:where([data-lx-tema="escuro"]) .lx-chave span.lx-chave-trilho { background: var(--lx-trilho-forte); }
:where([data-lx-tema="escuro"]) .lx-login-acesso { border-top-color: var(--lx-line); }
:where([data-lx-tema="escuro"]) .lx-login-apps { background: var(--lx-surface-2); }
:where([data-lx-tema="escuro"]) .lx-loja { background: #2a3644; }
:where([data-lx-tema="escuro"]) .lx-loja:hover { background: #364354; }

} /* @media screen */