/* =====================================================================
   Identidade visual SGA / HUB7 — "Vidro" (aprovada em 16/10/2026)
   Fonte da verdade: toda tela e relatório novos usam estes tokens e componentes.
   Referência viva: /portal/demo/identidade-glass/
   Uso numa página: carregar este arquivo + incluir
   'portal/includes/_identidade_base.html' (fundo e filtro de refração) logo após <body>.
   Prefixo lg-: não colide com o CSS atual do portal (volt.css).

   MODO ESCURO ("Vidro noturno"): todo valor que depende do tema sai de uma variável
   --lg-* declarada em :root (claro) e sobrescrita em :root[data-theme="dark"] (escuro).
   Nunca escrever cor fixa de tema nos componentes: criar/usar um token.
   O atributo data-theme="dark" em <html> é o gatilho (mesmo do portal, ver dark-theme.css);
   sem o atributo vale o claro.

   VISUAL NOVO (28/10/2026, padrão de todas as telas): vidro (blur + refração) só na barra lateral, nas
   barras fixas de busca/ferramentas, nos menus suspensos e nos modais. Cartões, indicadores, régua, tabela,
   chips e paginação são superfícies quase sólidas (--lg-superficie), borda de 1 px, sem desfoque nem sombra.
   PALETAS: 12 cores de ação por usuário em <html data-paleta="...">, blocos no fim deste arquivo; o verde de
   estado "em ordem" (--lg-ok) é fixo em qualquer paleta.
   ===================================================================== */
/* Demonstração isolada: não herda nem altera nenhum CSS do portal.
   Fonte: a do sistema Apple (SF Pro) quando existe; Inter nos demais sistemas. */
:root {
    /* Texto e marca */
    --lg-tinta: #1D1D1F;
    --lg-grafite: #55555B;
    --lg-verde: #0B7A5A;
    --lg-verde-escuro: #096A4D;
    --lg-ambar: #B45309;
    --lg-alerta: #C4254A;
    --lg-ambar-barra: #E0A526;
    --lg-neutro-barra: #C9CBD1;
    --lg-placeholder: #5E5E65;                     /* 5,7:1 sobre o campo claro */
    --lg-texto-brilho: rgba(255,255,255,.7);       /* sombra de leitura do título */

    /* Fundo: base + 4 luzes coloridas (o vidro precisa de algo para desfocar) */
    --lg-papel: #EEF1F5;
    --lg-luz-1: rgba(52,211,153,.40);
    --lg-luz-2: rgba(122,167,255,.34);
    --lg-luz-3: rgba(240,169,58,.30);
    --lg-luz-4: rgba(11,122,90,.24);

    /* Material: camadas do vidro (regular, clara, tingida) e solido para acessibilidade */
    --lg-vidro-a: rgba(255,255,255,.66);
    --lg-vidro-b: rgba(255,255,255,.36);
    --lg-clara-a: rgba(255,255,255,.56);
    --lg-clara-b: rgba(255,255,255,.28);
    --lg-tinto-a: rgba(11,122,90,.34);
    --lg-tinto-b: rgba(11,122,90,.14);
    --lg-borda: rgba(255,255,255,.55);
    --lg-reflexo-a: rgba(255,255,255,.95);         /* realce especular, canto de entrada da luz */
    --lg-reflexo-b: rgba(255,255,255,.7);          /* realce especular, canto de saída */
    --lg-brilho-topo: rgba(255,255,255,.9);
    --lg-brilho-base: rgba(255,255,255,.28);
    --lg-brilho-forte: rgba(255,255,255,.95);
    --lg-solido: rgba(255,255,255,.97);            /* prefers-reduced-transparency */
    --lg-solido-verde: #DDEFE8;
    --lg-solido-contraste: rgba(255,255,255,.96);  /* prefers-contrast */
    --lg-contraste-borda: rgba(0,0,0,.35);

    /* Sombras (só a cor; a geometria fica no componente) */
    --lg-sombra-cor: rgba(20,40,60,.10);
    --lg-sombra-cor-fina: rgba(20,40,60,.06);
    --lg-sombra-chip-cor: rgba(20,40,60,.08);
    --lg-recuo-cor: rgba(20,40,60,.14);            /* sombra interna de trilho e caixa de PIN */
    --lg-recuo-cor-fina: rgba(20,40,60,.12);
    --lg-recuo-foco: rgba(20,40,60,.1);

    /* Superfícies internas: hover, selecionado, campo, trilho, linhas */
    --lg-hover: rgba(255,255,255,.35);
    --lg-realce: rgba(255,255,255,.72);
    --lg-realce-aba: rgba(255,255,255,.78);
    --lg-usuario-fundo: rgba(255,255,255,.45);
    --lg-campo: rgba(255,255,255,.7);              /* campo, chip neutro, botão de vidro */
    --lg-campo-borda: rgba(60,70,85,.58);          /* borda do campo ~3:1 contra a superfície (WCAG 1.4.11) */
    --lg-trilho: rgba(255,255,255,.55);
    --lg-faixa-dia: rgba(255,255,255,.5);
    --lg-linha-forte: rgba(20,40,60,.12);
    --lg-linha: rgba(20,40,60,.08);
    --lg-halo: rgba(11,122,90,.22);                /* anel de foco da barra de busca */
    --lg-halo-campo: rgba(11,122,90,.25);          /* anel de foco de campo e PIN */

    /* Botão primário: o verde do botão é fixo nos dois temas (texto branco, contraste >= 4,5) */
    --lg-botao-a: #0C7E5D;                         /* início do gradiente; branco sobre ele = 5,05:1 */
    --lg-botao-b: #0B7A5A;
    --lg-botao-base-escura: #000;                  /* só para escurecer o botão no hover/pressionado (color-mix) */
    --lg-botao-brilho: rgba(255,255,255,.35);
    --lg-botao-sombra: rgba(11,122,90,.35);
    --lg-sobre-verde: #fff;

    /* Chips e avisos */
    --lg-chip-ok-bg: rgba(11,122,90,.14);
    --lg-chip-alerta-bg: rgba(224,165,38,.22);
    --lg-chip-critico-bg: rgba(196,37,74,.13);
    --lg-chip-ok-fraco: rgba(11,122,90,.12);
    --lg-acento-fraco: color-mix(in srgb, var(--lg-verde) 13%, transparent); /* fundo do item selecionado: segue a paleta */
    --lg-aviso-bg: rgba(224,165,38,.18);
    --lg-chip-alerta-texto: #8A3F06;               /* 5,7 a 6,4:1 sobre --lg-chip-alerta-bg */
    --lg-chip-critico-texto: #A51E3E;              /* 5,2 a 5,9:1 sobre --lg-chip-critico-bg */

    /* Popup */
    --lg-veu: rgba(20,40,60,.42);
    --lg-modal-fundo: #fff;

    /* Visual novo: superfícies quase sólidas, chips sólidos e verde de estado fixo */
    --lg-superficie: rgba(252,253,254,.96);
    --lg-superficie-hover: rgba(243,246,249,.97);
    --lg-chip-ok-solido: #E1F1EA;
    --lg-chip-ok-hover: #D2E9DF;
    --lg-chip-neutro-bg: #ECEEF2;
    --lg-chip-neutro-hover: #E1E4EA;
    --lg-ok: #0B7A5A;                              /* estado "em ordem": não muda com a paleta */
    --lg-ok-fundo: rgba(11,122,90,.14);
    --lg-ok-texto: #096A4D;                        /* texto do chip verde: 5,65:1 sobre --lg-chip-ok-solido */
    --lg-faixa-1: #0B7A5A;                         /* faixa de cores atrás das amostras de vidro da demo */
    --lg-faixa-2: #34D399;
    --lg-faixa-3: #E0A526;
    --lg-faixa-4: #7AA7FF;

    --lg-lateral: 248px;
    --lg-margem: 16px;
    --lg-fonte: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Inter", "Segoe UI", system-ui, sans-serif;
    --lg-mono: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace;
}

/* Vidro noturno: fundo azul-grafite, vidro como camadas claras translúcidas (branco 4 a 9%),
   bordas e brilhos finos, sombras profundas, cores de texto clareadas (contraste >= 4,5:1).
   Todo token de cor do :root acima tem a sua versão aqui (o teste test_vidro_dark_mode confere). */
:root[data-theme="dark"] {
    color-scheme: dark;                            /* campos e listas nativas também escurecem */
    --lg-tinta: #F2F2F4;
    --lg-grafite: #A8A8B0;
    --lg-verde: #34D399;
    --lg-verde-escuro: #10B981;
    --lg-ambar: #F0B84A;
    --lg-alerta: #FF6B88;
    --lg-ambar-barra: #F0B84A;
    --lg-neutro-barra: #4B5260;
    --lg-placeholder: #ABABB4;                     /* 4,7:1 mesmo sobre a lente do vidro escuro */
    --lg-texto-brilho: rgba(0,0,0,.4);

    --lg-papel: #0B0F14;
    --lg-luz-1: rgba(52,211,153,.15);
    --lg-luz-2: rgba(122,167,255,.14);
    --lg-luz-3: rgba(240,169,58,.09);
    --lg-luz-4: rgba(11,122,90,.20);

    --lg-vidro-a: rgba(255,255,255,.09);
    --lg-vidro-b: rgba(255,255,255,.04);
    --lg-clara-a: rgba(255,255,255,.07);
    --lg-clara-b: rgba(255,255,255,.03);
    --lg-tinto-a: rgba(52,211,153,.22);
    --lg-tinto-b: rgba(52,211,153,.08);
    --lg-borda: rgba(255,255,255,.12);
    --lg-reflexo-a: rgba(255,255,255,.34);
    --lg-reflexo-b: rgba(255,255,255,.14);
    --lg-brilho-topo: rgba(255,255,255,.14);
    --lg-brilho-base: rgba(255,255,255,.04);
    --lg-brilho-forte: rgba(255,255,255,.18);
    --lg-solido: rgba(22,27,34,.98);
    --lg-solido-verde: #12332B;
    --lg-solido-contraste: rgba(18,22,28,.98);
    --lg-contraste-borda: rgba(255,255,255,.6);

    --lg-sombra-cor: rgba(0,0,0,.45);
    --lg-sombra-cor-fina: rgba(0,0,0,.35);
    --lg-sombra-chip-cor: rgba(0,0,0,.3);
    --lg-recuo-cor: rgba(0,0,0,.5);
    --lg-recuo-cor-fina: rgba(0,0,0,.45);
    --lg-recuo-foco: rgba(0,0,0,.4);

    --lg-hover: rgba(255,255,255,.07);
    --lg-realce: rgba(255,255,255,.14);
    --lg-realce-aba: rgba(255,255,255,.16);
    --lg-usuario-fundo: rgba(255,255,255,.07);
    --lg-campo: rgba(255,255,255,.08);
    --lg-campo-borda: rgba(255,255,255,.34);
    --lg-trilho: rgba(255,255,255,.10);
    --lg-faixa-dia: rgba(255,255,255,.05);
    --lg-linha-forte: rgba(255,255,255,.16);
    --lg-linha: rgba(255,255,255,.09);
    --lg-halo: rgba(52,211,153,.30);
    --lg-halo-campo: rgba(52,211,153,.32);

    --lg-botao-a: #0C7E5D;
    --lg-botao-b: #0B7A5A;
    --lg-botao-base-escura: #000;
    --lg-botao-brilho: rgba(255,255,255,.3);
    --lg-botao-sombra: rgba(0,0,0,.5);
    --lg-sobre-verde: #fff;

    --lg-chip-ok-bg: rgba(52,211,153,.16);
    --lg-chip-alerta-bg: rgba(240,184,74,.16);
    --lg-chip-critico-bg: rgba(255,107,136,.16);
    --lg-chip-ok-fraco: rgba(52,211,153,.14);
    --lg-acento-fraco: color-mix(in srgb, var(--lg-verde) 16%, transparent);
    --lg-aviso-bg: rgba(240,184,74,.15);
    --lg-chip-alerta-texto: #F0B84A;
    --lg-chip-critico-texto: #FF8AA0;              /* 5,1:1 sobre --lg-chip-critico-bg escuro */

    --lg-veu: rgba(0,0,0,.62);
    --lg-modal-fundo: #161B22;

    --lg-superficie: rgba(30,36,44,.96);
    --lg-superficie-hover: rgba(37,44,54,.97);
    --lg-chip-ok-solido: #14352C;
    --lg-chip-ok-hover: #1A4538;
    --lg-chip-neutro-bg: #2A303A;
    --lg-chip-neutro-hover: #343B47;
    --lg-ok: #34D399;
    --lg-ok-fundo: rgba(52,211,153,.16);
    --lg-ok-texto: #34D399;                        /* 6,93:1 sobre --lg-chip-ok-solido escuro */
    --lg-faixa-1: #0B7A5A;
    --lg-faixa-2: #34D399;
    --lg-faixa-3: #E0A526;
    --lg-faixa-4: #7AA7FF;
}
/* Medidas (não são cor, ficam fora do contrato claro/escuro): raio, curva, ritmo e margens do visual novo. */
:root {
    --lg-raio: 20px;
    --lg-curva: cubic-bezier(.28,.11,.32,1);
    --lg-dur: .24s;
    --lg-margem-pag: 24px;
    --lg-respiro: 32px;
    --lg-gap: 20px;
}
@media (min-width: 821px) { :root { --lg-margem-pag: 32px; } }
@media (min-width: 1024px) { :root { --lg-respiro: 40px; --lg-gap: 24px; } }
@media (min-width: 1280px) { :root { --lg-margem-pag: 40px; } }
/* Cor do botão animável: a transição troca o gradiente sem piscar */
@property --lg-ba { syntax: '<color>'; inherits: false; initial-value: transparent; }
@property --lg-bb { syntax: '<color>'; inherits: false; initial-value: transparent; }
/* Dentro do Vidro, os títulos seguem a tinta do Vidro (dark-theme.css do Volt força títulos com !important). */
:root[data-theme="dark"] :is(.lg-pagina, .lg-conteudo, .lg-vidro) :is(h1, h2, h3, h4, h5, h6) { color: var(--lg-tinta) !important; }
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 24px; }
body.lg-demo, .lg-pagina {
    margin: 0;
    font-family: var(--lg-fonte);
    font-size: 17px;
    line-height: 25px;
    letter-spacing: -.374px;
    color: var(--lg-tinta);
    -webkit-font-smoothing: antialiased;
    background: transparent;
}
.lg-demo :focus-visible, .lg-pagina :focus-visible { outline: 2px solid var(--lg-verde); outline-offset: 3px; border-radius: 10px; }
.lg-demo :is(.lg-botao, .lg-chip, .lg-pag, .lg-seletor-tema button, .lg-select__botao):focus-visible,
.lg-pagina :is(.lg-botao, .lg-chip, .lg-pag, .lg-seletor-tema button, .lg-select__botao):focus-visible { border-radius: 999px; }

/* Fundo: luz colorida para o vidro ter o que desfocar e refratar */
.lg-fundo {
    position: fixed; inset: 0; z-index: -1; background: var(--lg-papel);
    background-image:
        radial-gradient(60% 50% at 12% 8%, var(--lg-luz-1), transparent 70%),
        radial-gradient(50% 45% at 88% 10%, var(--lg-luz-2), transparent 70%),
        radial-gradient(55% 50% at 78% 92%, var(--lg-luz-3), transparent 70%),
        radial-gradient(45% 40% at 16% 86%, var(--lg-luz-4), transparent 70%);
}

/* Material: vidro líquido */
.lg-vidro {
    position: relative;
    background: linear-gradient(135deg, var(--lg-vidro-a), var(--lg-vidro-b));
    -webkit-backdrop-filter: blur(28px) saturate(180%);
    backdrop-filter: blur(28px) saturate(180%);
    border: 1px solid var(--lg-borda);
    box-shadow:
        0 12px 32px var(--lg-sombra-cor),
        0 1px 2px var(--lg-sombra-cor-fina),
        inset 0 1px 0 var(--lg-brilho-topo),
        inset 0 -1px 0 var(--lg-brilho-base);
}
/* realce especular na borda: luz entrando por cima à esquerda e saindo por baixo à direita */
.lg-vidro::before {
    content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
    background: linear-gradient(135deg, var(--lg-reflexo-a), transparent 38%, transparent 62%, var(--lg-reflexo-b));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude;
}
.lg-vidro--clara { background: linear-gradient(135deg, var(--lg-clara-a), var(--lg-clara-b)); -webkit-backdrop-filter: blur(10px) saturate(160%); backdrop-filter: blur(10px) saturate(160%); }
.lg-vidro--verde { background: linear-gradient(135deg, var(--lg-tinto-a), var(--lg-tinto-b)); }
/* refração (só Chromium): a luz "entorta" nas bordas do vidro */
@supports ((backdrop-filter: url(#lg-refracao)) and (not (-moz-appearance: none))) {
    .lg-lente { -webkit-backdrop-filter: url(#lg-refracao) blur(18px) saturate(190%); backdrop-filter: url(#lg-refracao) blur(18px) saturate(190%); }
}

/* Superfícies do visual novo: conteúdo (cartão, indicador, régua, aviso, vazio, dia) quase sólido, sem desfoque,
   sem brilho especular e sem sombra. Vem DEPOIS de .lg-vidro/.lg-lente de propósito: mesma especificidade, esta vence,
   e as telas que ainda trazem "lg-vidro" nesses blocos ficam em superfície sem editar o HTML. */
.lg-cartao, .lg-indicador, .lg-regua, .lg-aviso, .lg-vazio, .lg-dia {
    position: relative; border-radius: var(--lg-raio);
    background: var(--lg-superficie); border: 1px solid var(--lg-linha); box-shadow: none;
    -webkit-backdrop-filter: none; backdrop-filter: none;
    transition: background-color var(--lg-dur) var(--lg-curva), border-color var(--lg-dur) var(--lg-curva);
}
:is(.lg-cartao, .lg-indicador, .lg-regua, .lg-aviso, .lg-vazio, .lg-dia)::before { display: none; }
:is(.lg-cartao, .lg-indicador, .lg-regua, .lg-aviso, .lg-vazio, .lg-dia).lg-vidro--verde { background: var(--lg-solido-verde); }
a.lg-cartao:hover, a.lg-indicador:hover { background: var(--lg-superficie-hover); border-color: var(--lg-linha-forte); }

/* Barra lateral flutuante */
.lg-lateral {
    position: fixed; z-index: 20; top: var(--lg-margem); bottom: var(--lg-margem); left: var(--lg-margem);
    width: var(--lg-lateral); border-radius: 30px; padding: 22px 14px 14px;
    display: flex; flex-direction: column; gap: 22px;
}
.lg-marca { font-size: 19px; font-weight: 700; letter-spacing: -.02em; padding: 0 12px; text-decoration: none; color: inherit; }
.lg-marca span { color: var(--lg-verde); }
.lg-menu { display: flex; flex-direction: column; gap: 4px; margin: 0; padding: 0; list-style: none; }
.lg-menu a {
    position: relative; display: block; padding: 11px 14px; border-radius: 14px; font-size: 15px; font-weight: 500;
    color: var(--lg-grafite); text-decoration: none; transition: color var(--lg-dur) var(--lg-curva), background-color var(--lg-dur) var(--lg-curva);
}
.lg-menu a:hover { color: var(--lg-tinta); background: var(--lg-hover); }
.lg-menu a[aria-current="true"] {
    color: var(--lg-tinta); font-weight: 600; background: var(--lg-realce);
    box-shadow: inset 0 1px 0 var(--lg-brilho-forte);
}
.lg-menu small { display: block; margin: 18px 14px 6px; font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--lg-grafite); }
.lg-usuario { margin-top: auto; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 18px; background: var(--lg-usuario-fundo); }
.lg-avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--lg-botao-b); color: var(--lg-sobre-verde); font-size: 13px; font-weight: 600; display: grid; place-items: center; flex: none; }
.lg-usuario b { display: block; font-size: 14px; font-weight: 600; line-height: 1.2; }
.lg-usuario div span { font-size: 12px; color: var(--lg-grafite); }

/* Conteúdo */
.lg-conteudo { margin-left: calc(var(--lg-lateral) + var(--lg-margem) * 2 + 8px); padding: 32px var(--lg-margem-pag) 120px; max-width: 1180px; }
.lg-topo { position: sticky; top: var(--lg-margem); z-index: 15; display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: var(--lg-respiro); flex-wrap: wrap; }
.lg-titulo { font-size: 32px; line-height: 36px; font-weight: 600; letter-spacing: 0; margin: 0; }
@media (min-width: 1024px) { .lg-titulo { font-size: 40px; line-height: 44px; letter-spacing: -.12px; } }
.lg-ferramentas { display: flex; align-items: center; gap: 8px; padding: 8px 8px 8px 18px; border-radius: 999px; }
.lg-ferramentas input {
    font: inherit; font-size: 17px; line-height: 19px; letter-spacing: -.374px; width: 230px; background: transparent; border: 0; color: var(--lg-tinta); padding: 6px 0;
}
.lg-ferramentas input { min-width: 0; }
.lg-ferramentas input::placeholder { color: var(--lg-placeholder); }
.lg-ferramentas input:focus { outline: none; }
.lg-ferramentas:focus-within { outline: 2px solid var(--lg-verde); outline-offset: 3px; }
.lg-botao {
    --lg-ba: var(--lg-botao-a); --lg-bb: var(--lg-botao-b);
    appearance: none; border: 0; cursor: pointer; font: inherit; font-size: 15px; font-weight: 500; letter-spacing: -.224px; color: var(--lg-sobre-verde);
    padding: 10px 20px; border-radius: 999px;
    background: linear-gradient(180deg, var(--lg-ba), var(--lg-bb)); box-shadow: none;
    transition: --lg-ba var(--lg-dur) var(--lg-curva), --lg-bb var(--lg-dur) var(--lg-curva), background-color var(--lg-dur) var(--lg-curva);
}
/* hover só troca a cor; pressionado escurece um pouco mais (vale para qualquer paleta) */
.lg-botao:hover { --lg-ba: color-mix(in srgb, var(--lg-botao-b) 88%, var(--lg-botao-base-escura)); --lg-bb: var(--lg-ba); }
.lg-botao:active { --lg-ba: color-mix(in srgb, var(--lg-botao-b) 74%, var(--lg-botao-base-escura)); --lg-bb: var(--lg-ba); }

.lg-secao { margin-bottom: 56px; }
.lg-secao > h2 { font-size: 24px; line-height: 28px; font-weight: 600; letter-spacing: -.02em; margin: 0 0 6px; }
.lg-secao > p.lg-sub { margin: 0 0 20px; color: var(--lg-grafite); max-width: 60ch; }

/* Régua de vigência */
.lg-regua { padding: 28px 32px 30px; }
.lg-regua-topo { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.lg-regua-topo h3 { margin: 0; font-size: 1.05rem; font-weight: 600; }
.lg-regua-topo p { margin: 0; font-size: 13px; color: var(--lg-grafite); }
.lg-barra { display: flex; height: 20px; border-radius: 999px; overflow: hidden; gap: 3px; padding: 3px; background: var(--lg-chip-neutro-bg); }
.lg-trecho { height: 100%; border-radius: 999px; transform-origin: left center; animation: lg-cresce 1s cubic-bezier(.22,.8,.3,1) both; }
.lg-trecho--vigente { background: var(--lg-ok); flex: 31; animation-delay: .1s; }
.lg-trecho--avencer { background: var(--lg-ambar-barra); flex: 50; animation-delay: .25s; }
.lg-trecho--vencido { background: var(--lg-alerta); flex: 301; animation-delay: .4s; }
.lg-trecho--sem { background: var(--lg-neutro-barra); flex: 106; animation-delay: .55s; }
@keyframes lg-cresce { from { transform: scaleX(0); opacity: 0; } to { transform: scaleX(1); opacity: 1; } }
.lg-legenda { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin: 24px 0 0; padding: 0; list-style: none; }
.lg-legenda .lg-num { display: block; font-size: 2rem; font-weight: 700; letter-spacing: -.03em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.lg-legenda .lg-rot { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--lg-grafite); }
.lg-ponto { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.lg-ponto[data-estado="ok"] { background: var(--lg-ok); }

/* Indicadores */
.lg-indicadores { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--lg-gap); margin-top: var(--lg-gap); }
.lg-indicador { padding: 20px 22px; }
.lg-indicador .lg-num { font-size: 2.3rem; font-weight: 700; letter-spacing: -.035em; line-height: 1.05; font-variant-numeric: tabular-nums; }
.lg-indicador .lg-rot { font-size: 13px; color: var(--lg-grafite); margin-top: 4px; }
.lg-indicador--ok .lg-num { color: var(--lg-ok); }
.lg-indicador--alerta .lg-num { color: var(--lg-alerta); }

/* Tabela */
.lg-cartao { padding: 24px 28px; }
.lg-rolagem { overflow-x: auto; }
.lg-tabela { width: 100%; border-collapse: collapse; font-size: 15px; }
.lg-tabela th { text-align: left; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--lg-grafite); padding: 0 14px 12px 0; border-bottom: 1px solid var(--lg-linha-forte); white-space: nowrap; }
.lg-tabela td { padding: 15px 14px 15px 0; border-bottom: 1px solid var(--lg-linha); white-space: nowrap; }
.lg-tabela tbody tr:last-child td { border-bottom: 0; padding-bottom: 2px; }
.lg-tabela td:first-child { font-weight: 600; }
.lg-tabela .lg-cnpj { color: var(--lg-grafite); font-variant-numeric: tabular-nums; }
.lg-chip { display: inline-flex; font-size: 14px; line-height: 20px; font-weight: 500; letter-spacing: -.224px; padding: 4px 12px; border-radius: 999px;
    color: var(--lg-grafite); background: var(--lg-chip-neutro-bg); border: 1px solid transparent; box-shadow: none; text-decoration: none;
    transition: background-color var(--lg-dur) var(--lg-curva), color var(--lg-dur) var(--lg-curva); }
a.lg-chip:hover { background: var(--lg-chip-neutro-hover); }
.lg-chip--neutro { color: var(--lg-grafite); background: var(--lg-chip-neutro-bg); }
/* chip verde = estado "em ordem": cor fixa em qualquer paleta */
.lg-chip--ok { color: var(--lg-ok-texto); background: var(--lg-chip-ok-solido); }
a.lg-chip--ok:hover { background: var(--lg-chip-ok-hover); }
.lg-chip--alerta { color: var(--lg-chip-alerta-texto); background: var(--lg-chip-alerta-bg); }
.lg-chip--critico { color: var(--lg-chip-critico-texto); background: var(--lg-chip-critico-bg); }

/* Materiais */
.lg-faixa { position: relative; border-radius: 30px; padding: 28px; overflow: hidden;
    background: repeating-linear-gradient(115deg, var(--lg-faixa-1) 0 22px, var(--lg-faixa-2) 22px 44px, var(--lg-faixa-3) 44px 66px, var(--lg-faixa-4) 66px 88px); }
.lg-amostras { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.lg-amostra { border-radius: 24px; padding: 22px; min-height: 168px; }
.lg-amostra b { display: block; font-size: 1.05rem; font-weight: 600; margin-bottom: 6px; }
.lg-amostra p { margin: 0 0 10px; font-size: 14px; color: var(--lg-tinta); }
.lg-amostra code { font-family: var(--lg-mono); font-size: 12px; color: var(--lg-tinta); opacity: .8; }
.lg-notas { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 16px; }
.lg-notas h3 { margin: 0 0 6px; font-size: 1rem; font-weight: 600; }
.lg-notas p { margin: 0; font-size: 14.5px; color: var(--lg-grafite); }

/* Detalhe */
.lg-detalhe-cab { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; flex-wrap: wrap; margin-bottom: 24px; }
.lg-detalhe-cab h3 { margin: 0 0 2px; font-size: 24px; line-height: 28px; font-weight: 600; letter-spacing: -.02em; }
.lg-detalhe-cab p { margin: 0; color: var(--lg-grafite); font-size: 14.5px; }
.lg-acoes { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
/* Seletor Claro / Escuro / Sistema (pré-visualização do tema) */
.lg-seletor-tema { display: inline-flex; gap: 2px; padding: 4px; border-radius: 999px; }
.lg-seletor-tema button { appearance: none; border: 0; cursor: pointer; font: inherit; font-size: 14px; font-weight: 500; color: var(--lg-grafite);
    background: transparent; padding: 8px 14px; border-radius: 999px; transition: color var(--lg-dur) var(--lg-curva), background-color var(--lg-dur) var(--lg-curva); }
.lg-seletor-tema button:hover { color: var(--lg-tinta); background: var(--lg-hover); }
.lg-seletor-tema button[aria-pressed="true"] { color: var(--lg-tinta); font-weight: 600; background: var(--lg-realce);
    box-shadow: inset 0 1px 0 var(--lg-brilho-forte); }
/* botão secundário: sólido neutro (legível em superfície e em barra de vidro), hover só troca a cor */
.lg-botao--vidro, .lg-botao--vidro:hover, .lg-botao--vidro:active { color: var(--lg-tinta); }
.lg-botao--vidro { background: var(--lg-chip-neutro-bg); }
.lg-botao--vidro:hover, .lg-botao--vidro:active { background: var(--lg-chip-neutro-hover); }
.lg-dados { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px var(--lg-gap); margin: 0; }
.lg-dados dt { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--lg-grafite); margin-bottom: 3px; }
.lg-dados dd { margin: 0; font-size: 1.05rem; font-weight: 500; font-variant-numeric: tabular-nums; }

.lg-rodape { font-size: 13px; color: var(--lg-grafite); max-width: 70ch; }

/* Campos e popup (usados por Meu Ponto e por qualquer tela com formulário em vidro) */
.lg-campo { font: inherit; font-size: 14px; color: var(--lg-tinta); background: var(--lg-campo); border: 1px solid var(--lg-campo-borda);
    border-radius: 12px; padding: 7px 12px; box-shadow: inset 0 1px 3px var(--lg-recuo-cor-fina); }
.lg-campo:focus { outline: none; border-color: var(--lg-verde); box-shadow: inset 0 1px 3px var(--lg-recuo-foco); }
.lg-campo:focus-visible { outline: 2px solid var(--lg-verde); outline-offset: 3px; }

/* Paginação (superfície): .lg-pag num <a>/<button>; .lg-pag--atual com a cor de ação; .lg-pag--off desativada */
.lg-paginacao { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 14px 20px; margin-top: var(--lg-respiro); font-size: 14px; line-height: 20px; letter-spacing: -.224px; color: var(--lg-grafite); }
.lg-paginas { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.lg-pag { min-width: 40px; height: 40px; padding: 0 12px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px;
    font: inherit; font-size: 14px; font-weight: 600; color: var(--lg-tinta); text-decoration: none; cursor: pointer;
    background: var(--lg-superficie); border: 1px solid var(--lg-linha); box-shadow: none;
    transition: background-color var(--lg-dur) var(--lg-curva), color var(--lg-dur) var(--lg-curva); }
a.lg-pag:hover, button.lg-pag:hover { background: var(--lg-superficie-hover); }
.lg-pag--atual, a.lg-pag--atual:hover { color: var(--lg-sobre-verde); border-color: transparent; background: linear-gradient(180deg, var(--lg-botao-a), var(--lg-botao-b)); }
.lg-pag--off { opacity: .45; pointer-events: none; }
@media (max-width: 640px) { .lg-paginacao { justify-content: center; } }

/* Preferências do sistema */
@media (prefers-reduced-motion: reduce) {
    .lg-trecho { animation: none; } html { scroll-behavior: auto; }
    .lg-botao, .lg-chip, .lg-pag, .lg-cartao, .lg-indicador, .lg-menu a, .lg-seletor-tema button { transition: none; }
}
@media (prefers-reduced-transparency: reduce) {
    /* vidro vira sólido: lateral, barras, menus e modais; as superfícies já são opacas */
    .lg-vidro, .lg-vidro--clara, .lg-vidro--verde, .lg-lente { background: var(--lg-solido); -webkit-backdrop-filter: none; backdrop-filter: none; }
    .lg-vidro--verde { background: var(--lg-solido-verde); }
    :is(.lg-cartao, .lg-indicador, .lg-regua, .lg-aviso, .lg-vazio, .lg-dia, .lg-pag:not(.lg-pag--atual)) { background: var(--lg-solido); }
    :is(.lg-cartao, .lg-indicador, .lg-regua, .lg-aviso, .lg-vazio, .lg-dia).lg-vidro--verde { background: var(--lg-solido-verde); }
    a.lg-cartao:hover, a.lg-indicador:hover, a.lg-pag:not(.lg-pag--atual):hover, button.lg-pag:not(.lg-pag--atual):hover { background: var(--lg-solido); }
}
@media (prefers-contrast: more) {
    .lg-vidro { background: var(--lg-solido-contraste); border-color: var(--lg-contraste-borda); }
    :is(.lg-cartao, .lg-indicador, .lg-regua, .lg-aviso, .lg-vazio, .lg-dia, .lg-pag, .lg-chip:not(.lg-chip--ok, .lg-chip--alerta, .lg-chip--critico)) { background-color: var(--lg-solido-contraste); border-color: var(--lg-contraste-borda); }
    .lg-chip--ok { color: var(--lg-tinta); }
    .lg-menu a, .lg-rot, .lg-sub, .lg-cnpj, .lg-paginacao, .lg-tabela th, .lg-dados dt, .lg-select__grupo, .lg-chip { color: var(--lg-tinta); }
    .lg-campo, .lg-select__botao { border-color: var(--lg-contraste-borda); }
}

@media (max-width: 1100px) {
    .lg-indicadores { grid-template-columns: repeat(2, 1fr); }
    .lg-dados { grid-template-columns: repeat(2, 1fr); }
}
/* Celular: a barra lateral vira uma cápsula flutuante no rodapé */
@media (max-width: 820px) {
    .lg-lateral {
        top: auto; left: 12px; right: 12px; bottom: 12px; width: auto; border-radius: 999px;
        flex-direction: row; align-items: center; padding: 8px; gap: 0;
    }
    .lg-marca, .lg-menu small, .lg-usuario { display: none; }
    .lg-menu { flex-direction: row; width: 100%; justify-content: space-between; }
    .lg-menu li { flex: 1; }
    .lg-menu a { padding: 10px 6px; text-align: center; font-size: 13px; border-radius: 999px; }
    .lg-conteudo { margin-left: 0; padding: 24px var(--lg-margem-pag) 120px; }
    .lg-topo { position: static; }
    .lg-topo > .lg-acoes { width: 100%; min-width: 0; }
    .lg-ferramentas { width: 100%; }
    .lg-ferramentas input { flex: 1; width: auto; }
    .lg-legenda { grid-template-columns: repeat(2, 1fr); }
    .lg-amostras, .lg-notas { grid-template-columns: 1fr; }
    .lg-regua { padding: 22px 20px; }
}

/* Barra do topo do portal (lua, sino, usuário) nas telas em Vidro: sem faixa escura, a luz do fundo aparece por trás. */
body .navbar-top,
:root[data-theme="dark"] body .navbar-top {
    background: transparent !important;
    border-bottom: 0 !important;
    box-shadow: none !important;
}

/* Lista suspensa (dropdown): <select class="lg-select"> vira botão de vidro + lista de vidro (portal/js/identidade-select.js).
   O <select> nativo segue no DOM como fonte do valor. Só tokens --lg-*: vale nos dois temas. */
.lg-select { position: relative; display: inline-block; min-width: 200px; max-width: 100%; vertical-align: middle; font-family: var(--lg-fonte); }
.lg-select--bloco { display: block; }
.lg-select__nativo { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none; }
.lg-select__botao {
    width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px 10px 18px;
    font: inherit; font-size: 14.5px; font-weight: 500; color: var(--lg-tinta); text-align: left; cursor: pointer;
    background: var(--lg-campo); border: 1px solid var(--lg-campo-borda); border-radius: 999px;
    box-shadow: inset 0 1px 3px var(--lg-recuo-cor);
    transition: box-shadow var(--lg-dur) var(--lg-curva), background-color var(--lg-dur) var(--lg-curva);
}
.lg-select__botao:hover { background: var(--lg-realce); }
.lg-select__botao[aria-expanded="true"] { border-color: var(--lg-verde); box-shadow: inset 0 1px 3px var(--lg-recuo-foco); }
.lg-select__botao:focus-visible { outline: 2px solid var(--lg-verde); outline-offset: 3px; }
.lg-select__botao:disabled { opacity: .55; cursor: not-allowed; }
.lg-select__rotulo { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lg-select__rotulo--vazio { color: var(--lg-placeholder); font-weight: 400; }
.lg-select__seta { flex: none; width: 16px; height: 16px; color: var(--lg-grafite); transition: transform var(--lg-dur) var(--lg-curva); }
.lg-select__botao[aria-expanded="true"] .lg-select__seta { transform: rotate(180deg); }
/* depois de .lg-vidro de propósito: a lista é fixa na tela, não relativa */
.lg-select__lista {
    position: fixed; z-index: 2000; margin: 0; padding: 6px; list-style: none; box-sizing: border-box; outline: none;
    border-radius: 22px; overflow-y: auto; overscroll-behavior: contain; animation: lg-select-entra .16s ease-out;
}
.lg-select__lista[hidden] { display: none; }
.lg-select__grupo { padding: 10px 14px 4px; font-size: 11.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--lg-grafite); }
.lg-select__opcao { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; border-radius: 14px; font-size: 14.5px; color: var(--lg-tinta); cursor: pointer; }
.lg-select__opcao[data-ativo="true"] { background: var(--lg-hover); }
.lg-select__opcao[aria-selected="true"] { color: var(--lg-verde); font-weight: 600; background: var(--lg-acento-fraco); }
.lg-select__opcao[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
.lg-select__check { flex: none; width: 16px; height: 16px; visibility: hidden; }
.lg-select__opcao[aria-selected="true"] .lg-select__check { visibility: visible; }
@keyframes lg-select-entra { from { opacity: 0; transform: translateY(-4px) scale(.98); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .lg-select__lista { animation: none; } .lg-select__seta, .lg-select__botao { transition: none; } }

/* ============================================================================================================
   Legado em Vidro (.lg-legado): telas antigas em Bootstrap (apólices) ganham o material da identidade sem
   reescrever o HTML. Só tokens --lg-*: vale nos dois temas. Uso: <div class="lg-pagina lg-legado"> ... </div>.
   ============================================================================================================ */
.lg-legado { font-family: var(--lg-fonte); color: var(--lg-tinta); }
.lg-legado h1, .lg-legado h2, .lg-legado h3, .lg-legado h4, .lg-legado h5, .lg-legado h6,
.lg-legado .h1, .lg-legado .h2, .lg-legado .h3, .lg-legado .h4, .lg-legado .h5, .lg-legado .h6 { color: var(--lg-tinta); letter-spacing: -.02em; }
.lg-legado h1.h3, .lg-legado h1 { font-size: 32px; line-height: 36px; font-weight: 600; letter-spacing: 0; }
@media (min-width: 1024px) { .lg-legado h1.h3, .lg-legado h1 { font-size: 40px; line-height: 44px; letter-spacing: -.12px; } }
.lg-legado .text-gray-800, .lg-legado .text-dark, .lg-legado .text-body { color: var(--lg-tinta) !important; }
.lg-legado .text-muted, .lg-legado small, .lg-legado .small.text-muted { color: var(--lg-grafite) !important; }
.lg-legado .text-primary { color: var(--lg-verde) !important; }
.lg-legado .text-success { color: var(--lg-ok) !important; }
.lg-legado .text-danger { color: var(--lg-alerta) !important; }
.lg-legado .text-warning { color: var(--lg-ambar) !important; }
.lg-legado a:not(.btn):not(.nav-link):not(.page-link):not(.dropdown-item):not(.list-group-item) { color: var(--lg-verde); }
.lg-legado hr { border-color: var(--lg-linha); opacity: 1; }
.lg-legado :focus-visible { outline: 2px solid var(--lg-verde); outline-offset: 3px; }

/* cartões */
.lg-legado .card {
    position: relative; color: inherit; margin-bottom: var(--lg-gap); overflow: hidden; border: 1px solid var(--lg-linha); border-radius: var(--lg-raio);
    background: var(--lg-superficie); box-shadow: none;
}
.lg-legado .card .card-header, .lg-legado .card .card-header[class*="header-"] { background: transparent !important; color: var(--lg-tinta); border: 0;
    border-bottom: 1px solid var(--lg-linha); border-radius: 0 !important; padding: 18px 26px; }
.lg-legado .card .card-header * { color: var(--lg-tinta); }
.lg-legado .card .card-header .badge { color: inherit; }
.lg-legado .card-header h1, .lg-legado .card-header h2, .lg-legado .card-header h3, .lg-legado .card-header h4,
.lg-legado .card-header h5, .lg-legado .card-header h6, .lg-legado .card-title { margin: 0; font-size: 1.05rem; font-weight: 600; color: var(--lg-tinta); }
.lg-legado .section-title { color: var(--lg-tinta); border-bottom: 1px solid var(--lg-linha) !important; font-size: 1rem; }
.lg-legado .info-label { color: var(--lg-tinta); }
.lg-legado .info-value { color: var(--lg-grafite); }
.lg-legado .info-row { border-bottom-color: var(--lg-linha) !important; }
.lg-legado .card-header .fa, .lg-legado .card-header .fas, .lg-legado .card-header .far, .lg-legado .card-header .fab,
.lg-legado .card-header svg.icon { display: none; }                         /* título de seção sem ícone */
.lg-legado .card-body { padding: 22px 26px; }
.lg-legado .card-footer { background: transparent; border-top: 1px solid var(--lg-linha); padding: 16px 26px; }

/* campos */
.lg-legado .form-control, .lg-legado .form-select, .lg-legado textarea.form-control,
.lg-legado .input-group-text, .lg-legado .select2-container--bootstrap-5 .select2-selection {
    background-color: var(--lg-campo); color: var(--lg-tinta); border: 1px solid var(--lg-campo-borda); border-radius: 14px; padding: 10px 14px;
    box-shadow: inset 0 1px 3px var(--lg-recuo-cor); font-size: 14.5px;
}
.lg-legado .form-control::placeholder { color: var(--lg-placeholder); }
.lg-legado .form-control:focus, .lg-legado .form-select:focus { background-color: var(--lg-campo); color: var(--lg-tinta);
    border-color: var(--lg-verde); box-shadow: 0 0 0 3px var(--lg-halo-campo), inset 0 1px 3px var(--lg-recuo-foco); }
.lg-legado .form-control:disabled, .lg-legado .form-control[readonly], .lg-legado .form-select:disabled { opacity: .7; }
.lg-legado label, .lg-legado .form-label, .lg-legado .filter-label { font-size: 13px; font-weight: 600; color: var(--lg-grafite); margin-bottom: 6px; }
.lg-legado .form-check-input:checked { background-color: var(--lg-verde); border-color: var(--lg-verde); }
.lg-legado .form-check-label { color: var(--lg-tinta); font-weight: 500; font-size: 14.5px; }
.lg-legado .invalid-feedback { color: var(--lg-alerta); }

/* botões */
.lg-legado .btn { border-radius: 999px; font-weight: 500; letter-spacing: -.224px; padding: 9px 20px; border: 1px solid transparent; transition: background-color var(--lg-dur) var(--lg-curva), color var(--lg-dur) var(--lg-curva); }
.lg-legado .btn-sm { padding: 6px 14px; font-size: 13px; }
.lg-legado .btn-primary, .lg-legado .btn-success, .lg-legado .btn-add, .lg-legado .add-franquia-btn, .lg-legado .add-cobertura-btn, .lg-legado .add-auditoria-btn { color: var(--lg-sobre-verde); border: 0;
    background: linear-gradient(180deg, var(--lg-botao-a), var(--lg-botao-b)); box-shadow: none; }
.lg-legado .btn-primary:hover, .lg-legado .btn-success:hover, .lg-legado .btn-add:hover, .lg-legado .add-franquia-btn:hover, .lg-legado .add-cobertura-btn:hover, .lg-legado .add-auditoria-btn:hover { color: var(--lg-sobre-verde);
    background: color-mix(in srgb, var(--lg-botao-b) 88%, var(--lg-botao-base-escura)); }
.lg-legado .btn-primary:active, .lg-legado .btn-success:active, .lg-legado .btn-add:active, .lg-legado .add-franquia-btn:active, .lg-legado .add-cobertura-btn:active, .lg-legado .add-auditoria-btn:active { background: color-mix(in srgb, var(--lg-botao-b) 74%, var(--lg-botao-base-escura)); }
.lg-legado .btn-secondary, .lg-legado .btn-light, .lg-legado .btn-outline-secondary, .lg-legado .btn-outline-primary, .lg-legado .btn-outline-info,
.lg-legado .btn-outline-dark, .lg-legado .btn-info, .lg-legado .btn-outline-success {
    color: var(--lg-tinta); background: var(--lg-chip-neutro-bg); border-color: transparent; box-shadow: none;
}
.lg-legado .btn-secondary:hover, .lg-legado .btn-light:hover, .lg-legado .btn-outline-secondary:hover, .lg-legado .btn-outline-primary:hover,
.lg-legado .btn-outline-info:hover, .lg-legado .btn-outline-dark:hover, .lg-legado .btn-info:hover, .lg-legado .btn-outline-success:hover {
    color: var(--lg-tinta); background: var(--lg-chip-neutro-hover); }
.lg-legado .btn-danger, .lg-legado .btn-outline-danger, .lg-legado .btn-cancelar-toggle { color: var(--lg-chip-critico-texto); background: var(--lg-chip-critico-bg); border-color: transparent; }
.lg-legado .btn-danger:hover, .lg-legado .btn-outline-danger:hover, .lg-legado .btn-cancelar-toggle:hover { color: var(--lg-chip-critico-texto); filter: brightness(1.08); background: var(--lg-chip-critico-bg); }
.lg-legado .btn-warning, .lg-legado .btn-outline-warning { color: var(--lg-chip-alerta-texto); background: var(--lg-chip-alerta-bg); border-color: transparent; }
.lg-legado .btn:disabled, .lg-legado .btn.disabled { opacity: .55; }
.lg-legado .btn-close { filter: none; opacity: .6; }

/* chips (badges) */
.lg-legado .badge { border-radius: 999px; padding: 4px 12px; font-size: 13px; font-weight: 500; letter-spacing: -.1px; border: 0; box-shadow: none; }
.lg-legado .badge.bg-success, .lg-legado .badge.bg-primary, .lg-legado .badge.badge-vigente { color: var(--lg-ok-texto) !important; background: var(--lg-chip-ok-solido) !important; }
.lg-legado .badge.bg-warning, .lg-legado .badge.text-dark { color: var(--lg-chip-alerta-texto) !important; background: var(--lg-chip-alerta-bg) !important; }
.lg-legado .badge.bg-danger, .lg-legado .badge.badge-cancelado { color: var(--lg-chip-critico-texto) !important; background: var(--lg-chip-critico-bg) !important; }
.lg-legado .badge.badge-expirado { color: var(--lg-grafite) !important; background: var(--lg-chip-neutro-bg) !important; }

/* tabelas */
.lg-legado .table { --bs-table-bg: transparent; --bs-table-color: var(--lg-tinta); --bs-table-striped-color: var(--lg-tinta); --bs-table-hover-color: var(--lg-tinta); --bs-table-active-color: var(--lg-tinta); --bs-table-hover-bg: var(--lg-hover); --bs-table-striped-bg: transparent;
    color: var(--lg-tinta); margin-bottom: 0; font-size: 14.5px; }
.lg-legado .table > :not(caption) > * > * { background-color: transparent; color: inherit; border-bottom-color: var(--lg-linha); padding: 13px 14px; box-shadow: none; }
.lg-legado .table thead th, .lg-legado .table-light th { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--lg-grafite);
    background: transparent !important; border-bottom: 1px solid var(--lg-linha-forte); white-space: nowrap; }
.lg-legado .table > :not(:first-child) { border-top: 0; }
.lg-legado .table > thead { border-bottom: 0; }
.lg-legado .table tbody tr:hover > * { background-color: var(--lg-hover); }
.lg-legado .table-success > *, .lg-legado tr.table-success > * { background-color: var(--lg-ok-fundo) !important; }
.lg-legado .table-danger > *, .lg-legado tr.table-danger > * { background-color: var(--lg-chip-critico-bg) !important; }
.lg-legado .table-warning > *, .lg-legado tr.table-warning > * { background-color: var(--lg-chip-alerta-bg) !important; }
/* moldura da tabela: borda externa sempre visível (a rolagem horizontal não come as beiradas) e grade interna suave */
.lg-legado .table-responsive, .lg-legado .table-scroll { border: 1px solid var(--lg-linha-forte); border-radius: 20px; overflow-x: auto;
    background: transparent; }
.lg-legado .table-bordered > :not(caption) > * { border-width: 0; }
.lg-legado .table-bordered > :not(caption) > * > * { border-width: 0 1px 1px 0; border-style: solid; border-color: var(--lg-linha); }
.lg-legado .table-bordered > :not(caption) > * > *:last-child { border-right-width: 0; }
.lg-legado .table-bordered > tbody > tr:last-child > * { border-bottom-width: 0; }
.lg-legado .table-bordered > thead > tr > * { border-bottom: 1px solid var(--lg-linha-forte); }

/* abas (nav-tabs) em pílula */
.lg-legado .nav-tabs { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 5px; margin-bottom: 18px; border: 1px solid var(--lg-linha); border-radius: 999px;
    background: var(--lg-superficie); }
.lg-legado .nav-tabs .nav-link { border: 0; border-radius: 999px; padding: 9px 18px; font-size: 14.5px; font-weight: 500; color: var(--lg-grafite); background: transparent; }
.lg-legado .nav-tabs .nav-link:hover { color: var(--lg-tinta); background: var(--lg-hover); }
.lg-legado .nav-tabs .nav-link.active { color: var(--lg-tinta); font-weight: 600; background: var(--lg-chip-neutro-bg); box-shadow: none; }
.lg-legado .tab-content { background: transparent; }

/* alertas, listas, paginação, modais, menus */
.lg-legado .alert { border-radius: var(--lg-raio); border: 1px solid var(--lg-linha); color: var(--lg-tinta); background: var(--lg-superficie); }
.lg-legado .alert-success { background: var(--lg-ok-fundo); }
.lg-legado .alert-danger { background: var(--lg-chip-critico-bg); }
.lg-legado .alert-warning { background: var(--lg-aviso-bg); }
.lg-legado .list-group-item { background: transparent; color: var(--lg-tinta); border-color: var(--lg-linha); }
.lg-legado .page-link, :root[data-theme="dark"] .lg-legado .page-link { background: var(--lg-superficie); color: var(--lg-tinta); border: 1px solid var(--lg-linha-forte); border-radius: 999px !important; margin: 0 3px; min-width: 40px; height: 40px; padding: 0 12px; display: inline-flex; align-items: center; justify-content: center; box-shadow: none; transition: background-color var(--lg-dur) var(--lg-curva), color var(--lg-dur) var(--lg-curva); }
.lg-legado a.page-link, .lg-legado a.page-link:hover { color: var(--lg-tinta) !important; }   /* vence o `a:not(...)` azul do dark-theme.css */
.lg-legado a.page-link:hover, :root[data-theme="dark"] .lg-legado a.page-link:hover { background: var(--lg-superficie-hover); }
.lg-legado .page-link:focus-visible { outline: 2px solid var(--lg-verde); outline-offset: 3px; box-shadow: none; }
/* o dark-theme.css pinta a página ativa de azul com especificidade alta: :root:root:root empata e vence */
:root:root:root .lg-legado .page-item.active .page-link, :root:root:root .lg-legado .page-item.active a.page-link { color: var(--lg-sobre-verde) !important; border-color: transparent; background: linear-gradient(180deg, var(--lg-botao-a), var(--lg-botao-b)); }
.lg-legado .page-item.disabled .page-link { opacity: .5; background: var(--lg-superficie); }
.lg-legado .breadcrumb { background: transparent; }
.lg-legado .modal-content { background: var(--lg-modal-fundo); color: var(--lg-tinta); border: 1px solid var(--lg-borda); border-radius: 28px; box-shadow: 0 24px 64px var(--lg-sombra-cor); }
.lg-legado .modal-header, .lg-legado .modal-footer { border-color: var(--lg-linha); }
.lg-legado .dropdown-menu { background: var(--lg-modal-fundo); border: 1px solid var(--lg-borda); border-radius: 18px; box-shadow: 0 16px 40px var(--lg-sombra-cor); }
.lg-legado .dropdown-item { color: var(--lg-tinta); border-radius: 12px; }
.lg-legado .dropdown-item:hover { background: var(--lg-hover); color: var(--lg-tinta); }
/* Select2 (campos com busca) em Vidro. A lista abre anexada ao <body>, por isso o seletor usa body:has(.lg-legado). */
.lg-legado .select2-container .select2-selection--single,
.lg-legado .select2-container .select2-selection--multiple {
    min-height: 44px; background: var(--lg-campo); border: 1px solid var(--lg-campo-borda); border-radius: 14px;
    box-shadow: inset 0 1px 3px var(--lg-recuo-cor); display: flex; align-items: center;
}
.lg-legado .select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 1.4; padding: 0 44px 0 14px; color: var(--lg-tinta); font-size: 14.5px; }
.lg-legado .select2-container--default .select2-selection--single .select2-selection__placeholder { color: var(--lg-placeholder); }
.lg-legado .select2-container--default .select2-selection--single .select2-selection__arrow { height: 100%; right: 8px; }
.lg-legado .select2-container--default .select2-selection--single .select2-selection__arrow b { border-color: var(--lg-grafite) transparent transparent; }
.lg-legado .select2-container--default .select2-selection--single .select2-selection__clear { color: var(--lg-grafite); margin-right: 8px; font-size: 18px; }
.lg-legado .select2-container--default.select2-container--focus .select2-selection--single,
.lg-legado .select2-container--default.select2-container--open .select2-selection--single,
.lg-legado .select2-container--default.select2-container--focus .select2-selection--multiple,
.lg-legado .select2-container--default.select2-container--open .select2-selection--multiple { border-color: var(--lg-verde); box-shadow: 0 0 0 3px var(--lg-halo-campo), inset 0 1px 3px var(--lg-recuo-foco); }
.lg-legado .select2-container--default .select2-selection--multiple { padding: 4px 8px; flex-wrap: wrap; }
.lg-legado .select2-container--default .select2-selection--multiple .select2-selection__choice { background: var(--lg-acento-fraco); color: var(--lg-verde); border: 0; border-radius: 999px; padding: 2px 10px; font-weight: 600; }
.lg-legado .select2-container--default .select2-selection--multiple .select2-selection__choice__remove { color: var(--lg-verde); border: 0; margin-right: 4px; }
body:has(.lg-legado) .select2-container .select2-dropdown {
    background: var(--lg-modal-fundo); color: var(--lg-tinta); border: 1px solid var(--lg-borda); border-radius: 18px; overflow: hidden;
    box-shadow: 0 16px 40px var(--lg-sombra-cor); margin: 6px 0;
}
body:has(.lg-legado) .select2-search--dropdown { padding: 10px 10px 4px; }
body:has(.lg-legado) .select2-search--dropdown .select2-search__field { background: var(--lg-campo); color: var(--lg-tinta); border: 1px solid var(--lg-campo-borda); border-radius: 12px; padding: 9px 12px; outline: none; }
body:has(.lg-legado) .select2-search--dropdown .select2-search__field:focus { border-color: var(--lg-verde); box-shadow: 0 0 0 3px var(--lg-halo-campo); }
body:has(.lg-legado) .select2-results__options { padding: 4px 0 6px; max-height: 280px; }
body:has(.lg-legado) .select2-container .select2-results__option { padding: 10px 14px; margin: 2px 6px; border-radius: 12px; color: var(--lg-tinta); font-size: 14.5px; background: transparent; }
body:has(.lg-legado) .select2-container .select2-results__option--highlighted,
body:has(.lg-legado) .select2-container .select2-results__option--highlighted[aria-selected],
body:has(.lg-legado) .select2-container .select2-results__option--highlighted.select2-results__option--selectable { background: var(--lg-hover) !important; color: var(--lg-tinta) !important; }
body:has(.lg-legado) .select2-container .select2-results__option[aria-selected="true"],
body:has(.lg-legado) .select2-container .select2-results__option--selected { background: var(--lg-acento-fraco) !important; color: var(--lg-verde) !important; font-weight: 600; }
body:has(.lg-legado) .select2-container .select2-results__message { color: var(--lg-grafite); padding: 12px 16px; }
/* Neutros com especificidade acima do dark-theme.css (:root[data-theme=dark] .badge.bg-secondary). Ajustes de contraste das telas de apólice (QA): neutros do dark-theme.css, caixa de aviso e formsets com fundo claro fixo */
:root:root .lg-legado .badge:is(.bg-secondary, .bg-info, .bg-light) { background: var(--lg-chip-neutro-bg) !important; color: var(--lg-grafite) !important; }
.lg-legado .date-help { color: var(--lg-grafite); }
.lg-legado .info-box { background: var(--lg-superficie); color: var(--lg-tinta); border: 1px solid var(--lg-linha); border-radius: var(--lg-raio); }
.lg-legado .info-box h5 { color: var(--lg-tinta); }
.lg-legado .info-box p { color: var(--lg-grafite); }
.lg-legado .info-box .fa, .lg-legado .info-box .fas { color: var(--lg-verde); }
.lg-legado :is(.franquia-formset, .cobertura-formset, .condicao-formset) { background: var(--lg-superficie-hover); border-color: var(--lg-linha-forte); }
.lg-legado .campos-cancelamento { background: var(--lg-aviso-bg); border-color: var(--lg-linha-forte); color: var(--lg-tinta); }
.lg-legado [style*="background:#fff3e0"] { background: var(--lg-aviso-bg) !important; border-color: var(--lg-linha-forte) !important; color: var(--lg-tinta); }
.lg-legado [style*="background:#fff3e0"] :is(strong, span, label) { color: var(--lg-tinta); }
.lg-legado [style*="background:#fff3e0"] .text-muted { color: var(--lg-grafite) !important; }
@media (prefers-reduced-transparency: reduce) { .lg-legado :is(.card, .nav-tabs, .alert, .page-link) { background: var(--lg-solido); } }
@media (prefers-contrast: more) { .lg-legado :is(.card, .nav-tabs, .alert, .page-link) { background: var(--lg-solido-contraste); border-color: var(--lg-contraste-borda); } }

/* =====================================================================================================
   12 PALETAS por usuário: <html data-paleta="indigo|petroleo|cobre|safira|ameixa|grafite|orquidea|marinho|ciano|malva|ardosia">.
   Sem o atributo vale o verde SGA. Cada bloco troca só o acento (--lg-verde, botão, foco, luzes do fundo).
   Botão: texto branco sobre botao-a e botao-b >= 4,5:1 em todas. Texto de acento (--lg-verde) >= 4,5:1 sobre
   --lg-superficie nos dois temas. O verde de ESTADO (--lg-ok, --lg-ok-texto, --lg-chip-ok-solido) vive no :root e NÃO
   é tocado pelas paletas: "em ordem" continua verde em qualquer cor escolhida.
   ===================================================================================================== */

/* ---------- Índigo ---------- */
:root[data-paleta="indigo"] {
    --lg-verde: #4F46E5; --lg-verde-escuro: #4338CA;
    --lg-luz-1: rgba(129,140,248,.40); --lg-luz-2: rgba(56,189,248,.30);
    --lg-luz-3: rgba(244,114,182,.22); --lg-luz-4: rgba(79,70,229,.22);
    --lg-tinto-a: rgba(79,70,229,.30); --lg-tinto-b: rgba(79,70,229,.12);
    --lg-halo: rgba(79,70,229,.22); --lg-halo-campo: rgba(79,70,229,.25);
    --lg-solido-verde: #E3E4FA;
    --lg-botao-a: #6164EC; --lg-botao-b: #4338CA; --lg-botao-sombra: rgba(67,56,202,.35);
}
:root[data-paleta="indigo"][data-theme="dark"] {
    --lg-verde: #A5B4FC; --lg-verde-escuro: #818CF8;
    --lg-luz-1: rgba(129,140,248,.17); --lg-luz-2: rgba(56,189,248,.11);
    --lg-luz-3: rgba(244,114,182,.08); --lg-luz-4: rgba(79,70,229,.22);
    --lg-tinto-a: rgba(129,140,248,.24); --lg-tinto-b: rgba(129,140,248,.08);
    --lg-halo: rgba(129,140,248,.32); --lg-halo-campo: rgba(129,140,248,.34);
    --lg-solido-verde: #1E2145;
}

/* ---------- Azul-petróleo ---------- */
:root[data-paleta="petroleo"] {
    --lg-verde: #0F6E8C; --lg-verde-escuro: #0B617D;
    --lg-luz-1: rgba(34,211,238,.34); --lg-luz-2: rgba(96,165,250,.34);
    --lg-luz-3: rgba(240,169,58,.24); --lg-luz-4: rgba(15,110,140,.24);
    --lg-tinto-a: rgba(15,110,140,.30); --lg-tinto-b: rgba(15,110,140,.12);
    --lg-halo: rgba(15,110,140,.22); --lg-halo-campo: rgba(15,110,140,.25);
    --lg-solido-verde: #DCEBF1;
    --lg-botao-a: #147EA0; --lg-botao-b: #0B617D; --lg-botao-sombra: rgba(11,97,125,.35);
}
:root[data-paleta="petroleo"][data-theme="dark"] {
    --lg-verde: #67D4F0; --lg-verde-escuro: #38BDF8;
    --lg-luz-1: rgba(34,211,238,.15); --lg-luz-2: rgba(96,165,250,.14);
    --lg-luz-3: rgba(240,169,58,.08); --lg-luz-4: rgba(15,110,140,.22);
    --lg-tinto-a: rgba(56,189,248,.22); --lg-tinto-b: rgba(56,189,248,.08);
    --lg-halo: rgba(56,189,248,.30); --lg-halo-campo: rgba(56,189,248,.32);
    --lg-solido-verde: #123241;
}

/* ---------- Cobre ---------- */
:root[data-paleta="cobre"] {
    --lg-verde: #B4470C; --lg-verde-escuro: #A83F08;
    --lg-luz-1: rgba(251,146,60,.34); --lg-luz-2: rgba(244,114,182,.24);
    --lg-luz-3: rgba(122,167,255,.28); --lg-luz-4: rgba(180,71,12,.20);
    --lg-tinto-a: rgba(180,71,12,.28); --lg-tinto-b: rgba(180,71,12,.11);
    --lg-halo: rgba(180,71,12,.22); --lg-halo-campo: rgba(180,71,12,.25);
    --lg-solido-verde: #F7E9E0;
    --lg-botao-a: #C3510E; --lg-botao-b: #A83F08; --lg-botao-sombra: rgba(168,63,8,.35);
}
:root[data-paleta="cobre"][data-theme="dark"] {
    --lg-verde: #FDBA74; --lg-verde-escuro: #FB923C;
    --lg-luz-1: rgba(251,146,60,.16); --lg-luz-2: rgba(244,114,182,.09);
    --lg-luz-3: rgba(122,167,255,.11); --lg-luz-4: rgba(180,71,12,.22);
    --lg-tinto-a: rgba(251,146,60,.22); --lg-tinto-b: rgba(251,146,60,.08);
    --lg-halo: rgba(251,146,60,.30); --lg-halo-campo: rgba(251,146,60,.32);
    --lg-solido-verde: #3A2415;
}

/* ---------- Safira ---------- */
:root[data-paleta="safira"] {
    --lg-verde: #1D4ED8; --lg-verde-escuro: #1E40AF;
    --lg-luz-1: rgba(96,165,250,.36); --lg-luz-2: rgba(56,189,248,.30);
    --lg-luz-3: rgba(167,139,250,.24); --lg-luz-4: rgba(29,78,216,.22);
    --lg-tinto-a: rgba(29,78,216,.30); --lg-tinto-b: rgba(29,78,216,.12);
    --lg-halo: rgba(29,78,216,.22); --lg-halo-campo: rgba(29,78,216,.25);
    --lg-solido-verde: #DFE7FA;
    --lg-botao-a: #2563EB; --lg-botao-b: #1E40AF; --lg-botao-sombra: rgba(29,78,216,.35);
}
:root[data-paleta="safira"][data-theme="dark"] {
    --lg-verde: #93C5FD; --lg-verde-escuro: #60A5FA;
    --lg-luz-1: rgba(96,165,250,.16); --lg-luz-2: rgba(56,189,248,.12);
    --lg-luz-3: rgba(167,139,250,.08); --lg-luz-4: rgba(29,78,216,.22);
    --lg-tinto-a: rgba(96,165,250,.22); --lg-tinto-b: rgba(96,165,250,.08);
    --lg-halo: rgba(96,165,250,.30); --lg-halo-campo: rgba(96,165,250,.32);
    --lg-solido-verde: #14223F;
}

/* ---------- Ameixa ---------- */
:root[data-paleta="ameixa"] {
    --lg-verde: #6D28D9; --lg-verde-escuro: #5B21B6;
    --lg-luz-1: rgba(167,139,250,.36); --lg-luz-2: rgba(244,114,182,.30);
    --lg-luz-3: rgba(96,165,250,.24); --lg-luz-4: rgba(109,40,217,.22);
    --lg-tinto-a: rgba(109,40,217,.30); --lg-tinto-b: rgba(109,40,217,.12);
    --lg-halo: rgba(109,40,217,.22); --lg-halo-campo: rgba(109,40,217,.25);
    --lg-solido-verde: #E9E1F8;
    --lg-botao-a: #7C3AED; --lg-botao-b: #5B21B6; --lg-botao-sombra: rgba(109,40,217,.35);
}
:root[data-paleta="ameixa"][data-theme="dark"] {
    --lg-verde: #C4B5FD; --lg-verde-escuro: #A78BFA;
    --lg-luz-1: rgba(167,139,250,.16); --lg-luz-2: rgba(244,114,182,.12);
    --lg-luz-3: rgba(96,165,250,.08); --lg-luz-4: rgba(109,40,217,.22);
    --lg-tinto-a: rgba(167,139,250,.22); --lg-tinto-b: rgba(167,139,250,.08);
    --lg-halo: rgba(167,139,250,.30); --lg-halo-campo: rgba(167,139,250,.32);
    --lg-solido-verde: #251A45;
}

/* ---------- Grafite ---------- */
:root[data-paleta="grafite"] {
    --lg-verde: #3F3F46; --lg-verde-escuro: #27272A;
    --lg-luz-1: rgba(161,161,170,.36); --lg-luz-2: rgba(148,163,184,.30);
    --lg-luz-3: rgba(214,211,209,.24); --lg-luz-4: rgba(63,63,70,.22);
    --lg-tinto-a: rgba(63,63,70,.30); --lg-tinto-b: rgba(63,63,70,.12);
    --lg-halo: rgba(63,63,70,.22); --lg-halo-campo: rgba(63,63,70,.25);
    --lg-solido-verde: #E4E4E7;
    --lg-botao-a: #52525B; --lg-botao-b: #27272A; --lg-botao-sombra: rgba(63,63,70,.35);
}
:root[data-paleta="grafite"][data-theme="dark"] {
    --lg-verde: #D4D4D8; --lg-verde-escuro: #A1A1AA;
    --lg-luz-1: rgba(161,161,170,.16); --lg-luz-2: rgba(148,163,184,.12);
    --lg-luz-3: rgba(214,211,209,.08); --lg-luz-4: rgba(63,63,70,.22);
    --lg-tinto-a: rgba(212,212,216,.22); --lg-tinto-b: rgba(212,212,216,.08);
    --lg-halo: rgba(212,212,216,.30); --lg-halo-campo: rgba(212,212,216,.32);
    --lg-solido-verde: #222226;
    --lg-botao-a: #E4E4E7; --lg-botao-b: #D4D4D8; --lg-botao-sombra: rgba(0,0,0,.4); --lg-sobre-verde: #18181B;
}

/* ---------- Orquídea ---------- */
:root[data-paleta="orquidea"] {
    --lg-verde: #A21CAF; --lg-verde-escuro: #86198F;
    --lg-luz-1: rgba(232,121,249,.36); --lg-luz-2: rgba(167,139,250,.30);
    --lg-luz-3: rgba(125,211,252,.24); --lg-luz-4: rgba(162,28,175,.22);
    --lg-tinto-a: rgba(162,28,175,.30); --lg-tinto-b: rgba(162,28,175,.12);
    --lg-halo: rgba(162,28,175,.22); --lg-halo-campo: rgba(162,28,175,.25);
    --lg-solido-verde: #F3E0F6;
    --lg-botao-a: #C026D3; --lg-botao-b: #86198F; --lg-botao-sombra: rgba(162,28,175,.35);
}
:root[data-paleta="orquidea"][data-theme="dark"] {
    --lg-verde: #F0ABFC; --lg-verde-escuro: #E879F9;
    --lg-luz-1: rgba(232,121,249,.16); --lg-luz-2: rgba(167,139,250,.12);
    --lg-luz-3: rgba(125,211,252,.08); --lg-luz-4: rgba(162,28,175,.22);
    --lg-tinto-a: rgba(232,121,249,.22); --lg-tinto-b: rgba(232,121,249,.08);
    --lg-halo: rgba(232,121,249,.30); --lg-halo-campo: rgba(232,121,249,.32);
    --lg-solido-verde: #3A1740;
}

/* ---------- Marinho ---------- */
:root[data-paleta="marinho"] {
    --lg-verde: #1E3A8A; --lg-verde-escuro: #172554;
    --lg-luz-1: rgba(99,130,230,.36); --lg-luz-2: rgba(56,189,248,.30);
    --lg-luz-3: rgba(251,191,36,.24); --lg-luz-4: rgba(30,58,138,.22);
    --lg-tinto-a: rgba(30,58,138,.30); --lg-tinto-b: rgba(30,58,138,.12);
    --lg-halo: rgba(30,58,138,.22); --lg-halo-campo: rgba(30,58,138,.25);
    --lg-solido-verde: #DCE2F3;
    --lg-botao-a: #2B4BA8; --lg-botao-b: #172554; --lg-botao-sombra: rgba(30,58,138,.35);
}
:root[data-paleta="marinho"][data-theme="dark"] {
    --lg-verde: #A5B8F5; --lg-verde-escuro: #7C96EC;
    --lg-luz-1: rgba(99,130,230,.16); --lg-luz-2: rgba(56,189,248,.12);
    --lg-luz-3: rgba(251,191,36,.08); --lg-luz-4: rgba(30,58,138,.22);
    --lg-tinto-a: rgba(124,150,236,.22); --lg-tinto-b: rgba(124,150,236,.08);
    --lg-halo: rgba(124,150,236,.30); --lg-halo-campo: rgba(124,150,236,.32);
    --lg-solido-verde: #131C3A;
    --lg-botao-a: #A5B8F5; --lg-botao-b: #7C96EC; --lg-botao-sombra: rgba(0,0,0,.4); --lg-sobre-verde: #0B1226;
}

/* ---------- Ciano ---------- */
:root[data-paleta="ciano"] {
    --lg-verde: #0E7490; --lg-verde-escuro: #155E75;
    --lg-luz-1: rgba(34,211,238,.36); --lg-luz-2: rgba(125,211,252,.30);
    --lg-luz-3: rgba(253,224,71,.24); --lg-luz-4: rgba(14,116,144,.22);
    --lg-tinto-a: rgba(14,116,144,.30); --lg-tinto-b: rgba(14,116,144,.12);
    --lg-halo: rgba(14,116,144,.22); --lg-halo-campo: rgba(14,116,144,.25);
    --lg-solido-verde: #E0F1F5;
    --lg-botao-a: #077E9B; --lg-botao-b: #155E75; --lg-botao-sombra: rgba(14,116,144,.35);
}
:root[data-paleta="ciano"][data-theme="dark"] {
    --lg-verde: #67E8F9; --lg-verde-escuro: #22D3EE;
    --lg-luz-1: rgba(34,211,238,.16); --lg-luz-2: rgba(125,211,252,.12);
    --lg-luz-3: rgba(253,224,71,.08); --lg-luz-4: rgba(14,116,144,.22);
    --lg-tinto-a: rgba(34,211,238,.22); --lg-tinto-b: rgba(34,211,238,.08);
    --lg-halo: rgba(34,211,238,.30); --lg-halo-campo: rgba(34,211,238,.32);
    --lg-solido-verde: #102E36;
}

/* ---------- Malva ---------- */
:root[data-paleta="malva"] {
    --lg-verde: #9D4A6E; --lg-verde-escuro: #833A5A;
    --lg-luz-1: rgba(232,160,191,.36); --lg-luz-2: rgba(196,181,253,.30);
    --lg-luz-3: rgba(253,186,116,.24); --lg-luz-4: rgba(157,74,110,.22);
    --lg-tinto-a: rgba(157,74,110,.30); --lg-tinto-b: rgba(157,74,110,.12);
    --lg-halo: rgba(157,74,110,.22); --lg-halo-campo: rgba(157,74,110,.25);
    --lg-solido-verde: #F2E2EA;
    --lg-botao-a: #AC5A7F; --lg-botao-b: #833A5A; --lg-botao-sombra: rgba(157,74,110,.35);
}
:root[data-paleta="malva"][data-theme="dark"] {
    --lg-verde: #F2B8D0; --lg-verde-escuro: #E89AB9;
    --lg-luz-1: rgba(232,160,191,.16); --lg-luz-2: rgba(196,181,253,.12);
    --lg-luz-3: rgba(253,186,116,.08); --lg-luz-4: rgba(157,74,110,.22);
    --lg-tinto-a: rgba(232,154,185,.22); --lg-tinto-b: rgba(232,154,185,.08);
    --lg-halo: rgba(232,154,185,.30); --lg-halo-campo: rgba(232,154,185,.32);
    --lg-solido-verde: #35192A;
}

/* ---------- Ardósia ---------- */
:root[data-paleta="ardosia"] {
    --lg-verde: #475569; --lg-verde-escuro: #334155;
    --lg-luz-1: rgba(148,163,184,.36); --lg-luz-2: rgba(125,211,252,.30);
    --lg-luz-3: rgba(203,213,225,.24); --lg-luz-4: rgba(71,85,105,.22);
    --lg-tinto-a: rgba(71,85,105,.30); --lg-tinto-b: rgba(71,85,105,.12);
    --lg-halo: rgba(71,85,105,.22); --lg-halo-campo: rgba(71,85,105,.25);
    --lg-solido-verde: #E2E8F0;
    --lg-botao-a: #5B6B82; --lg-botao-b: #334155; --lg-botao-sombra: rgba(71,85,105,.35);
}
:root[data-paleta="ardosia"][data-theme="dark"] {
    --lg-verde: #CBD5E1; --lg-verde-escuro: #94A3B8;
    --lg-luz-1: rgba(148,163,184,.16); --lg-luz-2: rgba(125,211,252,.12);
    --lg-luz-3: rgba(203,213,225,.08); --lg-luz-4: rgba(71,85,105,.22);
    --lg-tinto-a: rgba(148,163,184,.22); --lg-tinto-b: rgba(148,163,184,.08);
    --lg-halo: rgba(148,163,184,.30); --lg-halo-campo: rgba(148,163,184,.32);
    --lg-solido-verde: #1B2431;
    --lg-botao-a: #CBD5E1; --lg-botao-b: #94A3B8; --lg-botao-sombra: rgba(0,0,0,.4); --lg-sobre-verde: #0F172A;
}

/* Prévia das luzes da paleta escolhida (tela de configurações). */
.lg-paleta-luzes { display: flex; height: 44px; border-radius: 14px; overflow: hidden; }
.lg-paleta-luzes i { flex: 1; }