/* =============================================================================
   VAZK · CAMADA iOS — vidro líquido, mola e transição de página
   A mesma linguagem visual do Painel de Metas, extraída para ser compartilhada
   pelos painéis de Marketing e Financeiro.

   Carregue DEPOIS do <style> da página: as regras de vidro precisam vencer o
   .card local, e classe contra classe quem decide é a ordem do documento.

   Quem aplica as classes é o ios-layer.js — aqui só existe a aparência.

   O que NÃO está aqui, de propósito: filtros feTurbulence/feDisplacementMap.
   Eram ruído procedural recalculado pixel a pixel a cada quadro, sobre todo o
   fundo de header e nav — que ficam sempre na tela. Era a travada da
   navegação. Blur + saturação dão a mesma leitura de vidro por uma fração do
   custo, e a especular vem dos gradientes, que são só pintura.
   ========================================================================== */

:root {
    --ease-fluid: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-ios-spring: cubic-bezier(0.22, 1.34, 0.36, 1);
    --motion-fast: 180ms;
    --motion-base: 280ms;
}

/* ---------------------------------------------------------------- o vidro --
   Saiu. O .vazk-glass que o ios-layer.js ainda põe no cabeçalho, no nav e nos
   cartões não pinta mais nada aqui: era ele que, com (0,1,0), vencia o
   `header` da camada sólida e mantinha degradê, borda branca e blur no topo
   de todos os painéis. A superfície do cabeçalho e do nav mora agora no
   liquid-glass.css (fonte: fontes/crm_liquid.css), em `header.vazk-glass`.
   Os controles pequenos (select, campo de data, .btn-outline-sm) também
   perderam o blur que tinham aqui. */

/* ------------------------------------------------------------- o logo -----
   logo.png é traço preto sobre transparência (84% do arquivo é alfa zero).
   No tema escuro a caixa dele é azul-marinho, e preto sobre azul-marinho não
   se lê: o símbolo praticamente sumia do cabeçalho.

   `brightness(0) invert(1)` força o traço a branco puro. O par é melhor que um
   `invert(1)` sozinho porque não depende do cinza de origem: zera qualquer cor
   e só então inverte. O alfa não é tocado por nenhum dos dois, então a borda
   suavizada do desenho continua suavizada. */
[data-theme="dark"] .logo-box img {
    filter: brightness(0) invert(1);
}

/* ----------------------------------------------------------- a entrada ----
   Cada bloco entra quando encosta na janela. `animation: none` derruba
   qualquer animação de entrada que a página já tivesse: duas concorrendo
   terminam com o bloco preso em opacity 0. */
.ios-reveal {
    opacity: 0;
    transform: translate3d(0, 15px, 0) scale(0.986);
    animation: none !important;
    transition:
        opacity 0.42s ease,
        transform 0.52s var(--ease-fluid);
}

.ios-reveal.is-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
}

/* ------------------------------------------------------------- a pressão --
   Compressão curta no toque e retorno em mola, como no iOS. */
.ios-pressable {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    transform-origin: center;
    transition:
        transform 520ms var(--ease-ios-spring),
        filter 220ms ease,
        box-shadow 420ms var(--ease-fluid) !important;
}

.ios-pressable.is-pressing {
    transform: translateY(1px) scale(0.952) !important;
    filter: brightness(0.98) saturate(1.06);
    transition-duration: 85ms !important;
}

.ios-pressable.ios-releasing {
    animation: iosControlRelease 520ms var(--ease-ios-spring) both !important;
}

.ios-touch-glow {
    position: absolute;
    left: var(--touch-x);
    top: var(--touch-y);
    z-index: 20;
    width: 136px;
    height: 136px;
    border-radius: 50%;
    pointer-events: none;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.72) 0%, rgba(147, 197, 253, 0.2) 34%, transparent 70%);
    mix-blend-mode: screen;
    transform: translate(-50%, -50%) scale(0.2);
    animation: iosTouchGlow 560ms ease-out both;
}

@keyframes iosControlRelease {
    0% { transform: translateY(1px) scale(0.952); }
    56% { transform: translateY(-1px) scale(1.024); }
    78% { transform: translateY(0) scale(0.992); }
    100% { transform: translateY(0) scale(1); }
}

@keyframes iosTouchGlow {
    0% { opacity: 0.15; transform: translate(-50%, -50%) scale(0.18); }
    30% { opacity: 0.72; }
    100% { opacity: 0; transform: translate(-50%, -50%) scale(1.15); }
}

/* -------------------------------------------------- a aba ativa e o brilho */
@keyframes iosTabPop {
    0% { transform: scale(0.96); }
    62% { transform: scale(1.025); }
    100% { transform: scale(1); }
}

@keyframes iosIconPop {
    0% { opacity: 0.45; transform: translateY(1px) scale(0.82); }
    70% { opacity: 1; transform: translateY(-1px) scale(1.08); }
    100% { opacity: 1; transform: translateY(-1px) scale(1); }
}

@keyframes iosGlassGlint {
    0% { opacity: 0; transform: translateX(-140%) skewX(-18deg); }
    20% { opacity: 0.55; }
    100% { opacity: 0; transform: translateX(680%) skewX(-18deg); }
}

@keyframes iosValueIn {
    0% { opacity: 0; transform: translateY(7px) scale(0.97); }
    68% { opacity: 1; transform: translateY(-1px) scale(1.012); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* Aqui havia `nav.vazk-glass { position: relative }`, para dar contexto ao
   brilho que atravessa o vidro (o ::after logo abaixo). A regra saiu, e nao
   foi trocada por outra: com especificidade (0,1,1) ela vencia o
   `nav { position: sticky }` que os paineis declaram (0,0,1), e a barra de
   abas nunca chegou a grudar. Pior: quando esta folha passou a dar um `top`
   a ela, o `top` virou deslocamento de elemento relativo — a barra descia
   quase cem pixels e cobria o cartao seguinte.
   Nao precisa de substituta porque `sticky` tambem e posicao e tambem serve
   de contexto ao ::after, e os quatro paineis que tem <nav> ja o declaram. */

/* O brilho que atravessava o vidro do nav ao abrir saiu com o vidro. Sobre o
   nav opaco ele era uma faixa branca correndo por cima dos rótulos. Some com
   `display: none`, e não com `animation: none`: o ::after não tem opacidade
   própria, e sem a animação sobraria uma faixa branca parada na esquerda.
   `nav::after` sem a classe porque os painéis declaram a regra assim, e a
   classe só chega depois que o JS roda. */
nav::after,
nav.vazk-glass::after {
    display: none;
}

nav button.on {
    animation: iosTabPop 0.36s var(--ease-fluid) both;
}

nav button.on .ui-icon {
    animation: iosIconPop 0.42s var(--ease-fluid) both;
}

.kpi .k-value,
.balde .b-valor {
    animation: iosValueIn 0.52s 0.08s var(--ease-fluid) both;
}

/* ------------------------------------------------- a troca de página ------
   Todas usam `both !important`: nenhuma pode sobreviver ao fim da troca, ou a
   que sobra volta a valer sozinha e termina o conteúdo em opacity 0. Quem
   remove é o ios-layer.js, no animationend. */
.ios-page {
    /* pinch-zoom junto: só pan-y desligava o zoom com pinça na página toda. */
    touch-action: pan-y pinch-zoom;
    transform-origin: center top;
    will-change: auto;
}

.ios-page.ios-page-exit-left {
    pointer-events: none;
    will-change: transform, opacity;
    animation: iosPageExitLeft 170ms cubic-bezier(0.4, 0, 1, 1) both !important;
}

.ios-page.ios-page-exit-right {
    pointer-events: none;
    will-change: transform, opacity;
    animation: iosPageExitRight 170ms cubic-bezier(0.4, 0, 1, 1) both !important;
}

.ios-page.ios-page-enter-right {
    will-change: transform, opacity;
    animation: iosPageEnterRight 510ms var(--ease-ios-spring) both !important;
}

.ios-page.ios-page-enter-left {
    will-change: transform, opacity;
    animation: iosPageEnterLeft 510ms var(--ease-ios-spring) both !important;
}

.ios-page.ios-page-dragging {
    animation: none !important;
    transition: none !important;
    will-change: transform, opacity;
    transform: translate3d(var(--swipe-x, 0px), 0, 0) scale(0.994);
    opacity: 0.94;
}

.ios-page.ios-page-snapback {
    animation: none !important;
    transform: translate3d(0, 0, 0);
    transition: transform 420ms var(--ease-ios-spring), opacity 280ms ease !important;
}

/* Tabela, gráfico e campo mantêm o gesto próprio: o swipe de página não pode
   roubar o scroll horizontal de uma tabela larga. */
.table-responsive,
.tbl-wrap,
canvas,
svg.gchart,
input,
textarea,
select {
    touch-action: auto;
}

@keyframes iosPageExitLeft {
    from { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
    to { opacity: 0; transform: translate3d(-5.5%, 0, 0) scale(0.985); }
}

@keyframes iosPageExitRight {
    from { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
    to { opacity: 0; transform: translate3d(5.5%, 0, 0) scale(0.985); }
}

@keyframes iosPageEnterRight {
    0% { opacity: 0; transform: translate3d(7%, 0, 0) scale(0.985); }
    68% { opacity: 1; transform: translate3d(-0.7%, 0, 0) scale(1.002); }
    100% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

@keyframes iosPageEnterLeft {
    0% { opacity: 0; transform: translate3d(-7%, 0, 0) scale(0.985); }
    68% { opacity: 1; transform: translate3d(0.7%, 0, 0) scale(1.002); }
    100% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

/* ------------------------------------------------------------- toque ------ */
@media (hover: hover) {
    .ios-reveal.is-visible.card:hover,
    .ios-reveal.is-visible.kpi:hover {
        transform: translate3d(0, -2px, 0) scale(1.004);
    }

    .btn-outline-sm:hover .ui-icon {
        transform: translateY(-1px) scale(1.06);
    }
}

@media (hover: none) {
    .ios-reveal.is-visible.card:hover,
    .ios-reveal.is-visible.kpi:hover {
        transform: translate3d(0, 0, 0) scale(1) !important;
    }
}

@media (max-width: 680px) {
    .ios-reveal {
        transform: translate3d(0, 10px, 0) scale(0.992);
    }
}

/* ----------------------------------------------------- quem pediu calma --- */
/* ------------------------------------------------------------ o topo -----
   O cabeçalho é um cartão alto: no celular são mais de 340px de logo, título
   e cinco botões antes de o conteúdo começar. Agora ele gruda no topo e, à
   primeira rolagem, encolhe para uma faixa — o nome do painel continua ali e
   a navegação também, em ícone. Quem põe a classe é o ios-layer.js, e ela
   mora no <html> para o CSS não precisar saber a marcação de cada painel.

   Fica abaixo dos modais (130) e acima da barra de ferramentas do CRM (5).
   ========================================================================= */
/* `html` na frente de propósito: o liquid-glass.css carrega depois desta
   folha e traz `header, .card, … { position: relative }`. Com a mesma
   especificidade, quem vem por último ganha — e o cabeçalho voltaria a rolar
   embora. Um seletor a mais resolve sem mexer na ordem de carga de todos os
   painéis. */
/* ---- por que a ancoragem de rolagem sai daqui ----
   O navegador "ancora" a rolagem: quando algo ACIMA do que esta na tela muda
   de tamanho, ele mexe no scrollY para manter a posicao visual. E um bom
   recurso — mas aqui o que muda de tamanho e o proprio cabecalho, e ele muda
   PORQUE a pessoa rolou. Vira laco: rola, encolhe, o navegador puxa a rolagem
   de volta, o valor cai abaixo do limiar, cresce, rola de novo.
   Medido numa tela de 440x956, parando a 55px do topo: 36 trocas de estado em
   dois segundos e meio, com o cabecalho piscando sozinho. Com a ancoragem
   desligada: 1 troca, e a rolagem fica onde a pessoa deixou (a 90px ela
   tambem parava de pular para 63).
   O preco de desligar e que conteudo que carrega acima da dobra pode empurrar
   a pagina. Nestes paineis a tela e desenhada de uma vez, entao o preco e
   baixo — e o piscar era certo, nao hipotetico. */
body {
    overflow-anchor: none;
}

html header {
    position: sticky;
    top: 10px;
    z-index: 50;
    transition:
        padding 0.22s ease,
        margin-bottom 0.22s ease,
        border-radius 0.22s ease;
}

header h1,
.logo-box {
    transition:
        font-size 0.22s ease,
        width 0.22s ease,
        height 0.22s ease;
}

/* ---- a barra de abas não briga mais com o cabeçalho ----
   Cada painel gruda a sua barra de navegação no mesmo `top: 10px` em que o
   cabeçalho para (.tabs no Metas, nav no Marketing, CRM e Tarefas). Sticky
   não empilha sozinho: as duas paravam na mesma linha e o cabeçalho, com
   z-index 50 contra 30, engolia a barra inteira — a navegação do painel
   sumia da tela no primeiro rolar e só voltava rolando tudo ao topo.
   A altura vem medida do ios-layer.js, em --ios-topo-h, porque ela muda ao
   encolher e muda de novo conforme a largura; número fixo erraria em alguma
   faixa. Os 10px são onde o cabeçalho para, os 8px são respiro.
   `html` na frente pelo mesmo motivo do bloco acima, e também para vencer o
   `.tabs { top: 8px }` que o Metas declara mais adiante na própria folha. */
html .tabs,
html nav {
    top: calc(10px + var(--ios-topo-h, 60px) + 8px);
}

:root.ios-topo-curto header {
    padding: 8px 14px;
    margin-bottom: 12px;
    border-radius: 18px;
}

/* A etiqueta e a linha de apoio saem primeiro: são o que menos se lê depois
   de a pessoa já saber em que painel está. */
:root.ios-topo-curto header .brand-kicker,
:root.ios-topo-curto header .sub {
    display: none;
}

:root.ios-topo-curto header h1 {
    font-size: 18px;
    line-height: 1.15;
}

:root.ios-topo-curto .logo-box {
    width: 36px;
    height: 36px;
    min-width: 36px;
    border-radius: 11px;
}

:root.ios-topo-curto .header-brand-wrap {
    gap: 10px;
    min-width: 0;
    flex: 0 1 auto;
}

/* As regras que encolhiam os botões do cabeçalho saíram junto com eles: os
   controles agora moram na gaveta do menu, e lá o rótulo é o que se lê. */

/* Sobrou, porém, uma regra do tempo em que eles moravam aqui: no celular os
   painéis dão `width: 100%` ao .header-brand-wrap, para os cinco a sete botões
   caberem numa linha própria abaixo da marca. Os botões foram para a gaveta e
   a regra ficou — a marca toma a linha inteira e empurra os três traços para
   baixo. Medido no CRM a 683px: o cabeçalho "curto" fechava 112px, quase o
   dobro dos 60px que ele deveria ter, justamente no estado que existe para
   devolver tela a quem rola.
   A correção mora aqui, e não em cada painel, porque quem mudou foi o menu.
   `header .header-brand-wrap` tem especificidade maior que o `.header-brand-wrap`
   solto dentro do @media, então vence sem precisar de !important. */
header .header-brand-wrap {
    width: auto;
    flex: 1 1 auto;
    min-width: 0;
}

/* Pela mesma razão, o cabeçalho continua sendo UMA linha. Abaixo de 560px o
   Metas o põe em coluna (index.html:1595) — regra que fazia sentido quando os
   controles moravam ali e precisavam de uma faixa própria. Com o botão de três
   traços entrando como último filho, a coluna dá a ele uma linha inteira:
   medido a 390px, o cabeçalho encolhido fechava 112px em vez de 60, o dobro do
   que ele existe para devolver a quem rola. */
html header {
    flex-direction: row;
    align-items: center;
}

/* -------------------------------------------------------------- o menu ---
   Três traços no lugar de cinco a sete controles soltos. O botão fica no
   cabeçalho; a gaveta mora no <body>, porque o cabeçalho tem backdrop-filter
   e seria o bloco de referência de qualquer filho `fixed`.

   Nada de [hidden] aqui: `display` de classe vence o [hidden] do navegador, e
   a gaveta ficaria aberta para sempre com o JavaScript jurando que fechou. O
   estado é uma classe no <html>, e o que esconde é transform + visibility.
   ========================================================================= */
.ios-menu-botao {
    flex: 0 0 auto;
    position: relative;
    z-index: 1;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: 42px;
    height: 42px;
    padding: 0;
    border: 1px solid var(--line, rgba(15, 23, 42, 0.12));
    border-radius: 13px;
    background: var(--vidro-corpo-alto, #FFFFFF);
    color: var(--navy, #0F172A);
    cursor: pointer;
}

.ios-menu-botao span {
    display: block;
    width: 18px;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
    transition:
        transform 0.25s cubic-bezier(0.22, 1, 0.36, 1),
        opacity 0.18s ease;
}

/* Aberto, os três traços viram o X que fecha. */
:root.ios-menu-aberto .ios-menu-botao span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

:root.ios-menu-aberto .ios-menu-botao span:nth-child(2) {
    opacity: 0;
}

:root.ios-menu-aberto .ios-menu-botao span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

[data-theme="dark"] .ios-menu-botao {
    background: var(--vidro-corpo-alto, #17213A);
    border-color: var(--line, #243049);
    color: #F8FAFC;
}

.ios-menu-fundo {
    position: fixed;
    inset: 0;
    z-index: 110;
    background: rgba(15, 23, 42, 0.42);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.28s ease, visibility 0.28s ease;
}

:root.ios-menu-aberto .ios-menu-fundo {
    opacity: 1;
    visibility: visible;
}

.ios-menu {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 120;
    display: flex;
    flex-direction: column;
    gap: 14px;
    width: min(320px, 86vw);
    padding: 16px;
    overflow-y: auto;
    background: var(--white, #FFFFFF);
    border-left: 1px solid var(--line, rgba(15, 23, 42, 0.12));
    box-shadow: -24px 0 60px -30px rgba(15, 23, 42, 0.5);
    /* 101% e não 100%: a sombra à esquerda escaparia pela borda da tela. */
    transform: translateX(101%);
    visibility: hidden;
    transition:
        transform 0.28s cubic-bezier(0.22, 1, 0.36, 1),
        visibility 0.28s ease;
}

:root.ios-menu-aberto .ios-menu {
    transform: none;
    visibility: visible;
}

[data-theme="dark"] .ios-menu {
    background: var(--vidro-corpo, #10182B);
    border-left-color: var(--line, #243049);
}

.ios-menu-topo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.ios-menu-titulo {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--muted, #64748B);
}

.ios-menu-fechar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--muted, #64748B);
    cursor: pointer;
}

.ios-menu-fechar svg {
    width: 18px;
    height: 18px;
}

.ios-menu-fechar:hover {
    background: rgba(37, 99, 235, 0.1);
    color: var(--royal-text, #1D4ED8);
}

/* Os controles que vieram do cabeçalho: lá eram uma linha que quebrava, aqui
   são uma coluna em que cada um ocupa a largura toda. */
.ios-menu .header-actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    flex-wrap: nowrap;
}

.ios-menu .header-actions .btn-outline-sm {
    width: 100%;
    justify-content: flex-start;
}

/* O chip do usuário fecha a lista, separado do resto: é identidade e saída,
   não navegação. */
.ios-menu .header-actions #authChip {
    margin-top: 6px;
    padding-top: 12px;
    border-top: 1px solid var(--line, rgba(15, 23, 42, 0.12));
}

.ios-menu .vazk-user-chip {
    width: 100%;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    .ios-page,
    .ios-page.ios-page-exit-left,
    .ios-page.ios-page-exit-right,
    .ios-page.ios-page-enter-left,
    .ios-page.ios-page-enter-right,
    .ios-pressable,
    .ios-pressable.is-pressing,
    .ios-pressable.ios-releasing {
        animation: none !important;
        transform: none !important;
        transition: none !important;
    }

    /* O mesmo cuidado do hub-motion.css, e aqui o defeito ja existia: este
       ::after so ficava invisivel por causa do `both` da animacao. Com
       `animation: none`, quem pede menos movimento no sistema via -- desde
       sempre -- uma faixa branca parada na esquerda da barra de abas. */
    nav::after,
    nav.vazk-glass::after {
        display: none !important;
    }

    .ios-touch-glow {
        display: none;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ---- alvo de dedo ----
   O bloco de `pointer: coarse` mudou para o hub-chrome.css (seção "Alvos de
   toque"): a casca tem um só, e ele fica na folha que carrega por último. */

/* Usabilidade compartilhada do Hub: navegação, leitura e toque. */

/* ---- a barra de painéis ----
   Atalho entre módulos, não barra de seção: fica ESTÁTICA, sem fundo nem
   borda, em 13px, logo abaixo do cabeçalho — um degrau abaixo das abas do
   próprio painel. O ativo é um sublinhado royal de 2px, com `aria-current`.
   Tudo pendurado na classe, nunca em `nav`: o ios-layer.js troca o <nav> por
   `div[role=navigation]`, e enquanto a troca não chega o `html body` na frente
   (0,1,2) vence o `nav { position: sticky; background: … }` dos painéis e o
   `nav.vazk-glass` da camada sólida (0,1,1). */
html body .hub-paineis {
    position: static;
    display: flex; flex-wrap: wrap; align-items: center; gap: 2px 4px;
    margin: 4px 0 16px; padding: 0;
    border: 0; border-radius: 0;
    background: none; box-shadow: none;
    backdrop-filter: none; -webkit-backdrop-filter: none;
    min-height: 0;
}
html body .hub-paineis::before,
html body .hub-paineis::after {display: none;}
html body .hub-paineis a {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 36px; padding: 6px 10px;
    border: 0; border-bottom: 2px solid transparent; border-radius: 0;
    background: none; text-decoration: none;
    font-family: inherit; font-weight: 600; font-size: 13px; line-height: 1.3;
    color: var(--muted, #55637A);
}
html body .hub-paineis a:hover {color: var(--navy, #0B132B); border-bottom-color: var(--line, #E2E8F0);}
html body .hub-paineis a[aria-current="page"] {
    color: var(--navy, #0B132B);
    border-bottom-color: var(--royal-fill, #2563EB);
}
html body .ios-menu-botao {display:flex;align-items:center;justify-content:center;gap:9px;width:auto;min-width:100px;padding:10px 14px;}
html body .ios-menu-botao b {font-size:13px;font-weight:650;}
html body .ios-menu-botao svg {flex:none;}
/* A KatIA fica fora da gaveta, ao lado de "Opções" (ios-layer.js:hastearKatia).
   Fora do `.header-actions` ela perde o `align-items` do pai, e o cabeçalho
   tem `flex-wrap` — sem o `flex:none` ela encolheria antes do menu. */
html body .hub-katia {flex:0 0 auto;min-height:42px;white-space:nowrap;}
html body header {padding:20px 24px;gap:16px;}
html body header h1 {font-size:clamp(23px,2.2vw,32px);line-height:1.2;}
html body header .logo-box {width:52px;height:52px;flex:0 0 52px;border-radius:14px;}
html body header .sub {font-size:14px;line-height:1.5;}
html body .hub-pular {position:fixed;left:16px;top:-100px;z-index:10000;background:#fff;color:#123;padding:12px 18px;border-radius:8px;}
html body .hub-pular:focus {top:16px;}
/* O anel de foco global mora no hub-chrome.css (seção "Foco"). */
html body :is(input,select,textarea) {caret-color:var(--royal,#2563eb);}
html body :is(input,textarea)::placeholder {opacity:1;}
html body :is(.card,.lista-caixa,.tar-modal,.quadro-barra) {line-height:1.5;}
html body :is(.btn-mini,.btn-outline-sm,.btn-cheio,.btn-primary,.subtabs button) {min-height:38px;}
html body :is(.lista th,table th) {font-size:12px;line-height:1.45;padding-top:12px;padding-bottom:12px;}
html body :is(.lista td,table td) {font-variant-numeric:tabular-nums;}
html body #nav {gap:6px;padding:8px;}
html body #nav button {min-height:42px;white-space:normal;line-height:1.35;}
html body :is(.empty-state,.vazio-msg,.col-vazia) {line-height:1.6;}
html body .ios-menu-corpo .header-actions {gap:10px;}
html body .ios-menu-corpo .header-actions > :is(a,button) {min-height:44px;justify-content:flex-start;}
html body .ios-menu-corpo .header-actions > a {border-color:var(--glass-border,#cbd5e1);}
@media(max-width:640px) {
    html body header {padding:16px;align-items:center;}
    html body header .header-brand-wrap {min-width:0;gap:12px;}
    html body header .sub {font-size:13px;}
    html body #nav {display:flex;flex-wrap:wrap;overflow:visible;}
    html body #nav button {flex:1 1 130px;min-height:44px;justify-content:center;}
    html body :is(.btn-mini,.btn-outline-sm,.btn-cheio,.subtabs button) {min-height:44px;}
}
@media(prefers-reduced-motion:reduce) {
    html body .ios-page,html body .ios-pressable {animation:none!important;transition:none!important;}
}

html body .hub-periodo {display:flex;flex-wrap:wrap;align-items:end;gap:14px;margin:-8px 0 22px;padding:12px 16px;background:var(--glass-bg,rgba(255,255,255,.86));border:1px solid var(--glass-border,#cbd5e1);border-radius:12px;}
html body .hub-periodo > div {display:flex;flex-direction:column;align-items:stretch;gap:6px;}
html body .hub-periodo label {font-size:12px;font-weight:650;color:var(--navy,#132b52);}
html body .hub-periodo :is(input,select) {min-height:40px;max-width:100%;font-family:inherit;}
@media(max-width:640px){html body .hub-periodo > div {flex:1 1 140px;min-width:0;}html body .hub-periodo :is(input,select){font-size:16px;width:100%!important;min-width:0;}}
/* A day-pill também é um <div> filho da faixa: sem isto herdaria a coluna dos
   campos. Fica em linha, na ponta direita, alinhada ao pé dos selects. */
html body .hub-periodo > .day-pill {flex:0 0 auto;flex-direction:row;align-items:center;margin-left:auto;}
html body .ios-menu[inert] {display:none;} html body .ios-menu {max-width:calc(100vw - 24px);} html body .ios-menu-botao {flex-direction:row;height:auto;min-height:44px;}
html body .katia-drawer:not(.open) {display:none;}

/* ---------------------------------------------------------------- telao --
   O basico do modo TV para TODOS os paineis. O Metas tem uma versao mais
   caprichada no proprio <style>, que carrega depois e vence nos empates --
   por isso a tela dele nao muda. Aqui fica o suficiente para Marketing,
   Financeiro e CRM entrarem na volta sem cada um repetir o estilo. */
html.tv-mode-root,
html.tv-mode-root body {
    overflow-x: hidden;
}

/* Some tudo o que nao e grafico: numa TV na parede ninguem clica em aba,
   busca ou menu -- eles so roubam espaco da unica coisa que importa. */
body.tv-mode .tabs,
body.tv-mode nav,
body.tv-mode .hub-paineis,
body.tv-mode .quadro-barra .abas,
body.tv-mode .menu-gestao,
body.tv-mode .search-box,
body.tv-mode .header-actions > .btn-outline-sm:not(.btn-tv-mode),
body.tv-mode .hub-katia,
body.tv-mode .katia-overlay,
body.tv-mode .katia-drawer {
    display: none !important;
}

body.tv-mode .tv-slide {
    scroll-margin-top: 16px;
}

.tv-status {
    position: fixed;
    left: 50%;
    bottom: 18px;
    transform: translateX(-50%);
    z-index: 60;
    display: none;
    align-items: center;
    gap: 10px;
    padding: 8px 16px;
    border-radius: 999px;
    background: #0F172A;
    color: #fff;
    font-size: 12.5px;
    font-weight: 600;
}

body.tv-mode .tv-status { display: flex; }

.tv-live-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #10B981;
    box-shadow: 0 0 0 4px rgba(16, 185, 129, .22);
}

.tv-status .tv-shortcut { opacity: .6; font-weight: 400; }

/* A barrinha que anda ate a proxima lamina: e ela que diz que a tela nao
   travou, so esta esperando. */
.tv-status.is-cycling::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    height: 2px;
    border-radius: 999px;
    background: #10B981;
    animation: telaoAnda 12s linear both;
}

@keyframes telaoAnda {
    from { width: 0; }
    to { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    .tv-status.is-cycling::after { animation: none; width: 100%; }
}

/* ============================================================ AVISOS ====
   O sino ao lado da KatIA e a gaveta da caixa de entrada (ios-layer.js:
   montarSino). Mesmo desenho da gaveta de Opções: estado numa classe do
   <html>, esconde por transform + visibility, nunca por [hidden]. */
html body .hub-sino {position:relative;flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;padding:0;border:1px solid var(--line, rgba(15, 23, 42, 0.12));border-radius:13px;background:var(--vidro-corpo-alto, #FFFFFF);color:var(--navy, #0F172A);cursor:pointer;}
html body .hub-sino svg {width:20px;height:20px;flex:none;}
html body .hub-sino:hover {color:var(--royal-text, #1D4ED8);}
html body .hub-sino-n {position:absolute;top:-6px;right:-6px;min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:#DC2626;color:#fff;font:700 11px/20px system-ui, sans-serif;font-style:normal;text-align:center;box-shadow:0 0 0 2px var(--vidro-corpo-alto, #FFFFFF);}
[data-theme="dark"] .hub-sino {background:var(--vidro-corpo-alto, #17213A);border-color:var(--line, #243049);color:#F8FAFC;}
.hub-avisos-fundo {position:fixed;inset:0;z-index:110;background:rgba(15, 23, 42, 0.42);opacity:0;visibility:hidden;transition:opacity 0.25s ease, visibility 0.25s ease;}
:root.hub-avisos-aberto .hub-avisos-fundo {opacity:1;visibility:visible;}
.hub-avisos {position:fixed;top:0;right:0;bottom:0;z-index:120;display:flex;flex-direction:column;width:min(400px, 92vw);background:var(--white, #FFFFFF);border-left:1px solid var(--line, rgba(15, 23, 42, 0.12));box-shadow:-24px 0 60px -30px rgba(15, 23, 42, 0.5);transform:translateX(101%);visibility:hidden;transition:transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), visibility 0.28s ease;}
:root.hub-avisos-aberto .hub-avisos {transform:none;visibility:visible;}
html body .hub-avisos[inert] {display:none;}
[data-theme="dark"] .hub-avisos {background:var(--vidro-corpo, #10182B);border-left-color:var(--line, #243049);}
.hub-avisos-topo {display:flex;align-items:center;gap:8px;padding:16px 12px 12px 18px;border-bottom:1px solid var(--line, rgba(15, 23, 42, 0.1));}
.hub-avisos-topo h2 {flex:1 1 auto;margin:0;font-size:15px;font-weight:800;color:var(--navy, #0F172A);}
.hub-avisos-tudo {border:0;background:transparent;color:var(--royal-text, #1D4ED8);font:600 12px system-ui, sans-serif;cursor:pointer;padding:6px 8px;border-radius:8px;white-space:nowrap;}
.hub-avisos-tudo:hover {background:rgba(37, 99, 235, 0.1);}
.hub-avisos-lista {flex:1 1 auto;overflow-y:auto;padding:8px;}
.hub-aviso {display:flex;gap:10px;width:100%;padding:10px;border:0;border-radius:12px;background:transparent;text-align:left;cursor:pointer;color:inherit;font:inherit;}
.hub-aviso:hover {background:rgba(37, 99, 235, 0.08);}
.hub-aviso.novo {background:rgba(37, 99, 235, 0.06);}
.hub-aviso.novo:hover {background:rgba(37, 99, 235, 0.12);}
.hub-aviso-tipo {flex:0 0 10px;width:10px;height:10px;margin-top:6px;border-radius:50%;background:#94A3B8;}
.hub-aviso-tipo.t-humano {background:#F59E0B;}
.hub-aviso-tipo.t-black {background:#7C3AED;}
.hub-aviso-tipo.t-comprou {background:#10B981;}
.hub-aviso-tipo.t-erro {background:#EF4444;}
.hub-aviso-tipo.t-pessoa {background:#2563EB;}
.hub-aviso-tipo.t-tarefa {background:#8B5CF6;}
.hub-aviso-tipo.t-prazo {background:#F97316;}
.hub-aviso-tipo.t-lead {background:#0891B2;}
.hub-aviso-corpo {display:flex;flex-direction:column;gap:2px;min-width:0;}
.hub-aviso-corpo b {font-size:13.5px;font-weight:700;line-height:1.35;color:var(--navy, #0F172A);}
.hub-aviso-corpo span {font-size:12.5px;line-height:1.45;color:var(--muted, #64748B);overflow-wrap:anywhere;}
.hub-aviso-corpo small {font-size:11px;color:var(--muted, #94A3B8);}
.hub-avisos-vazio {padding:40px 18px;text-align:center;font-size:13px;line-height:1.5;color:var(--muted, #64748B);}
.hub-avisos-pe {padding:10px 18px calc(10px + env(safe-area-inset-bottom, 0px));border-top:1px solid var(--line, rgba(15, 23, 42, 0.1));font-size:12px;color:var(--muted, #64748B);min-height:16px;}
.hub-avisos-pe button {border:0;background:transparent;color:var(--royal-text, #1D4ED8);font:600 12px system-ui, sans-serif;cursor:pointer;padding:0;}
[data-theme="dark"] .hub-aviso-corpo b, [data-theme="dark"] .hub-avisos-topo h2 {color:#F8FAFC;}
.hub-avisos-filtro {display:flex;gap:6px;padding:10px 12px 0;}
.hub-avisos-filtro button {display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line, rgba(15, 23, 42, 0.14));background:transparent;color:var(--muted, #64748B);font:600 12px system-ui, sans-serif;padding:6px 12px;border-radius:999px;cursor:pointer;}
.hub-avisos-filtro button:hover {background:rgba(37, 99, 235, 0.08);}
.hub-avisos-filtro button[aria-pressed="true"] {background:rgba(37, 99, 235, 0.12);border-color:rgba(37, 99, 235, 0.35);color:var(--royal-text, #1D4ED8);}
.hub-avisos-filtro button:focus-visible {outline:2px solid var(--foco, #2563EB);outline-offset:2px;}
.hub-avisos-filtro button i {min-width:18px;padding:0 5px;border-radius:9px;background:#DC2626;color:#fff;font-size:11px;font-style:normal;line-height:18px;text-align:center;}
.hub-avisos-filtro button i:empty {display:none;}
.hub-avisos-dia {padding:12px 10px 4px;font:700 11px system-ui, sans-serif;letter-spacing:0.06em;text-transform:uppercase;color:var(--muted, #64748B);}
.hub-aviso-sr {position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
[data-theme="dark"] .hub-avisos-filtro button[aria-pressed="true"] {color:#93C5FD;border-color:rgba(147, 197, 253, 0.4);}
@media (pointer: coarse) {
    .hub-avisos-filtro button {min-height:44px;}
}
body.tv-mode .hub-sino {display:none;}
@media (prefers-reduced-motion: reduce) {
    .hub-avisos, .hub-avisos-fundo {transition:none;}
}