/* app-mobile.css: o Flow da equipe no celular como app (pedido da Laise, 03/11/2026).
   Regra da casa no celular: nada corta e nada rola de lado. Grupo de opções vira
   grade de botões do mesmo tamanho, texto longo quebra linha, tabela vira cartão.
   Só existe no espelho: o build injeta este arquivo e o app-mobile.js no painel.html
   da CÓPIA. Acima de 760px nada muda. */

/* No computador a barra de cima não tem caixa própria: o Voltar dentro dela fica
   onde sempre esteve, com o texto. */
.am-top{display:contents}
/* a janela "De qual tema é este conteúdo?" (Flow curto) abria encostada no canto de cima à esquerda: a margem
   automática que centraliza um <dialog> era zerada por outra regra do painel (medido no iPhone em 06/11) */
dialog.fc-tema-dlg{margin:auto!important}
.am-title,.am-brand,.am-menu,.am-sub,.am-tabs,.am-sheet-head,.am-filtros,.am-mover,.nav-voltar svg{display:none}

@media (max-width:760px){
  /* o iPhone dá zoom na página ao tocar num campo com letra menor que 16px, e o zoom fica depois
     de fechar a janela (tela cortada e barra de cima sumindo): todo campo tem 16px no celular */
  input:not([type=checkbox]):not([type=radio]):not([type=range]),select,textarea{font-size:16px!important}
  :root{
    --am-top:56px; --am-sub:0px; --am-tab:62px;
    --am-st:env(safe-area-inset-top,0px); --am-sb:env(safe-area-inset-bottom,0px);
    --am-alto-util:calc(100dvh - var(--am-top) - var(--am-sub) - var(--am-st) - var(--am-tab) - var(--am-sb));
  }
  body.am-com-sub{--am-sub:56px}

  /* No Safari do iPhone, página que não rola por fora (só o meio rolava) faz a barra do
     Safari cobrir o menu inferior. Medido no iPhone 17 Pro em 03/11: com a página
     rolando normalmente, o Safari fica embaixo do menu, como deve. */
  html,body{height:auto!important;overflow-x:clip!important}
  .app{height:auto!important;min-height:calc(100lvh + 1px);overflow-x:clip!important;overflow-y:visible!important}
  /* página que cabe inteira sem rolar volta a ter o Safari por cima do menu: 1px a mais mantém
     a página rolando. E o Safari do iPhone alarga página embutida até caber o conteúdo dela:
     largura 1px com mínimo de 100% segura a página de dentro na largura da tela. */
  .app .view iframe{width:1px!important;min-width:100%!important;max-width:100%}
  .app main{overflow-x:clip!important;overflow-y:visible!important;min-width:0;width:100%}

  /* segurar o dedo numa capa ou num card abria o menu de imagem do iPhone (Compartilhar, Salvar no App Fotos)
     por cima do app; capa e card não são imagem para salvar (06/11) */
  img,.rot-card,.dap-card,.pev,.tc,.theme-card,.fc-card{-webkit-touch-callout:none}
  /* o que as barras substituem */
  #drawerBtn,#sbToggle,#btnImprimir,#printPop{display:none!important}

  /* ── barra de cima ── */
  .am-top{position:fixed;top:0;left:0;right:0;z-index:70;display:flex;align-items:center;gap:6px;
    height:calc(var(--am-top) + var(--am-st));padding:var(--am-st) 8px 0;
    background:rgba(245,239,232,.92);-webkit-backdrop-filter:saturate(1.4) blur(14px);backdrop-filter:saturate(1.4) blur(14px);
    border-bottom:1px solid var(--line)}
  .am-top .nav-voltar{position:static!important;flex:none;width:44px;height:44px;padding:0;border-radius:50%;
    display:flex;align-items:center;justify-content:center;background:transparent;color:var(--dark);box-shadow:none;visibility:visible!important}
  .am-top .nav-voltar svg{display:block}
  .am-top .nav-voltar .am-txt{display:none}
  .am-top .nav-voltar:active,.am-menu:active{background:var(--line-strong)}
  .am-title{display:block;flex:1;min-width:0;font-size:17px;font-weight:800;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .am-brand{display:flex;flex:none;align-items:center;gap:4px;height:44px;padding:0 10px 0 13px;border-radius:var(--r-pill);
    background:var(--dark);color:#fff;font-size:12px;font-weight:800;letter-spacing:.06em}
  .am-brand:empty{display:none}
  /* aviso de falha ao falar com o banco: logo abaixo da barra de cima, sem cobri-la */
  #backendBanner{top:calc(var(--am-top) + var(--am-sub) + var(--am-st))!important;z-index:68!important;font-size:12px!important;padding:6px 12px!important}
  body:has(#backendBanner.show){padding-top:0!important}
  .am-menu{display:flex;flex:none;width:44px;height:44px;border-radius:50%;align-items:center;justify-content:center;color:var(--dark)}

  /* ── Longos | Curtos, só na aba Temas ── */
  body.am-com-sub .am-sub{display:grid;grid-template-columns:1fr 1fr;gap:4px;position:fixed;z-index:69;left:0;right:0;
    top:calc(var(--am-top) + var(--am-st));height:var(--am-sub);padding:6px 12px;
    background:rgba(245,239,232,.92);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
  .am-sub button{min-height:44px;border-radius:12px;font-size:14px;font-weight:800;color:var(--fg2);background:rgba(30,27,46,.05)}
  .am-sub button.on{background:var(--dark);color:#fff}

  /* ── conteúdo entre as barras ── */
  .app main{padding-bottom:calc(var(--am-tab) + var(--am-sb))}
  /* com a faixa "O Flow recebeu novidades" à vista, o fim da página ganha espaço para não ficar atrás dela (06/11) */
  body:has(#novidadesBar.show) .app main{padding-bottom:calc(var(--am-tab) + var(--am-sb) + 72px)}
  .app .view{padding-top:calc(var(--am-top) + var(--am-sub) + var(--am-st) + 20px)!important;padding-left:16px!important;padding-right:16px!important}
  /* telas que mostram outra página por dentro: a página vai de borda a borda, logo
     abaixo da barra (o navegador grava o estilo como "padding: 0px", por isso o :has) */
  .app .view[style*="padding:0"],.app .view:has(>iframe){padding:calc(var(--am-top) + var(--am-sub) + var(--am-st)) 0 0!important}
  /* tema aberto: desde 05/11 o Flow tira a folga de cima do tema (#view-flow{padding-top:0}), e no celular
     os primeiros 56px do tema ficavam atrás da barra de cima e sobrava uma faixa vazia em cima do menu inferior */
  .app #view-flow{padding-top:calc(var(--am-top) + var(--am-sub) + var(--am-st))!important}
  .app #view-flow.am-carregando::before{content:"Abrindo o tema…";position:fixed;z-index:66;left:0;right:0;top:calc(var(--am-top) + var(--am-sub) + var(--am-st));padding:10px 16px;text-align:center;font-size:13px;font-weight:700;color:var(--fg2);background:rgba(245,239,232,.96);border-bottom:1px solid var(--line)}
  /* Central de Marketing: com o Manual aberto (uma página por dentro) a regra de cima tirava as margens da
     tela inteira, e títulos e botões encostavam na borda; e os grupos de botões rolavam de lado, com o
     último botão cortado: agora quebram linha */
  .app #view-pilar-marketing{padding:calc(var(--am-top) + var(--am-sub) + var(--am-st) + 20px) 16px 0!important}
  .cm-grupo-l{flex-wrap:wrap!important;overflow:visible!important}
  #gerencialFrame,#manualFrame,#campanhasFrame,#mercadoFrame,#concorrentesFrame,#segundoCerebroFrame,#flowFrame,#view-salvos iframe{height:var(--am-alto-util)!important}

  /* ── menu inferior ── */
  .am-tabs{position:fixed;left:0;right:0;bottom:0;z-index:70;display:grid;grid-template-columns:repeat(5,1fr);
    height:calc(var(--am-tab) + var(--am-sb));padding:0 2px var(--am-sb);
    background:var(--dark);border-top:1px solid rgba(255,252,248,.08);box-shadow:0 -8px 24px rgba(30,27,46,.18)}
  .am-tab{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-width:0;
    min-height:48px;color:#A79FC2;font-size:10.5px;font-weight:700;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
  .am-tab svg,.am-tab span{position:relative;z-index:1}
  .am-tab svg{transition:transform .18s}
  .am-tab::before{content:"";position:absolute;top:7px;left:50%;width:52px;height:30px;margin-left:-26px;border-radius:15px;
    background:rgba(217,117,89,.22);opacity:0;transform:scaleX(.6);transition:opacity .2s,transform .2s}
  .am-tab.on{color:#fff}
  .am-tab.on svg{color:var(--accent-light)}
  .am-tab.on::before{opacity:1;transform:none}
  .am-tab:active svg{transform:scale(.9)}
  .am-tab:focus-visible{outline:2px solid var(--white);outline-offset:-4px;border-radius:12px}
  /* com o teclado aberto (campo com foco) o menu inferior subia junto e ficava flutuando no meio da tela,
     por cima do conteúdo; enquanto se digita ele se recolhe e volta quando o teclado fecha (06/11) */
  body.am-teclado .am-tabs{transform:translateY(calc(100% + 20px));transition:transform .2s}

  /* ── menu completo: o menu lateral vira folha que sobe de baixo ── */
  .app .sidebar{position:fixed;left:0;right:0;top:auto;bottom:calc(var(--am-tab) + var(--am-sb));width:auto;min-width:0;
    max-height:calc(100dvh - var(--am-top) - var(--am-st) - var(--am-tab) - var(--am-sb) - 8px);
    border-radius:22px 22px 0 0;transform:translateY(calc(100% + var(--am-tab) + var(--am-sb)));
    transition:transform .28s cubic-bezier(.2,.8,.2,1);box-shadow:0 -18px 50px rgba(0,0,0,.4);z-index:65}
  .app .sidebar.open{transform:none}
  .app .sidebar.open+main{margin-left:0!important}
  .app .sidebar.open+main::before{content:"";position:fixed;inset:0;z-index:39;background:rgba(20,17,32,.5)}
  .am-sheet-head{display:flex;position:sticky;top:0;z-index:2;align-items:center;justify-content:space-between;padding:10px 16px 6px;background:var(--dark)}
  .am-sheet-head::before{content:"";position:absolute;top:7px;left:50%;width:40px;height:5px;margin-left:-20px;border-radius:3px;background:rgba(255,252,248,.25)}
  .am-sheet-head b{font-size:13px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#C8BFE0;margin-top:10px}
  .am-sheet-fechar{width:44px;height:44px;margin:4px -10px 0 0;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#C8BFE0}
  /* marcas em grade: todas à vista, nenhuma cortada na beirada */
  .app .sidebar .brand-pills{display:grid;grid-template-columns:repeat(3,1fr);overflow:visible}
  .app .sidebar .brand-pill{min-height:40px;padding:6px 4px;white-space:normal}
  /* desde 05/11 o Flow troca de marca por um menu (.bm-gatilho): a lista abre dentro da folha, empurrando
     o resto para baixo, em vez de flutuar e passar por baixo do menu inferior (as últimas marcas sumiam) */
  .app .sidebar .brand-pills:has(.bm-gatilho){display:block}
  .app .sidebar .bm-gatilho{min-height:44px}
  .app .sidebar .bm-menu{position:static!important;width:auto!important;max-height:none!important;margin-top:8px;box-shadow:none}
  .app .sidebar .bm-item{min-height:44px}
  .app .sidebar .nav-item{min-height:48px}

  /* ── Planejar: cada grupo de opções vira grade de botões iguais, nada corta ── */
  #view-planejamento .tracks,#view-planejamento .plan-seg{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));
    gap:6px;width:100%;max-width:100%;overflow:visible!important;padding:6px;border-radius:16px}
  #view-planejamento .plan-seg:has(>:nth-child(3):last-child){grid-template-columns:repeat(3,minmax(0,1fr))}
  #view-planejamento .tracks>*,#view-planejamento .plan-seg>*{min-width:0;min-height:44px;margin:0;padding:6px 4px;border-radius:12px;
    display:flex;align-items:center;justify-content:center;gap:5px;white-space:normal!important;line-height:1.2;text-align:center;font-size:13px}
  #view-planejamento .tracks>*{justify-content:flex-start;text-align:left;padding:6px 12px;min-height:44px}
  #view-planejamento .plan-bar{flex-direction:column;align-items:stretch}
  /* filtros recolhidos: à vista só as agendas, o botão de filtros e as ações */
  #view-planejamento .plan-bar:not(.am-aberto)>:not(.tracks):not(.am-filtros):not(.plan-acoes){display:none!important}
  .am-filtros{display:flex;align-items:center;gap:10px;width:100%;min-height:52px;padding:8px 14px;border-radius:14px;
    background:var(--white);border:1px solid var(--line-strong);text-align:left;color:var(--fg1)}
  .am-filtros span{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.25}
  .am-filtros b{font-size:14px;font-weight:800}
  .am-filtros small{font-size:12px;color:var(--fg3);overflow-wrap:anywhere}
  .am-filtros>svg:last-child{transition:transform .2s}
  .am-filtros[aria-expanded="true"]>svg:last-child{transform:rotate(180deg)}
  #view-planejamento .plan-acoes{display:flex;flex-wrap:wrap;gap:8px;width:100%;margin:0}
  /* cada botão ocupa metade da linha e o texto quebra: três botões nunca cortam o nome */
  #view-planejamento .plan-acoes>*{flex:1 1 calc(50% - 4px);min-width:0;min-height:44px;margin:0;justify-content:center;white-space:normal!important;text-align:center;line-height:1.2}
  /* mês e setas na mesma linha; tamanho dos cards embaixo */
  #view-planejamento .cal-top{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
  #view-planejamento .cal-nav{display:contents}
  #view-planejamento .cal-title{flex:1;min-width:0;order:0}
  #view-planejamento .cal-nav>button{order:1;min-width:44px;min-height:44px}
  /* tamanho dos cards (Compacto, Confortável, Grande) não aparece no celular (pedido da Laise, 03/11) */
  #view-planejamento .cal-nav>.plan-seg:has([data-plandens]){display:none!important}
  #view-planejamento .cal-nav>.plan-seg{order:2;flex-basis:100%}
  /* no celular o mês só mostra os dias com algo marcado; mês vazio ficava em branco */
  #view-planejamento .cal:not(:has(.pev))::after{content:"Nada marcado neste mês. Use as setas para ver outro mês.";display:block;padding:24px 16px;text-align:center;color:var(--fg3);font-size:14px;border:1px dashed var(--line-strong);border-radius:16px}
  /* Lista: a tabela vira um cartão por conteúdo, com o nome de cada coluna em cima do valor */
  #view-planejamento .plt-wrap{overflow:visible;border:0;background:transparent;box-shadow:none}
  #view-planejamento table.plt,#view-planejamento table.plt tbody,#view-planejamento table.plt tr,#view-planejamento table.plt td{display:block;width:auto}
  #view-planejamento table.plt thead{display:none}
  #view-planejamento table.plt tr{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 12px;margin-bottom:10px;padding:14px;
    background:var(--white);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-sm)}
  #view-planejamento table.plt tr.pd-sub{margin:-4px 0 10px 14px;background:var(--beige)}
  #view-planejamento table.plt td{padding:0;border:0;min-width:0;white-space:normal!important;overflow-wrap:anywhere}
  #view-planejamento table.plt td:empty{display:none}
  #view-planejamento table.plt td[data-am-vazio]{display:none}
  #view-planejamento table.plt td[data-am-rot]::before{content:attr(data-am-rot);display:block;margin-bottom:3px;font-size:10px;font-weight:800;
    letter-spacing:.1em;text-transform:uppercase;color:var(--fg3)}
  #view-planejamento table.plt td:has(.plt-titulo),#view-planejamento table.plt td.pd-titulo{grid-column:1/-1;font-size:15px}
  #view-planejamento table.plt td input,#view-planejamento table.plt td select{max-width:100%;min-height:40px}
  /* o status é a frase mais longa do cartão: ocupa a linha inteira para não cortar */
  #view-planejamento table.plt td[data-am-rot="Status"]{grid-column:1/-1}
  .pd-nome{white-space:normal!important;overflow:visible!important;text-align:left;max-width:100%}
  #view-planejamento .pev-aba{max-width:none;white-space:normal;height:auto}
  /* Kanban (Gravações, Edições em quadro): colunas uma embaixo da outra, cada uma do tamanho do que tem.
     Lado a lado, só uma coluna cabia, as outras ficavam escondidas à direita e a coluna curta virava
     um bloco branco do tamanho da mais longa */
  #view-planejamento .plan-kb{grid-auto-flow:row!important;grid-template-columns:minmax(0,1fr)!important;overflow:visible!important}
  #view-planejamento .plan-kb .kb-col{min-height:0!important}
  /* ⋯ dos cards do calendário tinha 17px: no dedo errava e abria o card */
  #view-planejamento .pev .card-menu-btn{width:30px;height:30px;font-size:15px;top:2px;right:2px}
  /* área de toque de 44 pontos em volta do ⋯ sem crescer o botão por cima do card (Vera, 06/11) */
  #view-planejamento .pev .card-menu-btn::before{content:"";position:absolute;inset:-7px}
  /* ↗ Abrir do card do curto: 34 pontos; no celular 44 */
  #view-curtos .fc-card .seta,#view-curtos .fc-card button.seta{min-width:44px;min-height:44px}
  /* a fila (gaveta) do Planejamento sobe de baixo, de borda a borda; arrastar pelo título não a tira
     da tela (a posição guardada do computador não vale aqui) */
  .plan-gaveta{left:8px!important;right:8px!important;top:auto!important;width:auto!important;max-height:calc(100dvh - var(--am-top) - var(--am-st) - var(--am-tab) - var(--am-sb) - 24px)!important}

  /* ── Design Maker: as quatro abas em grade; Central do Negócio: números quebram linha ── */
  .dm-abas{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
  .dm-aba{justify-content:center;min-width:0;white-space:normal}
  .ci-stat,.ci-stat *{min-width:0;overflow-wrap:anywhere}

  /* ── Temas: a etiqueta de status do card quebra linha em vez de cortar na direita ── */
  .tc-status,.rot-badge,.series-marca{white-space:normal!important;max-width:100%;text-align:left}
  .rot-top{flex-wrap:wrap!important}

  /* ── Início: o nome do tema quebra linha em vez de virar "..." ── */
  .dap-tema{white-space:normal!important;overflow:visible!important}
  .dap-card *{min-width:0;overflow-wrap:anywhere}

  /* ── Temas curtos: filtros um embaixo do outro, nenhum texto cortado no seletor ── */
  .fc-toolbar{display:grid!important;grid-template-columns:1fr!important}
  .fc-folder-aba{max-width:100%;white-space:normal;overflow:visible}

  /* ── barra de Mover pro Flow (Gerencial e Virais), acima do menu inferior ── */
  .am-mover:not([hidden]){display:flex;flex-wrap:wrap;align-items:center;gap:8px;position:fixed;z-index:71;left:8px;right:8px;
    bottom:calc(var(--am-tab) + var(--am-sb) + 8px);padding:10px 12px;border-radius:16px;background:var(--white);
    border:2px solid var(--accent);box-shadow:0 10px 30px rgba(30,27,46,.25)}
  .am-mover-n{font-weight:800;font-size:14px}
  .am-mover-dest{min-height:36px;border-radius:10px;border:1px solid var(--line-strong);background:#fff;font:inherit;font-size:13px;padding:0 8px}
  .am-mover-btn{margin-left:auto;min-height:40px;padding:0 16px;border-radius:999px;background:var(--accent-aa);color:#fff;font-weight:800;font-size:14px}
  .am-mover-msg{flex-basis:100%;font-size:12.5px;color:var(--fg2)}
  .am-mover-msg:empty{display:none}

  /* ── flutuantes acima do menu inferior ── */
  .am-top .larry-fab{position:static!important;flex:none;order:2;width:44px!important;height:44px!important;border-width:2px!important;box-shadow:none!important}
  .am-top .am-brand{order:3}.am-top .am-menu{order:4}
  /* dentro de um tema o Larry da barra abre o guia do próprio tema */
  body:has(#view-flow.active) .am-top .larry-fab{display:flex!important}
  .larry-pop{top:calc(var(--am-top) + var(--am-sub) + var(--am-st) + 8px)!important;bottom:auto!important;right:8px!important;left:8px!important;width:auto!important;max-height:calc(100dvh - var(--am-top) - var(--am-st) - var(--am-tab) - var(--am-sb) - 24px)!important}
  #espelho-fila{bottom:calc(var(--am-tab) + var(--am-sb) + 12px)!important}
  #toastCol{bottom:calc(var(--am-tab) + var(--am-sb) + 12px)!important}
  /* com uma janela aberta (Novo card, ficha, menu do card) os avisos cobriam os botões do pé da janela
     ("Escolher o tema", "Cancelar"); com janela aberta o aviso sobe para logo abaixo da barra de cima (06/11) */
  body:has(.modal-overlay.active,dialog[open],.card-menu.open,aside.fp.on,.plan-gaveta.on,#planGaveta.on,.apr-drawer.open) #toastCol{top:calc(var(--am-st) + 4px)!important;bottom:auto!important;left:8px!important;right:auto!important;max-width:62vw;align-items:flex-start!important}
  /* "O Flow recebeu novidades": faixa fina logo acima do menu inferior, de borda a
     borda, em vez de um cartão alto em cima do conteúdo */
  #novidadesBar{bottom:calc(var(--am-tab) + var(--am-sb) + 6px)!important;top:auto!important;left:8px!important;right:8px!important;
    transform:none!important;max-width:none!important;padding:6px 6px 6px 12px!important;gap:8px!important;border-radius:12px!important}
  #novidadesBar .nb-txt{font-size:12px!important;line-height:1.3!important}
  #novidadesBar .nb-btn{min-height:36px;flex:none}
  .plan-gaveta{bottom:calc(var(--am-tab) + var(--am-sb) + 8px)!important}
  /* barrinha de status do tema: com muitas peças as últimas cores sumiam; todas cabem */
  .fs-barra{gap:1px!important}
  .fs-barra span{min-width:0!important}
  /* gaveta "Para aprovar" (Início > número de peças): tinha 370 dos 402 pontos e os cartões encostavam na borda;
     no celular ocupa a tela inteira, com margem dos dois lados (06/11) */
  .apr-drawer{width:100vw!important;max-width:none!important}
  .apr-list{padding-left:16px!important;padding-right:16px!important}
  /* × do painel e botão "Abrir no Flow para aprovar" com 44 pontos (Vera, 07h10) */
  .apr-drawer #aprClose{width:44px;height:44px;display:flex;align-items:center;justify-content:center}
  .apr-drawer .ap-go{min-height:44px;display:inline-flex;align-items:center}
  /* ficha de curto: ocupa a tela toda (sobrava uma faixa do fundo) e as datas cabem (o campo de data
     do iPhone tem 151px de largura mínima e empurrava a segunda coluna pra fora da margem) */
  .fp{width:100vw!important;border-left:0!important;padding:16px!important}
  .fp-datas{grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important}
  .fp-datas>*{min-width:0}
  .fp-datas .fp-dt input{min-width:0!important;width:100%!important;max-width:100%;box-sizing:border-box;-webkit-appearance:none;appearance:none}
  /* menu de opções de um card (⋯ e status): perto do fim da tela os últimos itens sumiam atrás do menu
     inferior; no celular ele sobe de baixo, inteiro, acima da barra, rolando se precisar */
  .card-menu.open{left:8px!important;right:8px!important;top:auto!important;bottom:calc(var(--am-tab) + var(--am-sb) + 8px)!important;
    max-height:calc(100dvh - var(--am-tab) - var(--am-sb) - 80px)!important;min-width:0!important;z-index:2100!important}
  .card-menu.open>button{min-height:40px}
  /* o aviso "O Flow recebeu novidades" cobria o fim da gaveta, do menu do card e da ficha: com uma janela
     aberta ele some, e volta quando ela fecha */
  body:has(.card-menu.open,#planGaveta.on,.plan-gaveta.on,aside.fp.on,.apr-drawer.open,.modal-overlay.active,dialog[open]) #novidadesBar{display:none!important}
  /* Central do Negócio e Kit de design: a etiqueta desce para baixo do título do bloco, e
     tabela larga rola de lado dentro do cartão em vez de sair da tela */
  .ci-bloco-head{flex-wrap:wrap!important}
  .ci-etq{flex:1 1 100%!important;min-width:0;overflow-wrap:anywhere}
  #view-pilar-inteligencia table,#view-pilar-design table{display:block;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
  /* Meu conhecimento: a faixa de cima ficava presa ocupando a tela; vira uma linha só com o botão */
  .conhecimento-bar{padding:8px 12px!important}
  .conhecimento-bar .cb-sub,.conhecimento-bar .cb-title{display:none}
}

/* Planejamento > Lista > ⚙️ Colunas: a lista de colunas abre para a direita do botão e, em tela de até 900
   pontos (iPad em pé, celular), saía pela borda com "+ Nova propriedade" cortado; abre encostada na direita (06/11) */
@media (max-width:900px){
  .pd-cols-lista{left:auto!important;right:0;max-width:calc(100vw - 24px)}
}

@media (max-width:760px) and (prefers-reduced-motion:reduce){
  .app .sidebar,.am-tab::before,.am-tab svg{transition:none}
}