/* =============================================================================
   VAZK HUB · LIQUID GLASS
   =============================================================================
   Folha compartilhada pelos painéis (metas, marketing, financeiro, tarefas e
   CRM). Cada HTML traz seu próprio sistema visual embutido; esta folha entra
   por <link> depois dele e reveste o que já está posicionado.

   Gerada por espalhar_liquid.py a partir de crm_liquid.css — editar lá, não
   aqui.
   ============================================================================= */

/* =====================================================================
   SUPERFÍCIES SÓLIDAS
   ---------------------------------------------------------------------
   O Hub é uma ferramenta de trabalho: a informação precisa repousar
   sobre painéis estáveis, não sobre uma camada translúcida. Esta folha
   nasceu como a camada Liquid Glass do CRM (malha de cor, blur, reflexo,
   anel iridescente) e hoje é o contrário dela: fundos opacos, borda de
   1px e uma sombra curta. Da receita antiga sobram só os NOMES dos
   tokens (--vidro-*), porque os painéis e o auth.js já os consomem.

   Onda 2: o vidro saiu da fonte, não foi só coberto por cima. O que
   antes eram duas camadas — a de vidro e a "sólida" por cima dela —
   agora é uma só, e a ordem de documento continua valendo: esta folha
   vem depois do <style> de cada painel. Nada de !important.
   ===================================================================== */

:root {
    --glass-blur: none;
    --vidro-reflexo: none;
    --vidro-reflexo-denso: none;
    /* Texto secundário: um degrau mais escuro que o cinza padrão. */
    --muted: #55637A;
    /* Sombra zerada, não `none`: estas duas entram em listas de
       box-shadow nos painéis, e um `none` no meio da lista invalida a
       declaração inteira. */
    --vidro-espessura: 0 0 0 transparent;
    --vidro-aro: 0 0 0 transparent;
    --vidro-sombra: 0 10px 24px -20px rgba(15, 23, 42, .28);
    --vidro-sombra-alta: 0 14px 30px -22px rgba(15, 23, 42, .34);
    --vidro-corpo: #FFFFFF;
    --vidro-corpo-leve: #F8FAFC;
    --vidro-corpo-alto: #FFFFFF;
    --vidro-corpo-denso: #FFFFFF;
    --vidro-fio: #D7E0EC;

    /* Os tokens de vidro dos painéis (--glass-*) apontam para os
       sólidos. Eles são declarados em cada <style> com branco
       translúcido — e borda branca sobre fundo branco não desenha
       borda nenhuma. Um var() só serve aos dois temas: quem resolve é
       o --vidro-* do tema ativo. */
    --glass-bg: var(--vidro-corpo);
    --glass-bg-subtle: var(--vidro-corpo-leve);
    --glass-bg-elevated: var(--vidro-corpo-alto);
    --glass-border: var(--line, #E2E8F0);
    --glass-border-specular: var(--line, #E2E8F0);
    --glass-shadow: var(--vidro-sombra);
    --glass-glow: 0 0 0 transparent;
}

[data-theme="dark"] {
    --muted: #A3B2C7;
    --vidro-sombra: 0 12px 28px -22px rgba(0, 0, 0, .72);
    --vidro-sombra-alta: 0 16px 34px -24px rgba(0, 0, 0, .82);
    --vidro-corpo: #10182B;
    --vidro-corpo-leve: #0D1526;
    --vidro-corpo-alto: #17213A;
    --vidro-corpo-denso: #10182B;
    --vidro-fio: #26324A;
    /* Repetidos aqui porque cada painel os redeclara no próprio
       [data-theme="dark"], com a mesma especificidade. */
    --glass-bg: var(--vidro-corpo);
    --glass-bg-subtle: var(--vidro-corpo-leve);
    --glass-bg-elevated: var(--vidro-corpo-alto);
    --glass-border: var(--line, #243049);
    --glass-border-specular: var(--line, #243049);
    --glass-shadow: var(--vidro-sombra);
    --glass-glow: 0 0 0 transparent;
    --glass-blur: none;
}

/* ---- o fundo ----
   Liso. A malha de cor existia para o vidro ter o que dobrar. */
body {
    background-color: #EEF3FA;
    background-image: none;
    background-attachment: initial;
}

[data-theme="dark"] body {
    background-color: #080E1C;
    background-image: none;
}

/* ---- a peça ----
   Uma regra só para tudo que é painel: fundo opaco, fio de 1px e
   nenhum filtro. A lista escura repete a clara de propósito: os
   painéis ainda trazem `[data-theme="dark"] header, .card { background:
   linear-gradient(... translúcido) }`, que tem especificidade maior
   que `header` e `.card` soltos e voltava a pôr vidro só no escuro. */
header,
.card,
.kpi,
.quadro-barra,
.lista-caixa,
.tile,
.tar-modal,
.filtro-caixa {
    background: var(--vidro-corpo);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: 1px solid var(--vidro-fio);
    text-shadow: none;
}

[data-theme="dark"] header,
[data-theme="dark"] .card,
[data-theme="dark"] .kpi,
[data-theme="dark"] .quadro-barra,
[data-theme="dark"] .lista-caixa,
[data-theme="dark"] .tile,
[data-theme="dark"] .tar-modal,
[data-theme="dark"] .filtro-caixa {
    background: var(--vidro-corpo);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-color: var(--vidro-fio);
}

/* A elevação fica numa lista à parte porque o modal e o celular a
   trocam sozinhos, e porque os painéis também declaram sombras com
   brilho interno branco no escuro. */
header,
.card,
.kpi,
.quadro-barra,
.lista-caixa,
.tile,
.filtro-caixa {
    box-shadow: var(--vidro-sombra);
}

[data-theme="dark"] header,
[data-theme="dark"] .card,
[data-theme="dark"] .kpi,
[data-theme="dark"] .quadro-barra,
[data-theme="dark"] .lista-caixa,
[data-theme="dark"] .tile,
[data-theme="dark"] .filtro-caixa {
    box-shadow: var(--vidro-sombra);
}

/* O ios-layer.js põe .vazk-glass no cabeçalho, no nav e na barra de
   abas do Metas — e classe (0,1,0) vence `header` (0,0,1). Aqui o
   elemento vem junto da classe, (0,1,1), para vencer também o
   `[data-theme="dark"] nav` dos painéis, que tem o mesmo peso e vem
   antes. Só nos três: o .vazk-glass também cai em cartões com fundo
   próprio (o destaque do Metas), e esses não podem perder a cor. */
header.vazk-glass,
nav.vazk-glass,
.tabs.vazk-glass {
    background: var(--vidro-corpo);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-color: var(--vidro-fio);
    box-shadow: var(--vidro-sombra);
    text-shadow: none;
}

header {
    border-radius: 30px;
    padding: 22px 24px;
}

.quadro-barra {
    border-radius: 24px;
    padding: 12px 16px;
}

/* ---- a coluna do funil ----
   Um degrau abaixo do cartão: a coluna é o trilho cinza-azulado, o
   cartão é a folha branca por cima. Sem o degrau, cartão branco em
   coluna branca só se separava pela sombra.
   Sem `border` curto aqui, de propósito: o fontes/crm.css desenha a
   cor da etapa numa borda de cima grossa, e um `border: 1px` nesta
   folha (que vem depois) a devolvia para 1px. */
.col {
    border-radius: 26px;
    background: #F1F5F9;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

[data-theme="dark"] .col {
    background: #0D1526;
}

/* Peça densa (tabela, formulário, balão de filtro). */
.lista-caixa,
.tar-modal,
.filtro-caixa {
    background: var(--vidro-corpo-denso);
}

.lista-caixa {
    border-radius: 26px;
}

/* Link no escuro: o azul do tema claro desaparece no marinho. */
[data-theme="dark"] .c-fone a,
[data-theme="dark"] .ficha-dados a {
    color: var(--info-text, #93C5FD);
}

.tile {
    border-radius: 20px;
    padding: 13px 15px;
}

.tar-modal {
    border-radius: 32px;
    border-color: var(--vidro-fio);
    box-shadow: var(--vidro-sombra-alta);
}

/* Fundo do modal só escurece: blur aqui refiltrava a tela inteira. */
.tar-back {
    background: rgba(8, 14, 34, .45);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

/* ---- posição ----
   Do anel de vidro (um ::before absoluto) sobrou o `position:
   relative` destas peças e o z-index dos filhos logo abaixo. Ficam:
   há conteúdo absoluto e menus dentro delas que se ancoram aqui.
   A .filtro-caixa fica de fora: ela nasce `absolute` (balão preso ao
   botão de filtro do Tarefas) e `relative` a devolveria ao fluxo. */
header,
.card,
.kpi,
.quadro-barra,
.abas,
.col,
.lista-caixa,
.tile,
.tar-modal {
    position: relative;
}

/* O anel iridescente acabou. `display: none`, e não só tirar a
   animação ou o fundo: o ::before dos painéis tem regras próprias
   e sobraria uma faixa parada. A lista escura existe porque há
   painel com `[data-theme="dark"] header::before`. */
header::before,
.card::before,
.kpi::before,
.quadro-barra::before,
.abas::before,
.col::before,
.lista-caixa::before,
.tile::before,
.tar-modal::before,
.filtro-caixa::before {
    display: none;
}

[data-theme="dark"] header::before,
[data-theme="dark"] .card::before,
[data-theme="dark"] .kpi::before,
[data-theme="dark"] .quadro-barra::before,
[data-theme="dark"] .abas::before,
[data-theme="dark"] .col::before,
[data-theme="dark"] .lista-caixa::before,
[data-theme="dark"] .tile::before,
[data-theme="dark"] .tar-modal::before,
[data-theme="dark"] .filtro-caixa::before {
    display: none;
}

/* O conteúdo sobe uma camada para o anel passar por baixo dele. */
header > *,
.card > *,
.kpi > *,
.quadro-barra > *,
.abas > *,
.lista-caixa > *,
.tile > *,
.tar-modal > *,
.filtro-caixa > *,
.col > * {
    position: relative;
    z-index: 1;
}

/* ---- abas ----
   Trilho claro com a aba ativa em folha branca por cima: a distância
   entre os dois tons é o que faz a aba ativa existir. */
.abas {
    padding: 4px;
    border-radius: 999px;
    gap: 3px;
    background: #EEF3FA;
    border: 1px solid var(--line, #E2E8F0);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
}

[data-theme="dark"] .abas {
    background: #0D1526;
    border-color: var(--line, #243049);
}

.aba {
    padding: 7px 15px;
    border-radius: 999px;
    text-shadow: none;
    transition: color var(--motion-fast) ease, background-color var(--motion-fast) ease, box-shadow var(--motion-fast) ease;
}

.aba:hover {
    color: var(--navy);
}

.aba.on {
    background: #FFFFFF;
    box-shadow: 0 1px 3px rgba(15, 23, 42, .14), 0 0 0 1px rgba(15, 23, 42, .04);
}

[data-theme="dark"] .aba.on {
    background: #17213A;
    color: #F8FAFC;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .5);
}

/* ---- cartão do negócio ----
   Folha opaca sobre a coluna. A sombra e a transição moram mais
   abaixo, em "O CARTÃO". */
.cartao:not(.capa-cheia) {
    border-radius: 18px;
    border-color: var(--vidro-fio);
    background: var(--vidro-corpo-alto);
}

[data-theme="dark"] .cartao:not(.capa-cheia) {
    /* Sem `background`: o token já é o do escuro, e um fundo aqui
       (0,3,0) venceria o azul do .cartao.no-ar enquanto arrasta. */
    border-color: var(--line, #243049);
}

.cartao:hover {
    transform: translateY(-1px);
    border-color: rgba(37, 99, 235, .45);
}

[data-theme="dark"] .cartao:hover {
    border-color: rgba(147, 197, 253, .45);
}

.cartao.no-ar {
    background: rgba(37, 99, 235, .12);
    box-shadow: none;
    transform: none;
}

.tar-fantasma {
    border-radius: 18px;
    box-shadow: 0 26px 50px -16px rgba(15, 23, 42, .5);
}

/* ---- controles ---- */
.btn-cheio {
    border-radius: 999px;
    padding: 9px 18px;
    background: linear-gradient(135deg, var(--royal), var(--royal-dark));
    box-shadow: 0 8px 18px -12px rgba(37, 99, 235, .8);
}

.btn-cheio:hover {
    box-shadow: 0 12px 24px -12px rgba(37, 99, 235, .9);
}

.btn-mini {
    border-radius: 999px;
    padding: 7px 13px;
}

.btn-mini.on {
    background: rgba(37, 99, 235, .12);
    border-color: rgba(37, 99, 235, .34);
    box-shadow: none;
}

.btn-outline-sm {
    border-radius: 999px;
    border-color: var(--vidro-fio);
    background: var(--vidro-corpo-alto);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .06);
}

/* Repetido no escuro: o Metas declara `[data-theme="dark"]
   .btn-outline-sm` com degradê translúcido, e pesa mais. */
[data-theme="dark"] .btn-outline-sm {
    background: var(--vidro-corpo-alto);
    border-color: var(--vidro-fio);
    box-shadow: none;
}

/* Campos: fundo levemente abaixo do painel e borda de controle com
   pelo menos 3:1 — o fio do painel (#D7E0EC) some em volta de um campo. */
.vazk-login-input,
.campo select,
.campo textarea,
.mapa-grade select,
.etapas-mapa select,
.pessoa select {
    border-radius: 14px;
    border: 1px solid var(--borda-controle, #8492A6);
    background: var(--vidro-corpo-leve);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
    transition: border-color var(--motion-fast) ease, background-color var(--motion-fast) ease;
}

[data-theme="dark"] .vazk-login-input,
[data-theme="dark"] .campo select,
[data-theme="dark"] .campo textarea,
[data-theme="dark"] .mapa-grade select,
[data-theme="dark"] .etapas-mapa select,
[data-theme="dark"] .pessoa select {
    color: #F1F5F9;
}

/* Foco: sem `outline: none`. O anel é o global da casca
   (hub-chrome.css); aqui só a borda acompanha. */
.vazk-login-input:focus,
.campo select:focus,
.campo textarea:focus {
    border-color: var(--foco, #2563EB);
    background: var(--vidro-corpo-alto);
}

/* ---- peças menores ---- */
.pill {
    border-radius: 999px;
    box-shadow: none;
}

.col-vazia {
    border-radius: 16px;
    border-color: rgba(148, 163, 184, .35);
}

/* Blocos dentro de um painel: um degrau abaixo do branco e fio
   próprio. O branco a 90% de antes, sobre painel branco, não
   desenhava borda. */
.neg-lista .item,
.receb-lista .item,
.ativ .item,
.prod-lista .item,
.pessoa,
.mov-lista .item,
.escolhido {
    border-radius: 16px;
    border: 1px solid #DDE4EE;
    background: #F8FAFC;
    box-shadow: none;
}

[data-theme="dark"] .neg-lista .item,
[data-theme="dark"] .receb-lista .item,
[data-theme="dark"] .ativ .item,
[data-theme="dark"] .prod-lista .item,
[data-theme="dark"] .pessoa,
[data-theme="dark"] .mov-lista .item,
[data-theme="dark"] .escolhido {
    border-color: #2A3650;
    background: #151F36;
}

.escolhido {
    background: rgba(37, 99, 235, .08);
    border-color: rgba(37, 99, 235, .34);
}

[data-theme="dark"] .escolhido {
    background: rgba(59, 130, 246, .16);
    border-color: rgba(96, 165, 250, .4);
}

.resultados {
    border-radius: 16px;
    border-color: var(--vidro-fio);
    background: var(--vidro-corpo-alto);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: var(--vidro-sombra-alta);
}

.solta {
    border-radius: 24px;
}

.progresso {
    border-radius: 999px;
}

.progresso div {
    border-radius: 999px;
    background: var(--royal-fill, #2563EB);
}

/* ---- tabela ---- */
table.lista th {
    background: #F1F5F9;
    border-top-color: var(--line, #E2E8F0);
    border-bottom-color: var(--line, #E2E8F0);
}

[data-theme="dark"] table.lista th {
    background: #151F36;
    border-top-color: #2A3650;
    border-bottom-color: #2A3650;
}

table.lista td {
    border-bottom-color: #E2E8F0;
}

[data-theme="dark"] table.lista td {
    border-bottom-color: #2A3650;
}

table.lista tbody tr:hover td {
    background: #F8FAFC;
}

[data-theme="dark"] table.lista tbody tr:hover td {
    background: #151F36;
}

/* ---- sem sombra de texto ----
   A sombra curta existia para o texto se ler sobre um vidro com cor
   passando por trás. Sobre fundo opaco ela só borra a letra. */
.col-topo strong,
.col-soma,
.col-conta,
.quadro-barra h2,
.aba,
.lista-total,
.lista-topo,
table.lista th,
.tar-rot,
.tile span {
    text-shadow: none;
}

/* Sobre o vidro fino o cinza secundário some: aqui o rótulo vira
   branco de peso, como no cartão de clima da referência. */
[data-theme="dark"] .col-soma,
[data-theme="dark"] .col-conta,
[data-theme="dark"] .aba:not(.on),
[data-theme="dark"] .lista-total,
[data-theme="dark"] table.lista th,
[data-theme="dark"] .tar-rot,
[data-theme="dark"] .tile span {
    color: rgba(255, 255, 255, .82);
}

/* No escuro o texto do painel precisa clarear junto com o vidro. */
[data-theme="dark"] .col-topo strong,
[data-theme="dark"] .neg-nome,
[data-theme="dark"] .neg-valor,
[data-theme="dark"] .tile b,
[data-theme="dark"] .lista-total b,
[data-theme="dark"] table.lista td,
[data-theme="dark"] .c-nome b,
[data-theme="dark"] .ficha-dados .par b,
[data-theme="dark"] .quadro-barra h2 {
    color: #F1F5F9;
}

/* ---- toque e movimento ----
   Quem arrasta cartão no dedo não quer animação; e o vidro pesado
   custa caro em tela pequena. */
@media (prefers-reduced-motion: reduce) {

    .cartao,
    .btn-cheio,
    .aba {
        transition: none;
    }

    .cartao:hover {
        transform: none;
    }
}

@media (max-width: 780px) {

    header {
        border-radius: 24px;
        /* Os painéis declaram `header { padding: 18px }` no celular, e
           esta folha carrega depois com `padding: 22px 24px` na mesma
           especificidade — a folga menor nunca chegava a valer. Em vez
           de pôr `html header` em cinco lugares, quem atropelou devolve:
           a regra do celular mora junto da que a atropelava. */
        padding: 18px;
    }

    .quadro-barra {
        border-radius: 20px;
    }

    .col {
        border-radius: 22px;
    }

    .tar-modal,
    .tar-modal.largo,
    .tar-modal.estreito {
        border-radius: 0;
        box-shadow: none;
    }
}

.lista-caixa,
table.lista,
.lista-rolagem {
    background-color: var(--vidro-corpo-denso);
}

[data-theme="dark"] .col-conta {
    background: #243455;
}


/* =====================================================================
   O CARTÃO — a peça que ficou de fora, e a que mais aparece
   ---------------------------------------------------------------------
   A passada de superfícies sólidas acima cobriu header, .card, .kpi,
   .col, .tile e companhia, mas não o .cartao. Ele seguiu com o composto
   de vidro: cinco sombras, duas de franja e três próprias, uma delas
   inset com 10px de blur. Medindo um quadro cheio, 160 dos 163
   elementos de pintura pesada da tela eram cartões.
   ===================================================================== */
.cartao:not(.capa-cheia) {
    background-image: none;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .07);
}

[data-theme="dark"] .cartao:not(.capa-cheia) {
    box-shadow: 0 2px 6px -3px rgba(0, 0, 0, .7);
}

/* O que realmente destravou: deixar o navegador pular o layout do que
   está fora da tela. Com 160 cartões, redesenhar o quadro caiu de
   39,5ms para 10,9ms. Achatar a sombra não move esse número — sombra é
   pintura, não layout — mas alivia a rolagem, que é onde ela pesa.

   O `auto` do contain-intrinsic-size faz o navegador guardar o tamanho
   real depois que o cartão aparece uma vez; 76px é só o palpite para
   quem nunca foi visto.

   O :is() é de propósito: um `.cartao {` solto vira
   `.cartao:not(.capa-cheia)` no espalhar_liquid.py, e aqui a capa
   cheia também precisa pular o layout. Mesma especificidade. */
:is(.cartao) {
    content-visibility: auto;
    contain-intrinsic-size: auto 76px;
}

/* Enquanto arrasta, não: o arrastar decide onde soltar medindo o
   getBoundingClientRect de cada cartão da coluna, e um cartão pulado
   devolve o tamanho reservado em vez do real — a solta cairia no lugar
   errado. A classe entra no começo do arrasto e sai no fim (tarefas.js).
   O fantasma que segue o dedo é um clone, e também precisa medir. */
body.arrastando .cartao,
.tar-fantasma {
    content-visibility: visible;
}

/* ---- o movimento de volta ----
   Com o cartão barato, dá para responder ao ponteiro de graça: só
   transform, que o compositor resolve sem repintar nada. É o oposto de
   animar box-shadow, que repinta o elemento inteiro a cada quadro.

   A classe repetida nao e enfeite: o .cartao do <style> embutido no
   painel tem a mesma especificidade e vem depois, entao um .cartao
   simples aqui perderia em silencio. */
.cartao.cartao {
    transition:
        transform var(--motion-fast, 180ms) var(--ease-fluid, cubic-bezier(.16, 1, .3, 1)),
        border-color var(--motion-fast, 180ms) ease;
}

@media (hover: hover) {
    .cartao:not(.capa-cheia):not(.no-ar):hover {
        transform: translateY(-1px);
    }
}

.cartao:not(.no-ar):active {
    transform: scale(.995);
}

/* Arrastando, quem manda no transform é o arrasto. */
body.arrastando .cartao {
    transition: none;
}

@media (prefers-reduced-motion: reduce) {

    .cartao {
        transition: none;
    }

    .cartao:hover,
    .cartao:active {
        transform: none;
    }
}