/* design-casa.css — a camada do script de design (10/10/2026; ferramentas/design/: o olho mede, o roteador escolhe a rota, as mãos corrigem).
   Cada regra aqui é uma correção que SOBE (vale para todas as janelas), com a regra do olho que a pediu. O contrato: contexto/estudos/DESIGN-CONTRATO-2026-10-10.md.
   Carregada por último no /nova: vence as regras de antes sem apagar nenhuma. */

/* R1 · token: toda janela tem a superfície dos desenhos (#181438, o fundo de 66 dos painéis desenhados; 11/10: era #110e26, a cor dos
   cartões DE DENTRO do desenho, e a janela ficou igual aos cartões); o desenho não traz mais o fundo
   próprio (preto, gradiente, vidro): era isso que fazia a cor mudar de uma aba para outra */
.nv-janela { --desenho-fundo: #181438 !important; --desenho-borda: rgba(171, 151, 255, .22) !important; background: #181438 !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
.nv-janela .nv-desenho-cartao, .nv-janela .nv-molde-painel { background: transparent !important; }
body.leve .nv-janela { background: #181438 !important; }

/* R2 · peça: a janela é uma coluna; o desenho ocupa a altura toda (antes, o cartão parava no meio e o resto da janela ficava de outra cor) */
.nv-janela .nv-j-corpo { display: flex; flex-direction: column; }
.nv-janela .nv-j-corpo > :only-child { flex: 1 0 auto; }

/* R4 · a rolagem é por dentro, no meio da janela: a página não rola */
.nv-janela .nv-j-corpo { overflow-y: auto; overscroll-behavior: contain; }

/* R5 · peça: no celular, a fileira de botões de um item quebra a linha em vez de um botão cobrir o outro; cada botão com 44 px de toque */
/* 19/10, 01:4x: a grade de botões (role="grid", a Agenda por recurso) não é fileira: virava flex e as vagas ficavam com 1 px de largura */
html.modo-chat .nv-janela :is(div, li, footer):not(.janela-traffic):not([role="grid"]):has(> button + button + button) { display: flex; flex-wrap: wrap; gap: 8px; }
html.modo-chat .nv-janela :is(div, li, footer):not(.janela-traffic):not([role="grid"]):has(> button + button + button) > button { flex: 0 1 auto; min-height: 44px; position: static; }

/* R6 · a jornada: a faixa "Continuar com" no pé de cada janela (frontend/nova/jornada.js) */
.nv-jornada { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 18px 14px; border-top: 1px solid rgba(171, 151, 255, .14); flex: 0 0 auto !important; }
.nv-jornada span { color: var(--ink-3); font: 13px/1.4 var(--sans, system-ui); margin-right: 4px; }
.nv-jornada button { min-height: 36px; padding: 6px 14px; border-radius: 999px; border: 1px solid rgba(171, 151, 255, .35); background: rgba(171, 151, 255, .10); color: #efecff; font: 13px/1.2 var(--sans, system-ui); cursor: pointer; }
.nv-jornada button:hover { background: rgba(171, 151, 255, .22); }
.nv-jornada button:focus-visible { outline: 2px solid #ab97ff; outline-offset: 2px; }
/* R5 · a faixa da jornada não cobre o fim do conteúdo: o corpo encolhe para caber a faixa e rola por dentro */
.nv-janela > .nv-j-corpo { flex: 1 1 auto !important; min-height: 0 !important; }

/* A ESCALA DA CASA, em teste no Mídias (11/10; aprovada, vale para todos): a paleta é a dos desenhos do Claude Design (a referência do Theus).
   superfície #181438 · cartão de dentro #110e26 · cartão elevado #221c48 · borda rgba(200,190,255,.10) e forte rgba(171,151,255,.22)
   texto #efecff · texto 2 #bdb6e3 · texto 3 #9992c6 (o --ink-3; era #8f88bd até 17/10) · destaque #ab97ff. A borda azul dos cartões (rgba(128,198,255,…)) era de outra família:
   vira a borda da casa; o azul fica só para o que é informação (ponto, chip). */
.nv-janela[data-app=midias] [style*="rgba(128,198,255"] { border-color: rgba(171, 151, 255, .22) !important; }
.nv-janela[data-app=midias] .nv-desenho-cartao [style*="background:#110e26"] { background: #110e26 !important; }
.nv-janela[data-app=midias] .nv-jornada { background: transparent; }

/* O NOVO MOLDE (11/10, a leva à mão: Vendas e Campanhas; o Theus: "aproveite para deixar as páginas ainda mais bonitas, então tornamos elas
   mais bonitas o nosso novo molde"). Cada regra aqui é um padrão que o script vai repetir nas 243.
   M1 a borda azul dos cartões vira a da casa (antes só no Mídias) */
html:not(.nova-2) .nv-janela [style*="rgba(128,198,255"], html:not(.nova-2) .nv-janela [style*="rgba(128, 198, 255"] { border-color: rgba(171, 151, 255, .22) !important; }
/* M2 o vazio é um convite, não um aviso solto: caixa tracejada leve, cantos de 14, texto no meio com respiro */
.nv-janela .nv-molde-vazio { margin: 12px; padding: 22px !important;   /* 18/10: 20 px saía da escala (4 · 8 · 12 · 16 · 22 · 28 · 36) */ border: 1px dashed rgba(171, 151, 255, .22); border-radius: 14px;
  background: rgba(171, 151, 255, .035); color: #bdb6e3 !important; font-size: 13px; line-height: 1.55; text-align: center; text-wrap: balance; }
.nv-janela .nv-molde-vazio .nv-molde-vazio { margin: 0; border: 0; background: none; padding: 8px !important; }
/* M3 colunas e listas desenhadas (o quadro de etapas): cartão de dentro da casa, borda fina, cantos de 14 */
.nv-janela [data-lista][style*="background:rgba(255,255,255,.02"], .nv-janela [data-lista][style*="background: rgba(255, 255, 255, 0.02"] {
  background: #110e26 !important; border: 1px solid rgba(200, 190, 255, .10); border-radius: 14px !important; }
/* M4 a gaveta do lado fica fechada até alguém ser escolhido (refino.js marca data-gaveta) */
.nv-janela [data-gaveta="fechada"] { display: none !important; }
/* M5 a prévia da página do cliente: os celulares no meio, encolhidos pela altura que sobra (universal.js põe --previa-zoom), sobre um
   fundo que lembra uma mesa, com a legenda de quem vê */
.nv-janela [data-previas] { justify-content: center; align-items: flex-start; gap: 28px !important; padding: 8px 22px 22px;
  background: radial-gradient(60% 80% at 50% 0%, rgba(171, 151, 255, .08), transparent 70%); }
.nv-janela [data-previa="celular"] { zoom: var(--previa-zoom, .6); flex-shrink: 0; box-shadow: 0 30px 70px -30px rgba(0, 0, 0, .75), 0 0 0 8px #0b0920, 0 0 0 9px rgba(200, 190, 255, .14); }
.nv-previa-legenda { margin: 14px 0 6px; text-align: center; font-size: 12px; letter-spacing: .02em; color: var(--ink-3); }
/* M6 cabeçalho de tabela não corta a palavra ("VENDAS FIR…"): quebra em duas linhas */
.nv-janela [style*="text-transform:uppercase"][style*="text-overflow:ellipsis"] { white-space: normal !important; text-overflow: clip !important; overflow: visible !important; line-height: 1.25; }