/* ===========================================================================
   CAMADA DE VIDRO (glassmorphism) - paineis internos

   Mesma ideia do dark.css: nao edita tela nenhuma. As regras alcancam os
   utilitarios do Tailwind que as telas ja usam (.bg-white, botoes com bg-*)
   e os tornam translucidos sobre um fundo colorido e difuso. Tirar o <link>
   (includes/_camada_vidro.html) devolve o visual anterior exatamente.

   O QUE E VIDRO: o fundo da pagina, a barra do topo, os cartoes dentro do
   <main>, os botoes e o menu lateral.

   O QUE FICA OPACO, DE PROPOSITO: tudo que flutua por cima de outro conteudo
   (.absolute, .fixed, .sticky - dropdown, modal, cabecalho de tabela preso) e
   os campos de formulario. Translucido em cima de texto fica ilegivel.

   SEM DESFOQUE (`backdrop-filter`) EM LUGAR NENHUM, por decisao de 05/10/2026:
   e a unica parte deste visual que pesa de verdade numa maquina sem placa de
   video, e ainda vira "containing block" de todo `position: fixed` de dentro
   (um modal aberto dentro de um elemento desfocado descolaria da tela - o
   a11y.css documenta a mesma armadilha com `filter`). O efeito de vidro sai
   do que e barato: cor translucida, reflexo em degrade e aro em sombra. O que
   ha atras dos cartoes ja e um fundo difuso, entao nao faz falta; a barra do
   topo compensa com um pouco mais de opacidade.

   Sem !important: vence por especificidade e por ordem (carregada por ultimo).
   Tudo dentro de `@media screen`: papel e PDF seguem brancos.
   =========================================================================== */

@media screen {

/* ---- Tokens ---- */
    html {
        --vd-cor: var(--primary-400, #818cf8);
        --vd-base: linear-gradient(160deg, #dde4fb 0%, #e9eef9 45%, #dcebfb 100%);
        --vd-mancha-1: color-mix(in srgb, var(--vd-cor) 62%, transparent);
        --vd-mancha-2: rgba(56, 189, 248, 0.46);
        --vd-mancha-3: rgba(244, 114, 182, 0.40);
        --vd-mancha-4: rgba(52, 211, 153, 0.34);
        --vd-opacidade: 0.48;
        --vd-opacidade-fundo: 0.42;
        --vd-barra: rgba(255, 255, 255, 0.74);
        --vd-borda: rgba(255, 255, 255, 0.75);
        --vd-sombra: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 14px 34px -18px rgba(30, 41, 99, 0.30);
        --vd-botao: inset 0 1px 0 rgba(255, 255, 255, 0.42), inset 0 0 0 1px rgba(255, 255, 255, 0.16), 0 8px 18px -10px rgba(15, 23, 42, 0.45);
        --vd-botao-claro: inset 0 1px 0 rgba(255, 255, 255, 0.85), inset 0 0 0 1px rgba(255, 255, 255, 0.45), 0 6px 16px -10px rgba(15, 23, 42, 0.30);
    }
    /* O FLUXOSST+ nao tem --primary-*: a cor do painel e --plus-from. */
    html:has(.plus-sidebar) { --vd-cor: var(--plus-from, #5b21b6); }

    html[data-theme="dark"] {
        --vd-base: linear-gradient(160deg, #0b101a 0%, var(--dk-bg, #0f1520) 50%, #0c1322 100%);
        --vd-mancha-1: color-mix(in srgb, var(--vd-cor) 46%, transparent);
        --vd-mancha-2: rgba(14, 165, 233, 0.30);
        --vd-mancha-3: rgba(192, 38, 211, 0.26);
        --vd-mancha-4: rgba(16, 185, 129, 0.22);
        --vd-barra: color-mix(in srgb, var(--dk-surface, #1a2231) 80%, transparent);
        --vd-borda: rgba(255, 255, 255, 0.10);
        --vd-sombra: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 14px 34px -18px rgba(0, 0, 0, 0.7);
        --vd-botao: inset 0 1px 0 rgba(255, 255, 255, 0.20), inset 0 0 0 1px rgba(255, 255, 255, 0.08), 0 8px 18px -10px rgba(0, 0, 0, 0.7);
        --vd-botao-claro: inset 0 1px 0 rgba(255, 255, 255, 0.10), inset 0 0 0 1px rgba(255, 255, 255, 0.06), 0 6px 16px -10px rgba(0, 0, 0, 0.6);
    }

/* ---- 1. Fundo da pagina ----
   Num ::before fixo, e nao em `background-attachment: fixed`: este repinta a
   pagina inteira a cada rolagem; a camada fixa e composta uma vez so. */
    body::before {
        content: '';
        position: fixed;
        inset: 0;
        z-index: -1;
        pointer-events: none;
        background:
            radial-gradient(60vw 55vh at 6% 0%, var(--vd-mancha-1), transparent 70%),
            radial-gradient(50vw 50vh at 100% 8%, var(--vd-mancha-2), transparent 70%),
            radial-gradient(55vw 55vh at 88% 100%, var(--vd-mancha-3), transparent 70%),
            radial-gradient(50vw 50vh at 12% 100%, var(--vd-mancha-4), transparent 70%),
            var(--vd-base);
    }

/* ---- 2. Barra do topo ----
   O fundo translucido mora num ::before (assim o proprio header continua sem
   fundo e sem sombra propria). `.h-16` restringe ao <header> do shell - um
   <header class="bg-white"> de dentro de uma tela e cartao comum e cai na
   regra 3. */
    header.h-16.bg-white {
        background-color: transparent;
        border-bottom-color: var(--vd-borda);
    }
    html[data-theme="dark"] header.h-16.bg-white {
        background-color: transparent;
        border-bottom-color: var(--vd-borda);
    }
    /* O FLUXOSST+ nao prende a barra no topo; sem posicao o ::before escaparia. */
    header.h-16.bg-white:not(.sticky) { position: relative; z-index: 30; }
    header.h-16.bg-white::before {
        content: '';
        position: absolute;
        inset: 0;
        z-index: -1;
        pointer-events: none;
        background: var(--vd-barra);
        /* fio de luz na borda de baixo (acabamento liquid glass, secao 6) */
        box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.75);
    }
    html[data-theme="dark"] header.h-16.bg-white::before { box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.12); }

/* ---- 3. Cartoes e superficies dentro do <main> ----
   Claro: so baixa a opacidade que o proprio utilitario ja le
   (`rgb(255 255 255 / var(--tw-bg-opacity))`). Escuro: o dark.css troca a cor
   por um token chapado, entao a translucidez sai por color-mix. */
    main :is(.bg-white, .card):where(:not(.absolute, .fixed, .sticky, .rounded-full, input, select, textarea)) {
        --tw-bg-opacity: var(--vd-opacidade);
    }
    main :is(.bg-gray-50, .bg-slate-50, .bg-gray-100, .bg-slate-100):where(:not(.absolute, .fixed, .sticky, .rounded-full, input, select, textarea)) {
        --tw-bg-opacity: var(--vd-opacidade-fundo);
    }
    html[data-theme="dark"] main :is(.bg-white, .card):where(:not(.absolute, .fixed, .sticky, .rounded-full, input, select, textarea)) {
        background-color: color-mix(in srgb, var(--dk-surface, #1a2231) 52%, transparent);
    }
    html[data-theme="dark"] main :is(.bg-gray-50, .bg-slate-50):where(:not(.absolute, .fixed, .sticky, .rounded-full, input, select, textarea)) {
        background-color: color-mix(in srgb, var(--dk-sunken, #141b28) 55%, transparent);
    }
    html[data-theme="dark"] main :is(.bg-gray-100, .bg-slate-100):where(:not(.absolute, .fixed, .sticky, .rounded-full, input, select, textarea)) {
        background-color: color-mix(in srgb, var(--dk-surface-2, #222c3d) 55%, transparent);
    }

    /* Moldura de pagina inteira (`min-h-screen` com fundo cinza, liso ou em
       degrade): era o "fundo da tela" de antes e taparia o vidro. Some. */
    main .min-h-screen:is(.bg-white, .bg-gray-50, .bg-slate-50, .bg-gray-100, .bg-slate-100) {
        background-color: transparent;
    }
    html[data-theme="dark"] main .min-h-screen:is(.bg-white, .bg-gray-50, .bg-slate-50, .bg-gray-100, .bg-slate-100) {
        background-color: transparent;
    }
    main .min-h-screen:is(.from-gray-50, .from-slate-50, .from-gray-100, .from-slate-100)[class*="bg-gradient-to-"] {
        background-image: none;
    }
    html[data-theme="dark"] main .min-h-screen:is(.from-gray-50, .from-slate-50, .from-gray-100, .from-slate-100)[class*="bg-gradient-to-"] {
        background-image: none;
        background-color: transparent;
    }

    /* Borda e sombra de vidro so em quem tem cara de cartao (canto arredondado
       + sombra ou borda). Linha de tabela e faixa de secao ficam sem. */
    main :is(.bg-white, .card):is(.rounded-lg, .rounded-xl, .rounded-2xl, .rounded-3xl):is(.shadow, .shadow-sm, .shadow-md, .shadow-lg, .shadow-xl, .border, .card):where(:not(.absolute, .fixed, .sticky, input, select, textarea)) {
        --tw-shadow: var(--vd-sombra);
        box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
    }
    /* So a borda cinza neutra vira borda de vidro: borda colorida e estado
       (erro, selecionado) e continua como esta. */
    main :is(.bg-white, .card):is(.border-gray-100, .border-gray-200, .border-slate-100, .border-slate-200, .card):where(:not(.absolute, .fixed, .sticky, input, select, textarea)) {
        border-color: var(--vd-borda);
    }
    html[data-theme="dark"] main :is(.bg-white, .card):is(.border-gray-100, .border-gray-200, .border-slate-100, .border-slate-200, .card):where(:not(.absolute, .fixed, .sticky, input, select, textarea)) {
        border-color: var(--vd-borda);
    }
    main .card-header {
        background-image: linear-gradient(to right, rgba(248, 250, 252, 0.55), rgba(255, 255, 255, 0.15));
    }
    html[data-theme="dark"] main .card-header { background-image: none; }

    /* O que esta DENTRO de algo flutuante (painel de modal, item de dropdown)
       volta a ser opaco: atras dele ha uma tela escurecida ou texto. */
    main :is(.fixed, .absolute, .lightbox, dialog) :is(.bg-white, .card, .bg-gray-50, .bg-slate-50, .bg-gray-100, .bg-slate-100) {
        --tw-bg-opacity: 1;
    }
    html[data-theme="dark"] main :is(.fixed, .absolute, .lightbox, dialog) :is(.bg-white, .card) {
        background-color: var(--dk-surface, #1a2231);
    }
    html[data-theme="dark"] main :is(.fixed, .absolute, .lightbox, dialog) :is(.bg-gray-50, .bg-slate-50) {
        background-color: var(--dk-sunken, #141b28);
    }
    html[data-theme="dark"] main :is(.fixed, .absolute, .lightbox, dialog) :is(.bg-gray-100, .bg-slate-100) {
        background-color: var(--dk-surface-2, #222c3d);
    }

/* ---- 4. Botoes ----
   "Botao" = <button>, <a>, <label> ou submit com fundo proprio (bg-*),
   padding horizontal (px-*) e canto arredondado. Sem `rounded` e linha de
   lista clicavel, nao botao. A cor continua a mesma - verde ainda e salvar,
   vermelho ainda e excluir -, so fica translucida e ganha o brilho de borda.
   `background-image` fica intocado: quem usa degrade (bg-gradient-*,
   .btn-primary) perderia o fundo. */
    :is(button, a, label, input[type="submit"], input[type="button"]):is([class^="bg-"], [class*=" bg-"]):is([class^="px-"], [class*=" px-"]):is([class^="rounded"], [class*=" rounded"]):where(:not(.bg-transparent, .sidebar-link, .menu-toggle, .submenu-link)) {
        --tw-bg-opacity: 0.86;
        --tw-shadow: var(--vd-botao);
        box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
    }
    /* Fundo claro com texto escuro aguenta mais transparencia. */
    :is(button, a, label, input[type="submit"], input[type="button"]):is([class^="px-"], [class*=" px-"]):is([class^="rounded"], [class*=" rounded"]):is(.bg-white, .bg-slate-50, .bg-slate-100, .bg-gray-50, .bg-gray-100, .bg-gray-200, .bg-zinc-50, .bg-zinc-100, .bg-neutral-50, .bg-neutral-100, .bg-stone-50, .bg-stone-100, .bg-red-50, .bg-red-100, .bg-orange-50, .bg-orange-100, .bg-amber-50, .bg-amber-100, .bg-yellow-50, .bg-yellow-100, .bg-lime-50, .bg-lime-100, .bg-green-50, .bg-green-100, .bg-emerald-50, .bg-emerald-100, .bg-teal-50, .bg-teal-100, .bg-cyan-50, .bg-cyan-100, .bg-sky-50, .bg-sky-100, .bg-blue-50, .bg-blue-100, .bg-indigo-50, .bg-indigo-100, .bg-violet-50, .bg-violet-100, .bg-purple-50, .bg-purple-100, .bg-fuchsia-50, .bg-fuchsia-100, .bg-pink-50, .bg-pink-100, .bg-rose-50, .bg-rose-100, .bg-primary-50, .bg-primary-100) {
        --tw-bg-opacity: 0.62;
        --tw-shadow: var(--vd-botao-claro);
    }
    /* Texto branco sobre cor translucida: a sombra segura a leitura. */
    :is(button, a, label, input[type="submit"], input[type="button"]):is([class^="bg-"], [class*=" bg-"]):is([class^="px-"], [class*=" px-"]):is([class^="rounded"], [class*=" rounded"]).text-white {
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.22);
    }

    /* Botoes de componente (@apply no bundle): o fundo vem de `background`,
       entao so recebem o brilho; .btn-secondary tem bg-white e fica translucido. */
    .btn-primary, .btn-danger, .btn-success, .theme-btn-primary {
        box-shadow: var(--vd-botao);
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.22);
    }
    .btn-secondary {
        --tw-bg-opacity: 0.62;
        box-shadow: var(--vd-botao-claro);
    }
    .btn-outline { box-shadow: var(--vd-botao-claro); }

/* ---- 5. Menu lateral ----
   O fundo continua o degrade da cor do painel (texto branco precisa dele); o
   vidro entra como reflexo por cima do degrade e brilho de borda nos itens. */
    aside.sidebar-shell::before {
        content: '';
        position: absolute;
        inset: 0;
        z-index: -1;
        pointer-events: none;
        background:
            radial-gradient(130% 38% at 0% 0%, rgba(255, 255, 255, 0.20), transparent 62%),
            radial-gradient(110% 34% at 100% 100%, color-mix(in srgb, var(--theme-accent, #fbbf24) 20%, transparent), transparent 70%);
    }
    aside.sidebar-shell { border-right: 1px solid rgba(255, 255, 255, 0.14); }
    .plus-sidebar {
        background:
            radial-gradient(130% 38% at 0% 0%, rgba(255, 255, 255, 0.18), transparent 62%),
            linear-gradient(to bottom, var(--plus-from, #5b21b6), var(--plus-to, #312e81));
    }
    aside .sidebar-link, aside .menu-toggle {
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.24), inset 0 0 0 1px rgba(255, 255, 255, 0.10), 0 6px 14px -10px rgba(0, 0, 0, 0.5);
    }
    /* Menu do Control: icone e seta dos grupos e a bolinha do submenu em azul
       claro no lugar do dourado. So no tema padrao (sem classe) e no Indigo,
       que tem as mesmas cores - nos outros seguem a cor de destaque escolhida
       para aquele fundo. O `:has(link)` separa o Control dos outros paineis,
       que usam o mesmo `aside.sidebar-shell` com icone branco. */
    html:has(link[href*="app.control"]):is(:not([class*="theme-"]), .theme-indigo) aside.sidebar-shell .menu-toggle svg { color: #6eb8f5; }
    html:has(link[href*="app.control"]):is(:not([class*="theme-"]), .theme-indigo) aside.sidebar-shell .submenu-link:hover::before { background: #6eb8f5; }
    html:has(link[href*="app.control"]):is(:not([class*="theme-"]), .theme-indigo) aside.sidebar-shell .submenu-link.active::before {
        background: #6eb8f5;
        box-shadow: 0 0 8px #6eb8f5;
    }

    /* Item selecionado: gota d'agua, nao mais o bloco laranja (Control) nem o
       bloco branco (Finance). Transparente - o degrade do menu aparece
       atraves -, com o reflexo de luz em cima, a luz refratada embaixo na cor
       de destaque do painel e o fio claro na borda. A bolinha e o icone ficam
       na cor de destaque: sao eles que dizem "voce esta aqui".
       `aside.sidebar-shell` na frente para vencer `.theme-dark .x.active`. */
    aside.sidebar-shell :is(.sidebar-link, .submenu-link).active,
    .plus-sidebar a.bg-white\/20.text-white[class*="rounded"][class*="px-"] {
        color: #fff;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
        background:
            radial-gradient(ellipse 96% 78% at 50% -22%, rgba(255, 255, 255, 0.58), rgba(255, 255, 255, 0.16) 62%, rgba(255, 255, 255, 0) 63.5%),
            radial-gradient(ellipse 80% 90% at 82% 128%, color-mix(in srgb, var(--theme-accent, #ffffff) 78%, transparent), transparent 68%),
            linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.07));
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.95),
            inset 0 0 0 1px rgba(255, 255, 255, 0.42),
            inset 0 -10px 12px -10px rgba(255, 255, 255, 0.5),
            0 10px 22px -10px rgba(0, 0, 0, 0.6),
            0 0 26px -4px color-mix(in srgb, var(--theme-accent, #ffffff) 70%, transparent);
    }
    /* A gota e mais redonda que os itens vizinhos (8px no submenu, 12px no
       item de topo): canto vivo nao combina com agua. */
    aside.sidebar-shell .submenu-link.active,
    .plus-sidebar a.bg-white\/20.text-white[class*="rounded"][class*="px-"] { border-radius: 14px; }
    aside.sidebar-shell .sidebar-link.active { border-radius: 16px; }
    aside.sidebar-shell .sidebar-link.active svg { color: var(--theme-accent, #ffffff); }
    aside.sidebar-shell .submenu-link.active::before {
        background: var(--theme-accent, #ffffff);
        box-shadow: 0 0 8px var(--theme-accent, #ffffff);
    }

/* ---- 6. Acabamento "Liquid Glass" ----
   O vidro da Apple (iOS 26) difere do glassmorphism chapado em quatro coisas,
   e cada uma vira uma regra aqui:
     1. forma: capsula nos botoes e cantos bem largos nos cartoes;
     2. aro de luz: um fio branco que contorna a peca, mais forte em cima
        (onde a luz bate) e um reflexo difuso na borda de baixo (a luz que
        atravessa e sai do outro lado);
     3. reflexo especular: um brilho diagonal no canto superior esquerdo,
        como numa lente. Vai em `background-image`, por cima da cor
        translucida - por isso so em quem NAO tem degrade proprio;
     4. resposta ao toque: a peca "afunda" (scale) enquanto o botao esta
        pressionado e o aro acende no hover.
   Nada de pseudo-elemento novo (o alto contraste nao os alcanca) nem de
   `filter`/`transform` em repouso (viram containing block de `fixed`); o
   scale existe so durante o clique. */
    html {
        --vd-raio-cartao: 24px;
        --vd-raio-cartao-p: 18px;
        --vd-raio-botao: 9999px;
        --vd-lente: linear-gradient(135deg, rgba(255, 255, 255, 0.60) 0%, rgba(255, 255, 255, 0.22) 26%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.10) 100%);
        --vd-lente-botao: linear-gradient(180deg, rgba(255, 255, 255, 0.42) 0%, rgba(255, 255, 255, 0.10) 46%, rgba(255, 255, 255, 0) 54%, rgba(255, 255, 255, 0.14) 100%);
        --vd-aro: inset 0 1px 0 rgba(255, 255, 255, 0.98), inset 0 0 0 1px rgba(255, 255, 255, 0.55), inset 0 -1px 0 rgba(255, 255, 255, 0.45), inset 0 -16px 22px -18px rgba(255, 255, 255, 0.70), 0 20px 44px -24px rgba(30, 41, 99, 0.42);
        --vd-aro-botao: inset 0 1px 0 rgba(255, 255, 255, 0.62), inset 0 0 0 1px rgba(255, 255, 255, 0.26), inset 0 -8px 12px -10px rgba(255, 255, 255, 0.40), 0 10px 24px -12px rgba(15, 23, 42, 0.55);
        --vd-aro-botao-claro: inset 0 1px 0 rgba(255, 255, 255, 0.95), inset 0 0 0 1px rgba(255, 255, 255, 0.60), inset 0 -8px 12px -10px rgba(255, 255, 255, 0.70), 0 8px 20px -12px rgba(15, 23, 42, 0.35);
        --vd-aro-hover: 0 0 0 1px rgba(255, 255, 255, 0.55), 0 0 22px -4px rgba(255, 255, 255, 0.75);
    }
    html[data-theme="dark"] {
        --vd-lente: linear-gradient(135deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0.05) 26%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.03) 100%);
        --vd-lente-botao: linear-gradient(180deg, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0.05) 46%, rgba(255, 255, 255, 0) 54%, rgba(255, 255, 255, 0.06) 100%);
        --vd-aro: inset 0 1px 0 rgba(255, 255, 255, 0.22), inset 0 0 0 1px rgba(255, 255, 255, 0.12), inset 0 -1px 0 rgba(255, 255, 255, 0.08), inset 0 -16px 22px -18px rgba(255, 255, 255, 0.14), 0 20px 44px -24px rgba(0, 0, 0, 0.8);
        --vd-aro-botao: inset 0 1px 0 rgba(255, 255, 255, 0.28), inset 0 0 0 1px rgba(255, 255, 255, 0.12), inset 0 -8px 12px -10px rgba(255, 255, 255, 0.14), 0 10px 24px -12px rgba(0, 0, 0, 0.8);
        --vd-aro-botao-claro: inset 0 1px 0 rgba(255, 255, 255, 0.16), inset 0 0 0 1px rgba(255, 255, 255, 0.08), inset 0 -8px 12px -10px rgba(255, 255, 255, 0.10), 0 8px 20px -12px rgba(0, 0, 0, 0.7);
        --vd-aro-hover: 0 0 0 1px rgba(255, 255, 255, 0.28), 0 0 22px -4px rgba(255, 255, 255, 0.30);
    }

    /* 6a. Cartoes: canto largo, aro e lente. Mesmo alvo da regra 3 (cartao =
       fundo branco + canto + sombra/borda), para nao pegar linha de tabela. */
    main :is(.bg-white, .card):is(.rounded-lg, .rounded-xl, .rounded-2xl, .rounded-3xl):is(.shadow, .shadow-sm, .shadow-md, .shadow-lg, .shadow-xl, .border, .card):where(:not(.absolute, .fixed, .sticky, input, select, textarea)) {
        --tw-shadow: var(--vd-aro);
        box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
    }
    /* A borda cinza neutra some: o aro ja faz o contorno. Borda colorida
       (erro, selecionado) fica, como na regra 3. */
    main :is(.bg-white, .card):is(.border-gray-100, .border-gray-200, .border-slate-100, .border-slate-200, .card):where(:not(.absolute, .fixed, .sticky, input, select, textarea)) {
        border-color: transparent;
    }
    main :is(.bg-white, .card):is(.rounded-lg, .rounded-xl, .rounded-2xl, .rounded-3xl):is(.shadow, .shadow-sm, .shadow-md, .shadow-lg, .shadow-xl, .border, .card):where(:not(.absolute, .fixed, .sticky, input, select, textarea, [class*="bg-gradient"])) {
        background-image: var(--vd-lente);
    }
    main :is(.bg-white, .card):is(.rounded-xl, .rounded-2xl, .rounded-3xl, .card):is(.shadow, .shadow-sm, .shadow-md, .shadow-lg, .shadow-xl, .border, .card):where(:not(.absolute, .fixed, .sticky, input, select, textarea)) {
        border-radius: var(--vd-raio-cartao);
    }
    main :is(.bg-white, .card).rounded-lg:is(.shadow, .shadow-sm, .shadow-md, .shadow-lg, .shadow-xl, .border):where(:not(.absolute, .fixed, .sticky, input, select, textarea, .card)) {
        border-radius: var(--vd-raio-cartao-p);
    }
    /* Faixa de titulo em degrade (banner da tela): mesmo canto e aro. */
    main [class*="bg-gradient-to-"]:is(.rounded-xl, .rounded-2xl, .rounded-3xl):is(.shadow, .shadow-sm, .shadow-md, .shadow-lg, .shadow-xl):where(:not(.absolute, .fixed, .sticky, button, a, label)) {
        border-radius: var(--vd-raio-cartao);
        --tw-shadow: var(--vd-aro-botao);
        box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
    }

    /* 6b. Botoes: capsula, aro, lente e resposta ao toque. A capsula so nos
       de canto inteiro (.rounded-*; meio-canto e grupo colado ficam) e, no
       caso de <a>/<label>, so nos que se comportam como botao (inline-*):
       um cartao inteiro que e link tambem casa com "bg + px + rounded" e
       nao pode virar pilula. */
    :is(button, input[type="submit"], input[type="button"], :is(a, label):is(.inline-flex, .inline-block, .inline)):is([class^="bg-"], [class*=" bg-"]):is([class^="px-"], [class*=" px-"]):is(.rounded, .rounded-md, .rounded-lg, .rounded-xl, .rounded-2xl, .rounded-3xl):where(:not(.bg-transparent, .sidebar-link, .menu-toggle, .submenu-link)) {
        border-radius: var(--vd-raio-botao);
    }
    :is(button, a, label, input[type="submit"], input[type="button"]):is([class^="bg-"], [class*=" bg-"]):is([class^="px-"], [class*=" px-"]):is([class^="rounded"], [class*=" rounded"]):where(:not(.bg-transparent, .sidebar-link, .menu-toggle, .submenu-link)) {
        --tw-shadow: var(--vd-aro-botao);
        box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
        transition: box-shadow 0.18s ease, transform 0.12s ease, background-color 0.18s ease, color 0.18s ease;
    }
    :is(button, a, label, input[type="submit"], input[type="button"]):is([class^="bg-"], [class*=" bg-"]):is([class^="px-"], [class*=" px-"]):is([class^="rounded"], [class*=" rounded"]):where(:not(.bg-transparent, .sidebar-link, .menu-toggle, .submenu-link, [class*="bg-gradient"])) {
        background-image: var(--vd-lente-botao);
    }
    :is(button, a, label, input[type="submit"], input[type="button"]):is([class^="px-"], [class*=" px-"]):is([class^="rounded"], [class*=" rounded"]):is(.bg-white, .bg-slate-50, .bg-slate-100, .bg-gray-50, .bg-gray-100, .bg-gray-200, .bg-zinc-50, .bg-zinc-100, .bg-neutral-50, .bg-neutral-100, .bg-stone-50, .bg-stone-100, .bg-red-50, .bg-red-100, .bg-orange-50, .bg-orange-100, .bg-amber-50, .bg-amber-100, .bg-yellow-50, .bg-yellow-100, .bg-lime-50, .bg-lime-100, .bg-green-50, .bg-green-100, .bg-emerald-50, .bg-emerald-100, .bg-teal-50, .bg-teal-100, .bg-cyan-50, .bg-cyan-100, .bg-sky-50, .bg-sky-100, .bg-blue-50, .bg-blue-100, .bg-indigo-50, .bg-indigo-100, .bg-violet-50, .bg-violet-100, .bg-purple-50, .bg-purple-100, .bg-fuchsia-50, .bg-fuchsia-100, .bg-pink-50, .bg-pink-100, .bg-rose-50, .bg-rose-100, .bg-primary-50, .bg-primary-100) {
        --tw-shadow: var(--vd-aro-botao-claro);
        --tw-bg-opacity: 0.55;
    }
    :is(button, a, label, input[type="submit"], input[type="button"]):is([class^="bg-"], [class*=" bg-"]):is([class^="px-"], [class*=" px-"]):is([class^="rounded"], [class*=" rounded"]):where(:not(.bg-transparent, .sidebar-link, .menu-toggle, .submenu-link)):hover {
        box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow), var(--vd-aro-hover);
    }
    :is(button, a, label, input[type="submit"], input[type="button"]):is([class^="bg-"], [class*=" bg-"]):is([class^="px-"], [class*=" px-"]):is([class^="rounded"], [class*=" rounded"]):where(:not(.bg-transparent, .sidebar-link, .menu-toggle, .submenu-link)):active {
        transform: scale(0.96);
    }
    .btn-primary, .btn-danger, .btn-success, .theme-btn-primary, .btn-secondary, .btn-outline {
        border-radius: var(--vd-raio-botao);
        transition: box-shadow 0.18s ease, transform 0.12s ease;
    }
    .btn-primary, .btn-danger, .btn-success, .theme-btn-primary { box-shadow: var(--vd-aro-botao); }
    .btn-secondary, .btn-outline { box-shadow: var(--vd-aro-botao-claro); background-image: var(--vd-lente-botao); }
    :is(.btn-primary, .btn-danger, .btn-success, .theme-btn-primary, .btn-secondary, .btn-outline):hover {
        box-shadow: var(--vd-aro-botao), var(--vd-aro-hover);
    }
    :is(.btn-primary, .btn-danger, .btn-success, .theme-btn-primary, .btn-secondary, .btn-outline):active { transform: scale(0.96); }

    /* 6c. Barra do topo: fio de luz embaixo - esta junto da regra 2. */

    /* 6d. Menu lateral: os modulos (itens de topo) ficam com canto de 16px -
       ele achou a capsula redonda demais neles (05/10/2026); os itens do
       submenu, menores, seguem em capsula. Mesmo aro e lente dos botoes. */
    aside .sidebar-link, aside .menu-toggle {
        border-radius: 16px;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.34), inset 0 0 0 1px rgba(255, 255, 255, 0.12), inset 0 -8px 12px -10px rgba(255, 255, 255, 0.18), 0 8px 18px -12px rgba(0, 0, 0, 0.55);
        background-image: var(--vd-lente-botao);
        transition: box-shadow 0.18s ease, transform 0.12s ease, background-color 0.18s ease;
    }
    aside .submenu-link { border-radius: var(--vd-raio-botao); transition: box-shadow 0.18s ease, transform 0.12s ease, background-color 0.18s ease; }
    aside :is(.sidebar-link, .menu-toggle, .submenu-link):active { transform: scale(0.97); }
    aside.sidebar-shell .submenu-link.active,
    .plus-sidebar a.bg-white\/20.text-white[class*="rounded"][class*="px-"] { border-radius: var(--vd-raio-botao); }
    aside.sidebar-shell .sidebar-link.active { border-radius: 16px; }

/* ---- 7. Alto contraste (a11y.css) ----
   O modo preto-e-amarelo ja forca fundo e sombra com !important em todo
   elemento, mas `*` nao alcanca pseudo-elemento. Sem isto as manchas
   continuariam por baixo do preto. */
    html[data-a11y-alto-contraste] body::before,
    html[data-a11y-alto-contraste] header.h-16.bg-white::before,
    html[data-a11y-alto-contraste] aside.sidebar-shell::before {
        display: none;
    }

}