/* ==================================================================== web/css/painel-v2.css — acréscimos do Claude Design ao painel v2 (09/10/2026; pacote para-claude-design-revisao/entrega, fichas Fic00–Fic14, painel-acrescimos.css). Prefixo `ac-` para o que é novo; as regras sobre as classes `ck-` existentes aplicam o DS v2 (web/css/ds-v2.css) sem mudar dado, evento nem regra. Tudo começa por html[data-cockpit][data-ck2] (ou html[data-ck2] no balão do tour): com ?painel=v1 nada daqui vale. Serifada (Source Serif 4): a CSP do netlify.toml fecha font-src em 'self' (sem Google Fonts) — o --font-serif do DS cai no Georgia. ==================================================================== */ /* ---------- Fic00 · regras gerais ---------- */ /* cabeçalho de seção: título 17/600, resumo de 1 linha em 13 */ html[data-cockpit][data-ck2] #ck-painel .ck-s2 > .ck-h { font-size: 17px; line-height: 23px; font-weight: 600; letter-spacing: -.01em; } html[data-cockpit][data-ck2] #ck-painel .ck-s2.leve > .ck-h { font-size: 17px; } html[data-cockpit][data-ck2] #ck-painel .ck-s2 > .ck-h .ck-resumo { font-size: 13px; color: var(--ds-ink-2); } /* entre seções no computador: faixa de 8 px em ds-fill (.ac-div-sec), no lugar do fio */ @media (min-width: 1024px) { html[data-cockpit][data-ck2] #ck-painel .ck-s2 { margin-top: 0; } html[data-cockpit][data-ck2] #ck-painel .ck-s2::before { /* a faixa vai de borda a borda por sombra (sombra não cria rolagem horizontal; margem negativa criava a 320/400 px) */ content: ""; display: block; height: 8px; margin: 0 0 8px; background: var(--ds-fill); box-shadow: calc(-1 * var(--ck-gut, 18px)) 0 0 var(--ds-fill), var(--ck-gut, 18px) 0 0 var(--ds-fill); } html[data-cockpit][data-ck2] #ck-painel .ck-s2 > .ck-h { border-top: 0; padding: 10px 0 10px; } } /* hipótese = dourado com sublinhado tracejado (Fic00: "~" só em frase corrida) */ html[data-cockpit][data-ck2] #ck-painel .ck-til { text-decoration: underline dashed var(--ds-hipotese-linha); text-underline-offset: 3px; } /* sombra só no que flutua: cards no fluxo ficam planos */ html[data-cockpit][data-ck2] #ck-painel .ck-card { box-shadow: none; } /* ---------- Fic01 · Topo do painel (aprovado) ---------- */ /* abas Newgo · Documentos · Ferramentas no padrão .ds-seg */ html[data-cockpit][data-ck2] #ck-painel .ck-tab.on { box-shadow: 0 1px 2px rgba(10,22,40,.08), 0 0 0 1px rgba(10,22,40,.04); } /* atalhos no padrão .ds-atalhos: 13/500, pílula escura (azul) na seção atual, ponto verde no que mudou */ html[data-cockpit][data-ck2] #ck-painel .ck-atalhos a { min-height: 30px; padding: 0 11px; font-size: 13px; color: var(--ds-ink-2); } html[data-cockpit][data-ck2] #ck-painel .ck-atalhos a:hover { background: var(--ds-hover); color: var(--ds-ink); } html[data-cockpit][data-ck2] #ck-painel .ck-atalhos a.on { background: var(--ds-azul); color: #fff; } /* o que mudou: ponto verde no canto (.ds-atalhos button.mudou::after) */ html[data-cockpit][data-ck2] #ck-painel .ck-atalhos .ck-novo { position: absolute; top: 3px; right: 2px; width: 6px; height: 6px; background: var(--ds-novo); } html[data-cockpit][data-ck2] #ck-painel .ck-atalhos a.on .ck-novo { background: #fff; } /* ---------- Topo do painel, redesenhado (13/10/2026; pedido do Rafa: "ficou bem feia — ou tiramos ou redesenhamos") ---------- Uma linha discreta colada aos atalhos: "Etapa atual: " em 13 px (rótulo ink-2 400, etapa ink 600) à esquerda e as quatro etapas em traços à direita (o desenho da linha do tempo do celular, .ckc-tl-b). Sem "Neste turno", a seção seguinte começa sem a faixa cinza (.sem-turno). Com novidade: os balões do DS, ou o resumo do turno inteiro, com o ponto verde, quebrando em linhas (nunca "…"). `?topo=sem` na sandbox tira o bloco inteiro (js/flags.js). */ html[data-cockpit][data-ck2] #ck-painel .ck-agora-sec.ac-topo { margin: 0; padding: 8px 0 10px; } html[data-cockpit][data-ck2] #ck-painel .ac-topo-l { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 24px; } html[data-cockpit][data-ck2] #ck-painel h1.ck-agora.ac-etapa-atual { margin: 0; min-width: 0; font-size: 13px; line-height: 19px; font-weight: 400; letter-spacing: 0; color: var(--ds-ink-2); } html[data-cockpit][data-ck2] #ck-painel h1.ck-agora.ac-etapa-atual b { font-weight: 600; color: var(--ds-ink); } html[data-cockpit][data-ck2] #ck-painel .ac-passos { flex: none; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 22px); gap: 4px; } html[data-cockpit][data-ck2] #ck-painel .ac-passo { display: block; height: 4px; border-radius: 2px; background: var(--ds-fill-2); } html[data-cockpit][data-ck2] #ck-painel .ac-passo.feita { background: var(--ds-azul-linha); } html[data-cockpit][data-ck2] #ck-painel .ac-passo.atual { background: var(--ds-azul); } @media (min-width: 1024px) { /* sem novidade, o topo é só a linha: a seção de baixo não abre com a faixa de 8 px */ html[data-cockpit][data-ck2] #ck-painel .ck-agora-sec.ac-topo.sem-turno + .ck-s2::before { display: none; } html[data-cockpit][data-ck2] #ck-painel .ck-agora-sec.ac-topo.sem-turno + .ck-s2 > .ck-h { padding-top: 4px; } } /* o resumo do turno sem balões: ponto verde + texto inteiro, quebrando em linhas */ html[data-cockpit][data-ck2] #ck-painel .ck-baloes.ck-bl-so-resumo { margin-top: 10px; } html[data-cockpit][data-ck2] #ck-painel .ck-bl-so-resumo .ck-bl-h.com-resumo { align-items: flex-start; gap: 8px; font-size: 13px !important; line-height: 19px; font-weight: 400; color: var(--ds-ink-2) !important; } html[data-cockpit][data-ck2] #ck-painel .ck-bl-so-resumo .ac-dot-novo { margin-top: 5px; } html[data-cockpit][data-ck2] #ck-painel .ck-bl-so-resumo .ck-bl-resumo { white-space: normal; overflow: visible; text-overflow: clip; } /* "● Neste turno 4 mudanças Dispensar todas" (.ds-turno-cab) */ html[data-cockpit][data-ck2] #ck-painel .ck-baloes { margin-top: 10px; gap: 8px; } html[data-cockpit][data-ck2] #ck-painel .ck-bl-h.ac-turno-cab { justify-content: space-between; margin: 0 0 2px; } html[data-cockpit][data-ck2] #ck-painel .ac-turno-t { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--ds-ink); } html[data-cockpit][data-ck2] #ck-painel .ac-dot-novo { width: 8px; height: 8px; border-radius: 50%; flex: none; display: inline-block; background: var(--ds-novo); } html[data-cockpit][data-ck2] #ck-painel .ac-meta { font-size: 12px; line-height: 17px; font-weight: 400; color: var(--ds-ink-3); } html[data-cockpit][data-ck2] #ck-painel .ck-bl-todos { min-height: 32px; padding: 0 8px !important; border-radius: 999px; font-size: 13px !important; font-weight: 500; color: var(--ds-ink-2) !important; } html[data-cockpit][data-ck2] #ck-painel .ck-bl-todos:hover { background: var(--ds-hover) !important; color: var(--ds-ink) !important; } /* balões (.ds-balao): fundo ds-fill, sem borda; título 15/500; texto 13 em uma linha com reticências; X de 28 px */ html[data-cockpit][data-ck2] #ck-painel .ck-balao { border: 0; border-radius: var(--ds-r-2); background: var(--ds-fill); } html[data-cockpit][data-ck2] #ck-painel .ck-bl-t { padding: 10px 4px 10px 14px; gap: 10px; } html[data-cockpit][data-ck2] #ck-painel .ck-bl-t b { font-size: 15px; line-height: 22px; font-weight: 500; color: var(--ds-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } html[data-cockpit][data-ck2] #ck-painel .ck-balao.aberto .ck-bl-t b { white-space: normal; } html[data-cockpit][data-ck2] #ck-painel .ck-bl-t small { display: block; font-size: 13px !important; line-height: 19px; color: var(--ds-ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: unset; } html[data-cockpit][data-ck2] #ck-painel .ck-balao.aberto .ck-bl-t small { white-space: normal; } /* o balão do DS não tem ponto (o ponto verde fica só no cabeçalho "Neste turno"); o aviso "montado" mantém o dele */ html[data-cockpit][data-ck2] #ck-painel .ck-balao:not(.ck-bl-montado) .ck-bl-pt { display: none; } html[data-cockpit][data-ck2] #ck-painel .ck-bl-montado .ck-bl-pt { width: 8px; height: 8px; margin-top: 7px; } html[data-cockpit][data-ck2] #ck-painel .ck-bl-x { width: 28px; height: 28px; margin: 7px 6px 0 0; border-radius: 999px; color: var(--ds-ink-2) !important; } html[data-cockpit][data-ck2] #ck-painel .ck-bl-x:hover { background: var(--ds-hover) !important; color: var(--ds-ink) !important; } html[data-cockpit][data-ck2] #ck-painel .ck-bl-exp { padding: 0 14px 12px 32px; font-size: 13px; line-height: 19px; color: var(--ds-ink-2); } html[data-cockpit][data-ck2] #ck-painel .ck-bl-mais { min-height: 32px; border-radius: 999px; font-size: 13px; } html[data-cockpit][data-ck2] #ck-painel .ck-bl-mais:hover { background: var(--ds-hover) !important; } /* o aviso privado e o "montado" seguem distintos do balão comum */ html[data-cockpit][data-ck2] #ck-painel .ck-bl-priv { background: #fff; border: 1px dashed var(--ds-hair-2); } html[data-cockpit][data-ck2] #ck-painel .ck-bl-montado { border: 1px solid var(--ds-azul-linha); background: var(--ds-azul-claro); } html[data-cockpit][data-ck2] #ck-painel .ck-bl-montado .ck-bl-pt { background: var(--ds-azul); } /* o resumo corrido (só quando não há balão): 13, sem caixa alta */ html[data-cockpit][data-ck2] #ck-painel .ck-bl-resumo { font-size: 13px; line-height: 19px; font-weight: 400; color: var(--ds-ink-2); } /* ---------- Fic02 · O Ring e etapas (aprovada) ---------- */ /* nós: sem bolinha e sem "~"; evidência = azul cheio com número branco; hipótese = tracejado dourado; sem nota = tracejado cinza com "—"; fora da etapa = cinza cheio, rótulo ink-3; o mais fraco = contorno vermelho */ html[data-cockpit][data-ck2] #ck-painel .ck-node .ck-sab { display: none !important; } html[data-cockpit][data-ck2] #ck-painel .ck-node { background: var(--ds-fundo) !important; color: var(--ds-ink) !important; border: 1px solid var(--ds-hair-2) !important; font-weight: 600; font-variant-numeric: var(--ds-num); opacity: 1 !important; } html[data-cockpit][data-ck2] #ck-painel .ck-node.evidencia { background: var(--ds-azul) !important; border-color: var(--ds-azul) !important; color: #fff !important; } html[data-cockpit][data-ck2] #ck-painel .ck-node.hipotese { background: var(--ds-fundo) !important; color: var(--ds-ink) !important; border: 1.5px dashed var(--ds-hipotese-forte) !important; } html[data-cockpit][data-ck2] #ck-painel .ck-node.sem { background: var(--ds-fundo) !important; color: var(--ds-ink-3) !important; font-weight: 400; border: 1.5px dashed var(--ds-borda-campo) !important; } html[data-cockpit][data-ck2] #ck-painel .ck-node.off { background: var(--ds-fill-2) !important; border-color: var(--ds-fill-2) !important; border-style: solid !important; color: var(--ds-ink-2) !important; font-weight: 500; } html[data-cockpit][data-ck2] #ck-painel .ck-node.off .lb { color: var(--ds-ink-3) !important; } html[data-cockpit][data-ck2] #ck-painel .ck-node:not(.off) .lb { color: var(--ds-ink) !important; } html[data-cockpit][data-ck2] #ck-painel .ck-node.foco { box-shadow: 0 0 0 2px var(--ds-fundo), 0 0 0 4px var(--ds-perigo) !important; } html[data-cockpit][data-ck2] #ck-painel .ck-node.hipotese:hover, html[data-cockpit][data-ck2] #ck-painel .ck-node.hipotese.on-card { background: var(--ds-hipotese-claro) !important; border-width: 2.5px !important; } /* arcos das etapas: feita (marinho-300), agora (azul, 4 px), por vir (fill-2); vista diferente da atual: azul-linha 6 px */ html[data-cockpit][data-ck2] #ck-painel .ck-arcs path { stroke: var(--ds-fill-2) !important; stroke-width: 3 !important; } html[data-cockpit][data-ck2] #ck-painel .ck-arcs path.done { stroke: var(--ds-marinho-300) !important; } html[data-cockpit][data-ck2] #ck-painel .ck-arcs path.cur { stroke: var(--ds-azul) !important; stroke-width: 4 !important; } html[data-cockpit][data-ck2] #ck-painel .ck-arcs path.view:not(.cur) { stroke: var(--ds-azul-linha) !important; stroke-width: 6 !important; } /* legenda só com o desenho do nó (.ac-leg) */ html[data-cockpit][data-ck2] #ck-painel .ck-legenda.ac-leg { display: flex !important; flex-direction: row !important; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 16px; margin-top: 8px; font-size: 12px; line-height: 17px; color: var(--ds-ink-2); } html[data-cockpit][data-ck2] #ck-painel .ac-leg > span { display: inline-flex; align-items: center; gap: 6px; } html[data-cockpit][data-ck2] #ck-painel .ac-leg svg { flex: none; } html[data-cockpit][data-ck2] #ck-painel .ac-leg .lg-ev { fill: var(--ds-azul); } html[data-cockpit][data-ck2] #ck-painel .ac-leg .lg-hip { fill: var(--ds-fundo); stroke: var(--ds-hipotese-forte); stroke-width: 1.5; stroke-dasharray: 3 2; } html[data-cockpit][data-ck2] #ck-painel .ac-leg .lg-nada { fill: var(--ds-fundo); stroke: var(--ds-borda-campo); stroke-width: 1.5; stroke-dasharray: 2.5 2.5; } html[data-cockpit][data-ck2] #ck-painel .ac-leg .lg-fora { fill: var(--ds-fill-2); } html[data-cockpit][data-ck2] #ck-painel .ac-leg .lg-fraco { stroke: var(--ds-perigo); stroke-width: 2; stroke-linecap: round; } /* ordem: bússola → etapas → o que mais pede trabalho; a 720: bússola | lista, etapas embaixo (.ac-ring-grid) */ html[data-cockpit][data-ck2] #ck-painel .ck-orbwrap.ac-ring-grid { display: flex !important; flex-direction: column; align-items: stretch !important; gap: 12px; } html[data-cockpit][data-ck2] #ck-painel .ac-ring-grid > * { width: 100%; min-width: 0; } html[data-cockpit][data-ck2] #ck-painel .ac-etapas-box { border: 0 !important; background: none !important; padding: 0 !important; box-shadow: none !important; } html[data-cockpit][data-ck2] #ck-painel .ac-ring-grid > .a { order: 1; } html[data-cockpit][data-ck2] #ck-painel .ac-ring-grid > .c { order: 2; } html[data-cockpit][data-ck2] #ck-painel .ac-ring-grid > .b { order: 3; } /* o card abre logo abaixo do que foi clicado: da bússola (.a) ou das etapas (.c) */ html[data-cockpit][data-ck2] #ck-painel .ac-ring-grid > .a + .ck-card { order: 1; } html[data-cockpit][data-ck2] #ck-painel .ac-ring-grid > .c + .ck-card { order: 2; } html[data-cockpit][data-ck2] #ck-painel .ac-ring-grid > .ck-card { grid-column: 1 / -1; min-width: 0; } @container ck (min-width: 760px) { html[data-cockpit][data-ck2] #ck-painel .ck-orbwrap.ac-ring-grid { display: grid !important; grid-template-columns: minmax(0, 420px) minmax(0, 1fr) !important; grid-template-areas: "a b" "c c"; column-gap: 24px; align-items: start; } html[data-cockpit][data-ck2] #ck-painel .ac-ring-grid > .a { grid-area: a; } html[data-cockpit][data-ck2] #ck-painel .ac-ring-grid > .b { grid-area: b; } html[data-cockpit][data-ck2] #ck-painel .ac-ring-grid > .c { grid-area: c; } } /* "O que mais pede trabalho" + etapa vista; nota .ds-nota */ html[data-cockpit][data-ck2] #ck-painel .ac-sub-tit { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; } html[data-cockpit][data-ck2] #ck-painel .ck-ring-padrao .ds-nota { flex: none; } /* trilho das etapas (.ac-etapas) */ html[data-cockpit][data-ck2] #ck-painel .ck-stg.ac-etapas { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: stretch; gap: 0 !important; margin-top: 6px; } html[data-cockpit][data-ck2] #ck-painel .ac-etapa { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 6px; padding: 8px 4px 10px; min-height: 76px; border: 0; background: none; border-radius: var(--ds-r-2); cursor: pointer; text-align: center; font: inherit; color: inherit; min-width: 0; } html[data-cockpit][data-ck2] #ck-painel .ac-etapa::before, html[data-cockpit][data-ck2] #ck-painel .ac-etapa::after { content: ""; position: absolute; top: 21px; height: 2px; background: var(--ds-fill-2); } html[data-cockpit][data-ck2] #ck-painel .ac-etapa::before { left: 0; right: calc(50% + 16px); } html[data-cockpit][data-ck2] #ck-painel .ac-etapa::after { left: calc(50% + 16px); right: 0; } html[data-cockpit][data-ck2] #ck-painel .ac-etapa:first-child::before, html[data-cockpit][data-ck2] #ck-painel .ac-etapa:last-child::after { display: none; } html[data-cockpit][data-ck2] #ck-painel .ac-etapa.feita::before, html[data-cockpit][data-ck2] #ck-painel .ac-etapa.feita::after, html[data-cockpit][data-ck2] #ck-painel .ac-etapa.agora::before { background: var(--ds-marinho-300); } html[data-cockpit][data-ck2] #ck-painel .ac-etapa .pt { position: relative; z-index: 1; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 600; background: var(--ds-fundo); color: var(--ds-ink-2); box-shadow: inset 0 0 0 1.5px var(--ds-borda-campo); font-variant-numeric: var(--ds-num); } html[data-cockpit][data-ck2] #ck-painel .ac-etapa .pt svg { width: 14px; height: 14px; stroke-width: 2.25; } html[data-cockpit][data-ck2] #ck-painel .ac-etapa.feita .pt { background: var(--ds-marinho-200); color: var(--ds-azul); box-shadow: none; } html[data-cockpit][data-ck2] #ck-painel .ac-etapa.agora .pt { background: var(--ds-azul); color: #fff; box-shadow: 0 0 0 5px var(--ds-azul-claro); } html[data-cockpit][data-ck2] #ck-painel .ac-etapa .t { font-size: 13px; line-height: 18px; font-weight: 500; color: var(--ds-ink-2); overflow-wrap: anywhere; } html[data-cockpit][data-ck2] #ck-painel .ac-etapa.agora .t { color: var(--ds-ink); font-weight: 600; } html[data-cockpit][data-ck2] #ck-painel .ac-etapa .aqui { font-size: 12px; line-height: 16px; font-weight: 600; color: var(--ds-azul); margin-top: -4px; } html[data-cockpit][data-ck2] #ck-painel .ac-etapa:hover { background: var(--ds-hover); } html[data-cockpit][data-ck2] #ck-painel .ac-etapa.aberta { background: var(--ds-azul-claro); } html[data-cockpit][data-ck2] #ck-painel .ac-etapa:focus-visible { outline: 2px solid var(--ds-foco); outline-offset: 2px; } html[data-cockpit][data-ck2] #ck-painel .ac-etapa-quando { margin: 8px 0 0; font-size: 12px; color: var(--ds-ink-3); } html[data-cockpit][data-ck2] #ck-painel .ac-etapa-card dl { margin: 12px 0 0; display: grid; grid-template-columns: 92px minmax(0, 1fr); border-top: 1px solid var(--ds-hair); } html[data-cockpit][data-ck2] #ck-painel .ac-etapa-card dl > div { display: contents; } html[data-cockpit][data-ck2] #ck-painel .ac-etapa-card dt { padding: 12px 12px 12px 0; border-bottom: 1px solid var(--ds-hair); font-size: 13px; line-height: 22px; font-weight: 500; color: var(--ds-ink-2); } html[data-cockpit][data-ck2] #ck-painel .ac-etapa-card dd { margin: 0; padding: 12px 0; border-bottom: 1px solid var(--ds-hair); font-size: 15px; line-height: 22px; color: var(--ds-ink); } html[data-cockpit][data-ck2] #ck-painel .ac-etapa-card .prox { margin: 14px 0 0; padding: 12px 14px; border-radius: var(--ds-r-2); background: var(--ds-fill); font-size: 13px; line-height: 19px; color: var(--ds-ink); } html[data-cockpit][data-ck2] #ck-painel .ac-rodape-card { display: flex; justify-content: center; margin-top: 8px; } /* ---------- Fic03 · Próxima rodada (aprovada) ---------- */ html[data-cockpit][data-ck2] #ck-painel .ac-rodada { display: flex; gap: 12px; align-items: flex-start; padding: 4px 0 12px; border-bottom: 1px solid var(--ds-hair); } html[data-cockpit][data-ck2] #ck-painel .ac-rodada .ic { width: 40px; height: 40px; border-radius: 10px; background: var(--ds-fill); color: var(--ds-azul); display: grid; place-items: center; flex: none; } html[data-cockpit][data-ck2] #ck-painel .ac-rodada .ic svg { width: 18px; height: 18px; } html[data-cockpit][data-ck2] #ck-painel .ac-rodada .q { font-size: 17px; line-height: 23px; font-weight: 600; letter-spacing: -.01em; color: var(--ds-ink); } html[data-cockpit][data-ck2] #ck-painel .ac-rodada .o { font-size: 13px; line-height: 19px; color: var(--ds-ink-2); margin-top: 2px; } html[data-cockpit][data-ck2] #ck-painel .ac-rodada-fim .ic { color: var(--ds-novo); } html[data-cockpit][data-ck2] #ck-painel .ac-rodada-acao { margin: 12px 0 4px; } html[data-cockpit][data-ck2] #ck-painel .ac-ultima { display: flex; gap: 12px; align-items: flex-start; width: 100%; box-sizing: border-box; padding: 12px 14px; border: 0; border-radius: var(--ds-r-2); background: var(--ds-fill); text-align: left; cursor: pointer; font-size: 15px; line-height: 22px; color: var(--ds-ink); } html[data-cockpit][data-ck2] #ck-painel .ac-ultima:hover { background: var(--ds-fill-2); } html[data-cockpit][data-ck2] #ck-painel .ac-ultima[aria-expanded="true"] { box-shadow: inset 0 0 0 1.5px var(--ds-azul-linha); } html[data-cockpit][data-ck2] #ck-painel .ac-ultima .ic { color: var(--ds-ink-2); margin-top: 2px; flex: none; display: inline-flex; } html[data-cockpit][data-ck2] #ck-painel .ac-ultima .ic svg { width: 18px; height: 18px; } html[data-cockpit][data-ck2] #ck-painel .ac-ultima .ck-tx { flex: 1; min-width: 0; } html[data-cockpit][data-ck2] #ck-painel .ac-ultima .chev { margin-left: auto; color: var(--ds-ink-3); margin-top: 3px; flex: none; display: inline-flex; } html[data-cockpit][data-ck2] #ck-painel .ac-ultima .chev svg { width: 16px; height: 16px; } html[data-cockpit][data-ck2] #ck-painel .ac-ultima:focus-visible { outline: 2px solid var(--ds-foco); outline-offset: 2px; } html[data-cockpit][data-ck2] #ck-painel .ac-tarefas .ck-it { align-items: flex-start; } html[data-cockpit][data-ck2] #ck-painel .ac-check { width: 20px; height: 20px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--ds-borda-campo); flex: none; margin-top: 1px; display: grid; place-items: center; color: #fff; font-style: normal; } html[data-cockpit][data-ck2] #ck-painel .ac-check.hip { box-shadow: none; outline: 1.5px dashed var(--ds-hipotese-forte); outline-offset: -1.5px; } html[data-cockpit][data-ck2] #ck-painel .ac-check.on { background: var(--ds-azul); box-shadow: none; outline: 0; } html[data-cockpit][data-ck2] #ck-painel .ac-check svg { width: 13px; height: 13px; stroke-width: 2.5; } html[data-cockpit][data-ck2] #ck-painel .ac-tarefa .ck-tx { font-size: 15px; line-height: 22px; } html[data-cockpit][data-ck2] #ck-painel .ac-tarefa .ck-tx small { font-size: 13px; color: var(--ds-ink-2); } /* ---------- Fic04 · Poder e plano B ---------- */ html[data-cockpit][data-ck2] #ck-painel .ck-poder.ac-lados-poder { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; align-items: stretch; } html[data-cockpit][data-ck2] #ck-painel .ac-lado-col { display: flex !important; flex-direction: column; min-width: 0; background: var(--ds-fill) !important; border: 0 !important; border-radius: var(--ds-r-2); overflow: hidden; padding: 0 !important; box-shadow: none !important; } html[data-cockpit][data-ck2] #ck-painel .ac-planob { display: block; padding: 14px; background: transparent; border-radius: 0; cursor: pointer; text-align: left; } html[data-cockpit][data-ck2] #ck-painel .ac-planob:hover { background: var(--ds-fill-2); } html[data-cockpit][data-ck2] #ck-painel .ac-planob[aria-expanded="true"] { background: var(--ds-azul-claro); box-shadow: inset 0 0 0 1.5px var(--ds-azul-linha); border-radius: var(--ds-r-2) var(--ds-r-2) 0 0; } html[data-cockpit][data-ck2] #ck-painel .ac-planob:focus-visible { outline: 2px solid var(--ds-foco); outline-offset: -2px; } html[data-cockpit][data-ck2] #ck-painel .ac-planob .q { display: flex; align-items: center; gap: 6px; font-size: 12px; line-height: 17px; color: var(--ds-ink-3); } html[data-cockpit][data-ck2] #ck-painel .ac-planob .q svg { width: 13px; height: 13px; } html[data-cockpit][data-ck2] #ck-painel .ac-planob .tit { margin-top: 2px; font-size: 15px; line-height: 22px; font-weight: 600; color: var(--ds-ink); } html[data-cockpit][data-ck2] #ck-painel .ac-planob .estado { display: inline-flex; align-items: center; gap: 6px; margin-top: 2px; font-size: 13px; line-height: 19px; color: var(--ds-ink-2); } html[data-cockpit][data-ck2] #ck-painel .ac-planob .ac-indef { color: var(--ds-perigo); font-weight: 500; } html[data-cockpit][data-ck2] #ck-painel .ac-hipo-tx { color: var(--ds-hipotese); text-decoration: underline dashed var(--ds-hipotese-linha); text-underline-offset: 3px; } html[data-cockpit][data-ck2] #ck-painel .ac-forca { display: inline-flex; gap: 3px; align-items: center; } html[data-cockpit][data-ck2] #ck-painel .ac-forca i { width: 14px; height: 6px; border-radius: 3px; background: var(--ds-fill-2); box-shadow: inset 0 0 0 1px var(--ds-hair-2); } html[data-cockpit][data-ck2] #ck-painel .ac-forca i.on { background: var(--ds-ink-2); box-shadow: none; } html[data-cockpit][data-ck2] #ck-painel .ac-forca.hip i.on { background: var(--ds-hipotese-claro); box-shadow: none; outline: 1.5px dashed var(--ds-hipotese-forte); outline-offset: -1.5px; } html[data-cockpit][data-ck2] #ck-painel .ac-forcas { flex: 1; margin: 0 14px; padding: 10px 0 8px; border-top: 1px solid var(--ds-hair-2); display: flex; flex-direction: column; min-width: 0; } html[data-cockpit][data-ck2] #ck-painel .ac-forcas-rot { display: flex; align-items: baseline; gap: 6px; margin: 0 0 2px; font-size: 12px; line-height: 17px; font-weight: 600; color: var(--ds-ink-2); } html[data-cockpit][data-ck2] #ck-painel .ac-forcas-rot .ds-meta { font-weight: 400; } html[data-cockpit][data-ck2] #ck-painel .ac-forca-it { display: flex; align-items: flex-start; gap: 6px; width: calc(100% + 16px); box-sizing: border-box; min-height: 32px; margin: 0 -8px; padding: 6px 8px; border-radius: var(--ds-r-1); font-size: 13px; line-height: 19px; color: var(--ds-ink); text-align: left; cursor: pointer; } html[data-cockpit][data-ck2] #ck-painel .ac-forca-it.hip .t { color: var(--ds-hipotese); text-decoration: underline dashed var(--ds-hipotese-linha); text-underline-offset: 3px; } html[data-cockpit][data-ck2] #ck-painel .ac-forca-it .t { flex: 1; min-width: 0; overflow-wrap: anywhere; } html[data-cockpit][data-ck2] #ck-painel .ac-forca-it .chev { flex: none; margin-top: 2px; color: var(--ds-ink-3); display: inline-flex; } html[data-cockpit][data-ck2] #ck-painel .ac-forca-it .chev svg { width: 14px; height: 14px; } html[data-cockpit][data-ck2] #ck-painel .ac-forca-it:hover { background: var(--ds-fill-2); } html[data-cockpit][data-ck2] #ck-painel .ac-forca-it[aria-expanded="true"] { background: var(--ds-azul-claro); } html[data-cockpit][data-ck2] #ck-painel .ac-forca-it[aria-expanded="true"] .chev { transform: rotate(90deg); color: var(--ds-azul); } html[data-cockpit][data-ck2] #ck-painel .ac-forca-it:focus-visible { outline: 2px solid var(--ds-foco); outline-offset: 0; } html[data-cockpit][data-ck2] #ck-painel .ac-forcas-nada { margin: 0; font-size: 13px; line-height: 19px; color: var(--ds-ink-3); } html[data-cockpit][data-ck2] #ck-painel .ac-lado-col .ck-card { margin: 4px 0 8px; } /* painel estreito: os dois lados um embaixo do outro (o card no lugar não cabe em meia coluna) */ @container ck (max-width: 400px) { html[data-cockpit][data-ck2] #ck-painel .ck-poder.ac-lados-poder { grid-template-columns: minmax(0, 1fr); } } /* ---------- Fic06 · Stakeholders ---------- */ html[data-cockpit][data-ck2] #ck-painel .ck-stake .ck-av { border-radius: 50%; } html[data-cockpit][data-ck2] #ck-painel .ck-stake .ck-av.e { border-radius: 8px; } html[data-cockpit][data-ck2] #ck-painel .ck-stake .ck-av.org { background: var(--ds-fill) !important; color: var(--ds-ink-2) !important; } html[data-cockpit][data-ck2] #ck-painel .ac-membros { margin-left: 15px; padding-left: 12px; border-left: 1px solid var(--ds-hair-2); } html[data-cockpit][data-ck2] #ck-painel .ac-fora .ck-av { background: var(--ds-fundo) !important; color: var(--ds-ink-2) !important; box-shadow: inset 0 0 0 1px var(--ds-hair-2); } html[data-cockpit][data-ck2] #ck-painel .ac-leve .ck-tx > b { font-weight: 400; } html[data-cockpit][data-ck2] #ck-painel .ac-pil-perfil { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 999px; font-size: 12px; font-weight: 500; vertical-align: 1px; background: var(--ds-hipotese-claro); color: var(--ds-hipotese); box-shadow: inset 0 0 0 1px var(--ds-hipotese-linha); } /* ---------- Fic07 · A validar ---------- */ html[data-cockpit][data-ck2] #ck-painel .ac-hipo .ck-dot { display: none; } html[data-cockpit][data-ck2] #ck-painel .ac-hipo-tx-n { color: var(--ds-ink); font-size: 15px; line-height: 22px; } html[data-cockpit][data-ck2] #ck-painel .ac-hipo .ck-pes { font-size: 13px; color: var(--ds-ink-2); } html[data-cockpit][data-ck2] #ck-painel .ac-cola { margin: 4px 0 8px; padding: 6px 14px; border-radius: var(--ds-r-2); background: var(--ds-fill); } html[data-cockpit][data-ck2] #ck-painel .ac-levar-row + .ac-levar-row { border-top: 1px solid var(--ds-hair); } html[data-cockpit][data-ck2] #ck-painel .ac-levar-it { padding: 10px 0 !important; background: transparent !important; } html[data-cockpit][data-ck2] #ck-painel .ac-levar-it .ck-dot { display: none; } html[data-cockpit][data-ck2] #ck-painel .ac-levar-q { quotes: "“" "”"; font-family: var(--font-serif); font-weight: 600; font-size: 16px; line-height: 23px; color: var(--ds-ink); } html[data-cockpit][data-ck2] #ck-painel .ac-perg-it .ck-dot { display: none; } html[data-cockpit][data-ck2] #ck-painel .ac-perg-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 2px 0 12px; } html[data-cockpit][data-ck2] #ck-painel .ac-campo-falso { flex: 1 1 200px; min-height: 40px; padding: 0 12px; border: 1px solid var(--ds-borda-campo) !important; border-radius: var(--ds-r-1); background: var(--ds-fundo) !important; text-align: left; font-size: 15px; color: var(--ds-ink-3) !important; cursor: text; } html[data-cockpit][data-ck2] #ck-painel .ac-campo-falso:hover { border-color: var(--ds-ink-2) !important; } html[data-cockpit][data-ck2] #ck-painel .ac-campo-falso:focus-visible { outline: 2px solid var(--ds-foco); outline-offset: 2px; } /* ---------- Fic09 · Contexto ---------- */ html[data-cockpit][data-ck2] #ck-painel .ac-ctx-bloco { margin: 0 0 10px; } html[data-cockpit][data-ck2] #ck-painel .ac-ctx-rot { font-size: 12px; line-height: 17px; font-weight: 600; color: var(--ds-ink-2); margin: 0 0 4px; } html[data-cockpit][data-ck2] #ck-painel .ac-ctx-it .ck-dot { display: none; } html[data-cockpit][data-ck2] #ck-painel .ac-ctx-lead .ac-ctx-it .ck-tx { font-family: var(--font-serif); font-weight: 600; font-size: 19px; line-height: 26px; color: var(--ds-ink); } html[data-cockpit][data-ck2] #ck-painel .ac-ctx-obj .ac-ctx-it { padding: 10px 12px !important; border-radius: var(--ds-r-2); box-shadow: inset 0 0 0 1px var(--ds-hair-2); } html[data-cockpit][data-ck2] #ck-painel .ac-ctx-prob .ac-ctx-it { padding: 10px 12px !important; border-radius: var(--ds-r-2); background: var(--ds-fill) !important; } html[data-cockpit][data-ck2] #ck-painel .ac-ctx-fatos { margin-top: 4px; } html[data-cockpit][data-ck2] #ck-painel .ac-priv { margin-top: 12px; padding: 10px 12px; border-radius: var(--ds-r-2); box-shadow: inset 0 0 0 1px var(--ds-hair-2); } html[data-cockpit][data-ck2] #ck-painel .ac-priv-cab { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--ds-ink); margin-bottom: 2px; } html[data-cockpit][data-ck2] #ck-painel .ac-priv-cab svg { width: 14px; height: 14px; color: var(--ds-ink-2); } html[data-cockpit][data-ck2] #ck-painel .ac-priv .ck-priv-m { font-size: 13px; color: var(--ds-ink-3); } /* ---------- Fic05 · Construção do acordo ---------- */ /* marcadores em degradê pela ordem de peso (acréscimo ao DS: troca dos --ds-int-* e novo --ds-int-7) */ html[data-cockpit][data-ck2] #ck-painel { --ds-int-1: #1f3560; --ds-int-2: #34507f; --ds-int-3: #4a689a; --ds-int-4: #1d4851; --ds-int-5: #2b5a63; --ds-int-6: #3a6b75; --ds-int-7: #487a84; } html[data-cockpit][data-ck2] #ck-painel .ds-int.i7 { background: var(--ds-int-7); } /* uma coluna (também a 720); os grupos com .ck-bh no padrão .ds-sub-tit */ html[data-cockpit][data-ck2] #ck-painel .ac-constr > .ck-bh { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 8px; margin: 20px 0 6px; } html[data-cockpit][data-ck2] #ck-painel .ac-constr > .ck-bh:first-child, html[data-cockpit][data-ck2] #ck-painel .ac-constr > .ac-fechado + .ck-bh { margin-top: 0; } html[data-cockpit][data-ck2] #ck-painel .ac-constr > .ck-bh span { font-size: 13px; line-height: 19px; font-weight: 600; color: var(--ds-ink); } html[data-cockpit][data-ck2] #ck-painel .ac-constr > .ck-bh small { font-size: 12px; line-height: 17px; font-weight: 400; color: var(--ds-ink-3); } html[data-cockpit][data-ck2] #ck-painel .ac-ints, html[data-cockpit][data-ck2] #ck-painel .ac-conc { display: grid; gap: 12px; } html[data-cockpit][data-ck2] #ck-painel .ac-constr .ds-lados { display: grid; gap: 4px; } html[data-cockpit][data-ck2] #ck-painel .ac-constr .ds-lado-cab { display: flex; align-items: center; gap: 8px; margin: 4px 0 2px; font-size: 13px; line-height: 19px; font-weight: 600; color: var(--ds-ink); } html[data-cockpit][data-ck2] #ck-painel .ac-constr .ds-lado-cab svg { width: 16px; height: 16px; flex: none; } html[data-cockpit][data-ck2] #ck-painel .ac-nada { margin: 0 0 4px; font-size: 13px; color: var(--ds-ink-3); } /* marcador (forma = lado; contorno dourado se hipótese) */ html[data-cockpit][data-ck2] #ck-painel .ds-int { width: 22px; height: 22px; border-radius: 50%; display: inline-grid; place-items: center; color: #fff; font-size: 12px; font-weight: 600; line-height: 1; flex: none; font-variant-numeric: var(--ds-num); } html[data-cockpit][data-ck2] #ck-painel .ds-int.outra { border-radius: 7px; } html[data-cockpit][data-ck2] #ck-painel .ds-int.hip { box-shadow: 0 0 0 2px var(--ds-fundo), 0 0 0 3.5px var(--ds-hipotese-forte); } /* peso */ html[data-cockpit][data-ck2] #ck-painel .ds-peso { display: inline-grid; grid-template-columns: repeat(3, 4px); gap: 2px; align-items: end; height: 14px; flex: none; } html[data-cockpit][data-ck2] #ck-painel .ds-peso i { background: var(--ds-fill-2); border-radius: 1px; } html[data-cockpit][data-ck2] #ck-painel .ds-peso i:nth-child(1) { height: 6px; } html[data-cockpit][data-ck2] #ck-painel .ds-peso i:nth-child(2) { height: 10px; } html[data-cockpit][data-ck2] #ck-painel .ds-peso i:nth-child(3) { height: 14px; } html[data-cockpit][data-ck2] #ck-painel .ds-peso.p1 i:nth-child(1), html[data-cockpit][data-ck2] #ck-painel .ds-peso.p2 i:nth-child(-n+2), html[data-cockpit][data-ck2] #ck-painel .ds-peso.p3 i { background: var(--ds-ink-2); } /* linhas de interesse e de concessão (.ds-interesse / .ac-conc-row) */ html[data-cockpit][data-ck2] #ck-painel .ds-interesse, html[data-cockpit][data-ck2] #ck-painel .ac-conc-row { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 44px; padding: 8px 8px 8px 4px; border: 0; border-radius: var(--ds-r-2); background: none; text-align: left; color: var(--ds-ink); cursor: pointer; transition: background var(--ds-d-curta), opacity var(--ds-d-curta); } html[data-cockpit][data-ck2] #ck-painel .ds-interesse:hover, html[data-cockpit][data-ck2] #ck-painel .ac-conc-row:hover { background: var(--ds-hover); } html[data-cockpit][data-ck2] #ck-painel .ds-interesse[aria-expanded="true"], html[data-cockpit][data-ck2] #ck-painel .ac-conc-row[aria-expanded="true"], html[data-cockpit][data-ck2] #ck-painel .ds-opcao[aria-expanded="true"] { background: var(--ds-azul-claro); } html[data-cockpit][data-ck2] #ck-painel .ds-interesse .tx, html[data-cockpit][data-ck2] #ck-painel .ac-conc-row .tx { flex: 1; min-width: 0; font-size: 15px; line-height: 21px; } html[data-cockpit][data-ck2] #ck-painel .ds-interesse .sub { display: block; font-size: 12px; line-height: 17px; color: var(--ds-ink-3); } html[data-cockpit][data-ck2] #ck-painel .ds-interesse .sub.falta { color: var(--ds-perigo); } html[data-cockpit][data-ck2] #ck-painel .ac-conc-row .t { display: block; } html[data-cockpit][data-ck2] #ck-painel .ac-conc-row .m { display: block; font-size: 12px; line-height: 17px; color: var(--ds-ink-3); } html[data-cockpit][data-ck2] #ck-painel .ac-conc-row .m b { font-weight: 600; color: var(--ds-ink-2); } html[data-cockpit][data-ck2] #ck-painel .ac-chev { display: inline-flex; flex: none; color: var(--ds-ink-3); transition: transform var(--ds-d-curta); } html[data-cockpit][data-ck2] #ck-painel .ac-chev svg { width: 16px; height: 16px; } html[data-cockpit][data-ck2] #ck-painel [aria-expanded="true"] > .ac-chev { transform: rotate(90deg); color: var(--ds-azul); } html[data-cockpit][data-ck2] #ck-painel .ds-interesse:focus-visible, html[data-cockpit][data-ck2] #ck-painel .ac-conc-row:focus-visible, html[data-cockpit][data-ck2] #ck-painel .ds-opcao:focus-visible { outline: 2px solid var(--ds-foco); outline-offset: 0; } /* balança custa → vale (tracejada se hipótese) */ html[data-cockpit][data-ck2] #ck-painel .ac-bal { display: inline-flex; align-items: flex-end; gap: 4px; flex: none; } html[data-cockpit][data-ck2] #ck-painel .ac-bal .c { display: flex; flex-direction: column; align-items: center; } html[data-cockpit][data-ck2] #ck-painel .ac-bal > svg { width: 14px; height: 14px; color: var(--ds-ink-3); margin-bottom: 1px; } html[data-cockpit][data-ck2] #ck-painel .ac-bal.hip .ds-peso i { background: var(--ds-fill-2); } html[data-cockpit][data-ck2] #ck-painel .ac-bal.hip .ds-peso.p1 i:nth-child(1), html[data-cockpit][data-ck2] #ck-painel .ac-bal.hip .ds-peso.p2 i:nth-child(-n+2), html[data-cockpit][data-ck2] #ck-painel .ac-bal.hip .ds-peso.p3 i { background: var(--ds-hipotese-claro); outline: 1px dashed var(--ds-hipotese-forte); outline-offset: -1px; } /* hipótese no texto */ html[data-cockpit][data-ck2] #ck-painel .ds-hip { color: var(--ds-hipotese); text-decoration: underline dashed var(--ds-hipotese-forte) 1px; text-underline-offset: 3px; } /* herói escuro (.ds-heroi): melhor encaixe e acordo fechado */ html[data-cockpit][data-ck2] #ck-painel .ds-heroi { position: relative; display: block; background: var(--ds-marca-elevado); color: #fff; border-radius: var(--ds-r-3); padding: 20px 20px 18px; overflow: hidden; } html[data-cockpit][data-ck2] #ck-painel .ds-heroi .anel { position: absolute; right: -40px; top: -40px; width: 160px; height: 160px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(201,160,64,.22), 0 0 0 22px rgba(255,255,255,.025); pointer-events: none; } html[data-cockpit][data-ck2] #ck-painel .ds-heroi .sobre { position: relative; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12px; line-height: 17px; color: var(--ds-marca-texto-2); } html[data-cockpit][data-ck2] #ck-painel .ds-heroi .ds-pil { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 999px; font-size: 12px; line-height: 16px; font-weight: 500; white-space: nowrap; } html[data-cockpit][data-ck2] #ck-painel .ds-heroi .ds-pil.estado { background: rgba(255,255,255,.1); color: #fff; } html[data-cockpit][data-ck2] #ck-painel .ds-heroi .ds-pil.hip { background: transparent; color: var(--ds-ouro-claro); box-shadow: inset 0 0 0 1px rgba(201,160,64,.6); } html[data-cockpit][data-ck2] #ck-painel .ds-heroi h3 { position: relative; margin: 10px 0 0; font-family: var(--font-serif); font-weight: 600; font-size: 21px; line-height: 27px; letter-spacing: -.005em; color: #fff; } html[data-cockpit][data-ck2] #ck-painel .ds-heroi .ac-troca { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 12px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--ds-marca-linha); } html[data-cockpit][data-ck2] #ck-painel .ds-heroi .l { font-size: 12px; line-height: 16px; color: var(--ds-marca-texto-2); margin-bottom: 6px; } html[data-cockpit][data-ck2] #ck-painel .ds-heroi .ac-troca .l { margin-bottom: 4px; } html[data-cockpit][data-ck2] #ck-painel .ds-heroi .ac-troca .v { font-size: 15px; line-height: 21px; color: #fff; overflow-wrap: anywhere; } html[data-cockpit][data-ck2] #ck-painel .ds-heroi .ac-troca .sw { align-self: center; display: inline-flex; color: var(--ds-ouro-claro); } html[data-cockpit][data-ck2] #ck-painel .ds-heroi .ac-troca .sw svg { width: 18px; height: 18px; } html[data-cockpit][data-ck2] #ck-painel .ds-heroi .encaixe { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--ds-marca-linha); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; } html[data-cockpit][data-ck2] #ck-painel .ds-heroi .ac-resolve { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; line-height: 19px; color: #fff; } html[data-cockpit][data-ck2] #ck-painel .ds-heroi .ac-resolve + .ac-resolve { margin-top: 6px; } html[data-cockpit][data-ck2] #ck-painel .ds-heroi .ac-resolve.nada { color: var(--ds-marca-texto-2); } html[data-cockpit][data-ck2] #ck-painel .ds-heroi .ds-int { box-shadow: 0 0 0 1.5px rgba(255,255,255,.9); } html[data-cockpit][data-ck2] #ck-painel .ds-heroi .ds-int.hip { box-shadow: 0 0 0 1.5px rgba(255,255,255,.9), 0 0 0 3px var(--ds-ouro-claro); } html[data-cockpit][data-ck2] #ck-painel .ds-heroi .ac-dl { margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--ds-marca-linha); display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 8px 16px; font-size: 13px; line-height: 19px; } html[data-cockpit][data-ck2] #ck-painel .ds-heroi .ac-dl dt { color: var(--ds-marca-texto-2); font-weight: 400; } html[data-cockpit][data-ck2] #ck-painel .ds-heroi .ac-dl dd { margin: 0; color: #fff; overflow-wrap: anywhere; } html[data-cockpit][data-ck2] #ck-painel .ds-heroi .acoes { position: relative; display: flex; gap: 8px; margin-top: 16px; flex-wrap: wrap; } html[data-cockpit][data-ck2] #ck-painel .ds-heroi .ck-b-band { background: transparent !important; color: #fff !important; border-color: rgba(255,255,255,.3) !important; border-radius: var(--ds-r-1); } html[data-cockpit][data-ck2] #ck-painel .ds-heroi .ck-b-band:hover { background: rgba(255,255,255,.08) !important; } html[data-cockpit][data-ck2] #ck-painel .ds-heroi .ck-b:focus-visible { outline-color: var(--ds-ouro); } html[data-cockpit][data-ck2] #ck-painel .ds-heroi .ck-fontes { position: relative; margin-top: 12px; } html[data-cockpit][data-ck2] #ck-painel .ds-heroi .por { position: relative; margin: 12px 0 0; font-size: 13px; line-height: 19px; color: var(--ds-marca-texto-2); } html[data-cockpit][data-ck2] #ck-painel .ac-fechado { margin-bottom: 20px; } html[data-cockpit][data-ck2] #ck-painel .ac-fechado-l { position: relative; margin: 14px 0 0; padding: 14px 0 0; border-top: 1px solid var(--ds-marca-linha); list-style: none; display: grid; gap: 8px; font-size: 15px; line-height: 21px; } html[data-cockpit][data-ck2] #ck-painel .ac-fechado-l small { display: block; font-size: 12px; line-height: 17px; color: var(--ds-marca-texto-2); } html[data-cockpit][data-ck2] #ck-painel .ac-heroi.ck-liga { background: var(--ds-marca-elevado) !important; box-shadow: 0 0 0 3px var(--ds-azul-linha); } /* outras opções (.ds-opcao) */ html[data-cockpit][data-ck2] #ck-painel .ac-ops { display: block; } html[data-cockpit][data-ck2] #ck-painel .ds-opcao { display: flex; gap: 12px; align-items: flex-start; width: 100%; padding: 12px 4px; border: 0; border-bottom: 1px solid var(--ds-hair); border-radius: 0; background: none; text-align: left; color: var(--ds-ink); cursor: pointer; transition: background var(--ds-d-curta), opacity var(--ds-d-curta); padding-left: 8px; padding-right: 8px; } html[data-cockpit][data-ck2] #ck-painel .ds-opcao:hover { background: var(--ds-hover); } html[data-cockpit][data-ck2] #ck-painel .ds-opcao .tx { flex: 1; min-width: 0; font-size: 15px; line-height: 21px; } html[data-cockpit][data-ck2] #ck-painel .ds-opcao .ints { display: flex; gap: 4px; margin-top: 6px; flex-wrap: wrap; align-items: center; } html[data-cockpit][data-ck2] #ck-painel .ds-opcao .ints .ds-int { width: 20px; height: 20px; } html[data-cockpit][data-ck2] #ck-painel .ds-opcao .ints .ds-meta { margin-left: 4px; font-size: 12px; color: var(--ds-ink-3); } html[data-cockpit][data-ck2] #ck-painel .ds-opcao > .ac-chev { margin-top: 3px; } html[data-cockpit][data-ck2] #ck-painel .ds-opcao .ds-pil.agora { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: 999px; font-size: 12px; font-weight: 600; background: var(--ds-azul-claro); color: var(--ds-azul); vertical-align: 1px; } html[data-cockpit][data-ck2] #ck-painel .ac-sep { width: 1px; height: 14px; background: var(--ds-hair-2); margin: 0 4px; } html[data-cockpit][data-ck2] #ck-painel .ds-ver-todas { display: inline-flex; align-items: center; gap: 4px; min-height: 32px; padding: 0 4px; font-size: 13px; font-weight: 500; color: var(--ds-azul-texto); } html[data-cockpit][data-ck2] #ck-painel .ds-ver-todas svg { width: 15px; height: 15px; } html[data-cockpit][data-ck2] #ck-painel .ac-constr > .ck-acts { flex-direction: column; align-items: flex-start; gap: 14px; margin-top: 8px; } html[data-cockpit][data-ck2] #ck-painel .ac-vazio-sec { margin: 0; font-size: 15px; line-height: 22px; color: var(--ds-ink-2); } /* hover numa opção: acende o que ela resolve, o resto recua */ html[data-cockpit][data-ck2] #ck-painel .ac-realce .ds-interesse:not(.ck-liga):not([aria-expanded="true"]), html[data-cockpit][data-ck2] #ck-painel .ac-realce .ds-opcao:not(.ck-liga):not(:hover):not([aria-expanded="true"]) { opacity: .38; } html[data-cockpit][data-ck2] #ck-painel .ds-interesse.ck-liga { background: var(--ds-azul-claro) !important; } html[data-cockpit][data-ck2] #ck-painel .ds-opcao.ck-liga { background: var(--ds-hover) !important; } @container ck (max-width: 400px) { html[data-cockpit][data-ck2] #ck-painel .ds-heroi .encaixe { grid-template-columns: minmax(0, 1fr); } } /* ---------- Fic08 · Avaliação ---------- */ html[data-cockpit][data-ck2] #ck-painel .ac-prop .de { font-size: 12px; line-height: 17px; color: var(--ds-ink-2); } html[data-cockpit][data-ck2] #ck-painel .ac-prop .t { margin-top: 2px; font-family: var(--font-serif); font-size: 21px; line-height: 27px; font-weight: 600; color: var(--ds-ink); } html[data-cockpit][data-ck2] #ck-painel .ac-prop .v { margin: 6px 0 0; font-size: 15px; line-height: 22px; color: var(--ds-ink); } html[data-cockpit][data-ck2] #ck-painel .ac-av-conta { margin: 14px 0 0; font-size: 15px; line-height: 22px; color: var(--ds-ink-2); } html[data-cockpit][data-ck2] #ck-painel .ac-aval > .ck-acts { margin-top: 10px; } html[data-cockpit][data-ck2] #ck-painel .ac-av-sub { display: flex; align-items: baseline; gap: 8px; margin: 20px 0 6px; } html[data-cockpit][data-ck2] #ck-painel .ac-av-sub span { font-size: 13px; line-height: 19px; font-weight: 600; color: var(--ds-ink); } html[data-cockpit][data-ck2] #ck-painel .ac-pior { display: flex; align-items: center; gap: 14px; width: 100%; padding: 12px; border: 0; border-radius: var(--ds-r-2); background: var(--ds-fill); text-align: left; color: var(--ds-ink); cursor: pointer; } html[data-cockpit][data-ck2] #ck-painel .ac-pior:hover { background: var(--ds-fill-2); } html[data-cockpit][data-ck2] #ck-painel .ac-pior[aria-expanded="true"] { background: var(--ds-azul-claro); box-shadow: inset 0 0 0 1.5px var(--ds-azul-linha); } html[data-cockpit][data-ck2] #ck-painel .ds-nota-grande { width: 56px; height: 56px; border-radius: var(--ds-r-2); display: grid; place-items: center; flex: none; background: var(--ds-fundo); box-shadow: inset 0 0 0 1px var(--ds-hair-2); font-family: var(--font-serif); font-weight: 600; font-size: 30px; line-height: 1; color: var(--ds-ink); font-variant-numeric: var(--ds-num); } html[data-cockpit][data-ck2] #ck-painel .ds-nota-grande.est { box-shadow: none; outline: 1.5px dashed var(--ds-hipotese-forte); outline-offset: -1.5px; } html[data-cockpit][data-ck2] #ck-painel .ac-pior .tx, html[data-cockpit][data-ck2] #ck-painel .ac-ind .tx { flex: 1; min-width: 0; } html[data-cockpit][data-ck2] #ck-painel .ac-pior .n { font-size: 17px; line-height: 23px; font-weight: 600; } html[data-cockpit][data-ck2] #ck-painel .ac-pior .niv { margin-left: 8px; font-size: 13px; color: var(--ds-ink-2); } html[data-cockpit][data-ck2] #ck-painel .ac-pior .l { display: block; margin-top: 2px; font-size: 13px; line-height: 19px; color: var(--ds-ink-2); } html[data-cockpit][data-ck2] #ck-painel .ac-inds { display: grid; margin-top: 4px; } html[data-cockpit][data-ck2] #ck-painel .ac-ind { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 52px; padding: 8px 8px; border: 0; border-bottom: 1px solid var(--ds-hair); border-radius: 0; background: none; text-align: left; color: var(--ds-ink); cursor: pointer; } html[data-cockpit][data-ck2] #ck-painel .ac-ind:hover { background: var(--ds-hover); } html[data-cockpit][data-ck2] #ck-painel .ac-ind[aria-expanded="true"] { background: var(--ds-azul-claro); } html[data-cockpit][data-ck2] #ck-painel .ac-ind .n { display: block; font-size: 15px; line-height: 21px; } html[data-cockpit][data-ck2] #ck-painel .ac-ind .l { display: block; font-size: 13px; line-height: 19px; color: var(--ds-ink-2); } html[data-cockpit][data-ck2] #ck-painel .ds-nota { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px 0 8px; border-radius: 999px; background: var(--ds-fundo); box-shadow: inset 0 0 0 1px var(--ds-hair-2); font-size: 12px; line-height: 1; color: var(--ds-ink); white-space: nowrap; flex: none; } html[data-cockpit][data-ck2] #ck-painel .ds-nota b { font-weight: 600; font-size: 13px; } html[data-cockpit][data-ck2] #ck-painel .ds-nota .niv { color: var(--ds-ink-2); } html[data-cockpit][data-ck2] #ck-painel .ds-nota.est { box-shadow: none; outline: 1px dashed var(--ds-hipotese-forte); outline-offset: -1px; } html[data-cockpit][data-ck2] #ck-painel .ds-nota.nada { box-shadow: none; outline: 1px dashed var(--ds-borda-campo); outline-offset: -1px; color: var(--ds-ink-3); } html[data-cockpit][data-ck2] #ck-painel .ac-mais { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; margin: 8px 0 0 -8px; padding: 0 8px; border-radius: 999px; font-size: 13px; font-weight: 500; color: var(--ds-ink-2); } html[data-cockpit][data-ck2] #ck-painel .ac-mais:hover { background: var(--ds-hover); color: var(--ds-ink); } html[data-cockpit][data-ck2] #ck-painel .ac-mais svg { width: 16px; height: 16px; } html[data-cockpit][data-ck2] #ck-painel .ac-rel-wrap { margin-top: 20px; padding-top: 12px; border-top: 1px solid var(--ds-hair); } html[data-cockpit][data-ck2] #ck-painel .ac-vazio-sec + .ac-rel-wrap { margin-top: 16px; } html[data-cockpit][data-ck2] #ck-painel .ac-rel { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; padding: 8px 4px; border: 0; border-radius: var(--ds-r-2); background: none; text-align: left; color: var(--ds-ink); cursor: pointer; } html[data-cockpit][data-ck2] #ck-painel .ac-rel:hover { background: var(--ds-hover); } html[data-cockpit][data-ck2] #ck-painel .ac-rel .ic { width: 40px; height: 40px; border-radius: 10px; background: var(--ds-fill); color: var(--ds-azul); display: grid; place-items: center; flex: none; } html[data-cockpit][data-ck2] #ck-painel .ac-rel .ic svg { width: 18px; height: 18px; } html[data-cockpit][data-ck2] #ck-painel .ac-rel .tx { flex: 1; min-width: 0; } html[data-cockpit][data-ck2] #ck-painel .ac-rel .n { display: block; font-size: 15px; line-height: 21px; font-weight: 600; } html[data-cockpit][data-ck2] #ck-painel .ac-rel .l { display: block; font-size: 13px; line-height: 19px; color: var(--ds-ink-2); } html[data-cockpit][data-ck2] #ck-painel .ac-rel .seta { display: inline-flex; color: var(--ds-ink-3); flex: none; } html[data-cockpit][data-ck2] #ck-painel .ac-rel .seta svg { width: 16px; height: 16px; } html[data-cockpit][data-ck2] #ck-painel .ac-rel:focus-visible, html[data-cockpit][data-ck2] #ck-painel .ac-ind:focus-visible, html[data-cockpit][data-ck2] #ck-painel .ac-pior:focus-visible { outline: 2px solid var(--ds-foco); outline-offset: 0; } /* card do indicador: a pergunta leiga, a régua de 5 níveis, o texto do nível */ html[data-cockpit][data-ck2] #ck-painel .ac-perg-ind { margin: 0; padding-right: 32px; font-size: 15px; line-height: 22px; color: var(--ds-ink); } html[data-cockpit][data-ck2] #ck-painel .ds-regua { margin-top: 14px; } html[data-cockpit][data-ck2] #ck-painel .ds-regua .seg { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; } html[data-cockpit][data-ck2] #ck-painel .ds-regua .seg i { height: 6px; border-radius: 3px; background: var(--ds-fill-2); } html[data-cockpit][data-ck2] #ck-painel .ds-regua .seg i.at { background: var(--ds-azul); } html[data-cockpit][data-ck2] #ck-painel .ds-regua .seg i.at.est { background: repeating-linear-gradient(90deg, var(--ds-azul) 0 6px, transparent 6px 9px); } html[data-cockpit][data-ck2] #ck-painel .ds-regua .nomes { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); overflow-wrap: anywhere; gap: 8px; margin-top: 6px; font-size: 12px; line-height: 16px; color: var(--ds-ink-3); text-align: center; } html[data-cockpit][data-ck2] #ck-painel .ds-regua .nomes span.at { color: var(--ds-ink); font-weight: 600; } html[data-cockpit][data-ck2] #ck-painel .ac-nivel-tx { margin: 12px 0 0; font-size: 15px; line-height: 22px; color: var(--ds-ink); } html[data-cockpit][data-ck2] #ck-painel .ac-sabe { margin: 8px 0 0; font-size: 13px; line-height: 19px; color: var(--ds-ink-2); } html[data-cockpit][data-ck2] #ck-painel .ac-sabe b { font-weight: 600; color: var(--ds-ink); } /* ---------- Fic10 · Critérios e referências ---------- */ html[data-cockpit][data-ck2] #ck-painel .ac-crits { display: grid; } html[data-cockpit][data-ck2] #ck-painel .ac-crit { display: flex; align-items: flex-start; gap: 12px; width: 100%; min-height: 56px; padding: 10px 8px; border: 0; border-bottom: 1px solid var(--ds-hair); border-radius: 0; background: none; text-align: left; color: var(--ds-ink); cursor: pointer; } html[data-cockpit][data-ck2] #ck-painel .ac-crit:hover { background: var(--ds-hover); } html[data-cockpit][data-ck2] #ck-painel .ac-crit[aria-expanded="true"] { background: var(--ds-azul-claro); } html[data-cockpit][data-ck2] #ck-painel .ac-crit:focus-visible { outline: 2px solid var(--ds-foco); outline-offset: 0; } html[data-cockpit][data-ck2] #ck-painel .ac-crit .tx { flex: 1; min-width: 0; } html[data-cockpit][data-ck2] #ck-painel .ac-crit .t { display: block; font-size: 15px; line-height: 22px; } html[data-cockpit][data-ck2] #ck-painel .ac-crit.falta .t { color: var(--ds-ink-2); } html[data-cockpit][data-ck2] #ck-painel .ac-crit .f { display: flex; margin-top: 6px; } html[data-cockpit][data-ck2] #ck-painel .ac-crit > .ac-chev { margin-top: 3px; } /* (26/10, P2) o valor do critério ("4,6%") à direita da linha, no padrão .ds-nota (tracejado se hipótese) */ html[data-cockpit][data-ck2] #ck-painel .ac-crit-valor { flex: none; margin-top: -2px; font-weight: 600; color: var(--ds-ink); } html[data-cockpit][data-ck2] #ck-painel .ac-crit-valor.est { box-shadow: none; outline: 1.5px dashed var(--ds-hipotese-forte); outline-offset: -1.5px; } html[data-cockpit][data-ck2] #ck-painel .ds-fonte { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; line-height: 16px; color: var(--ds-ink-2); padding: 2px 8px 2px 4px; border-radius: var(--ds-r-pilula); background: var(--ds-fill); } html[data-cockpit][data-ck2] #ck-painel .ds-fonte .fav, html[data-cockpit][data-ck2] #ck-painel .ac-fonte-bloco .fav { position: relative; width: 16px; height: 16px; border-radius: 4px; display: grid; place-items: center; font-size: 12px; font-weight: 700; color: #fff; background: var(--ds-ink-2); flex: none; overflow: hidden; } html[data-cockpit][data-ck2] #ck-painel .ds-fonte .fav b, html[data-cockpit][data-ck2] #ck-painel .ac-fonte-bloco .fav b { font-weight: 700; } html[data-cockpit][data-ck2] #ck-painel .ds-fonte .fav img, html[data-cockpit][data-ck2] #ck-painel .ac-fonte-bloco .fav img { position: absolute; inset: 0; width: 100%; height: 100%; background: #fff; } html[data-cockpit][data-ck2] #ck-painel .ds-pil.falta { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 999px; font-size: 12px; font-weight: 500; background: var(--ds-perigo-claro); color: var(--ds-perigo); } html[data-cockpit][data-ck2] #ck-painel .ac-fonte-bloco { display: flex; gap: 10px; align-items: flex-start; padding-right: 36px; font-size: 15px; line-height: 22px; } html[data-cockpit][data-ck2] #ck-painel .ac-fonte-bloco .fav { width: 24px; height: 24px; border-radius: 6px; margin-top: 1px; } html[data-cockpit][data-ck2] #ck-painel .ac-fonte-bloco b { display: block; font-weight: 600; } html[data-cockpit][data-ck2] #ck-painel .ac-fonte-bloco .d { display: block; font-size: 13px; line-height: 19px; color: var(--ds-ink-2); } html[data-cockpit][data-ck2] #ck-painel .ac-fonte-bloco a { color: var(--ds-azul-texto); } /* item cuja fonte (documento) está fora do contexto: texto e marcador esmaecidos, como nas linhas antigas */ html[data-cockpit][data-ck2] #ck-painel :is(.ds-interesse, .ac-conc-row, .ds-opcao, .ac-crit, .ac-ind):has(.ck-fdesl) .tx { color: var(--ds-ink-3); } html[data-cockpit][data-ck2] #ck-painel :is(.ds-interesse, .ac-conc-row, .ds-opcao):has(.ck-fdesl) > .ds-int { opacity: .4; } html[data-cockpit][data-ck2] #ck-painel .ck-fdesl, html[data-cockpit][data-ck2] #ck-painel .ck-fdoc { font-size: 12px; } html[data-cockpit][data-ck2] #ck-painel :is(.ds-interesse, .ac-conc-row, .ds-opcao, .ac-crit) .ck-fontes { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; } /* ---------- Fic00 · card de detalhe (seta, sem título repetido, origem como linha, Esc fecha) ---------- */ html[data-cockpit][data-ck2] #ck-painel .ac-card-sem-tit { padding-right: 0; } html[data-cockpit][data-ck2] #ck-painel .ac-card-sem-tit > :first-child { margin-top: 0; padding-right: 32px; } html[data-cockpit][data-ck2] #ck-painel .ac-card-sem-tit > .ac-no-item:first-child { padding-right: 0; } html[data-cockpit][data-ck2] #ck-painel .ac-no-item dl { margin: 0 !important; border-top: 0 !important; display: grid; grid-template-columns: minmax(0, 112px) minmax(0, 1fr); } html[data-cockpit][data-ck2] #ck-painel .ac-no-item dl > div { display: contents; } html[data-cockpit][data-ck2] #ck-painel .ac-no-item dt { padding: 10px 12px 10px 0; border-bottom: 1px solid var(--ds-hair); font-size: 13px; line-height: 20px; font-weight: 500; color: var(--ds-ink-2); } html[data-cockpit][data-ck2] #ck-painel .ac-no-item dd { margin: 0; padding: 10px 0; border-bottom: 1px solid var(--ds-hair); font-size: 15px; line-height: 22px; color: var(--ds-ink); min-width: 0; } html[data-cockpit][data-ck2] #ck-painel .ac-no-item dl > div:first-child > dt, html[data-cockpit][data-ck2] #ck-painel .ac-no-item dl > div:first-child > dd { padding-top: 4px; } html[data-cockpit][data-ck2] #ck-painel .ac-no-item dl > div:first-child > dd { padding-right: 32px; } /* (20/10, teste do Rafa) dentro das colunas lado a lado (Poder: Você × A outra parte, ~180 px úteis) o rótulo de 112 px deixava ~30 px para o texto: uma palavra por linha e o resto cortado. Ali o rótulo vai em cima do valor, e palavra longa quebra em vez de sair da coluna. */ html[data-cockpit][data-ck2] #ck-painel .ac-no-item dd { overflow-wrap: anywhere; } html[data-cockpit][data-ck2] #ck-painel .ac-lado-col .ac-no-item dl { grid-template-columns: minmax(0, 1fr); } html[data-cockpit][data-ck2] #ck-painel .ac-lado-col .ac-no-item dl > div > dt { padding: 8px 0 0; border-bottom: 0; } html[data-cockpit][data-ck2] #ck-painel .ac-lado-col .ac-no-item dl > div:first-child > dt { padding: 0 32px 0 0; } html[data-cockpit][data-ck2] #ck-painel .ac-lado-col .ac-no-item dl > div > dd, html[data-cockpit][data-ck2] #ck-painel .ac-lado-col .ac-no-item dl > div:first-child > dd { padding: 2px 0 8px; } html[data-cockpit][data-ck2] #ck-painel .ac-frase { margin: 0 0 10px; font-size: 15px; line-height: 22px; color: var(--ds-ink); } html[data-cockpit][data-ck2] #ck-painel .ac-frase + .ac-no-item dl > div:first-child > dd { padding-right: 0; } html[data-cockpit][data-ck2] #ck-painel .ac-resolve-l { display: flex; align-items: flex-start; gap: 8px; } html[data-cockpit][data-ck2] #ck-painel .ac-resolve-l + .ac-resolve-l { margin-top: 6px; } html[data-cockpit][data-ck2] #ck-painel .ac-resolve-l .ds-int { width: 20px; height: 20px; margin-top: 1px; } html[data-cockpit][data-ck2] #ck-painel .ac-resolve-l.nada { color: var(--ds-ink-3); } html[data-cockpit][data-ck2] #ck-painel .ac-lacuna { margin: 0; padding-right: 32px; font-size: 15px; line-height: 22px; color: var(--ds-ink); } html[data-cockpit][data-ck2] #ck-painel .ac-lacuna b { font-weight: 600; } html[data-cockpit][data-ck2] #ck-painel .ac-liga { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 14px; font-size: 13px; line-height: 19px; color: var(--ds-ink-2); } html[data-cockpit][data-ck2] #ck-painel .ac-chip { min-height: 28px; padding: 0 10px !important; border: 0 !important; border-radius: 999px; background: var(--ds-fundo) !important; box-shadow: inset 0 0 0 1px var(--ds-hair-2); font-size: 13px !important; font-weight: 500; color: var(--ds-ink) !important; } html[data-cockpit][data-ck2] #ck-painel .ac-chip:hover { background: var(--ds-fill) !important; } html[data-cockpit][data-ck2] #ck-painel .ac-origem { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 10px; font-size: 13px; line-height: 19px; color: var(--ds-ink-2); } html[data-cockpit][data-ck2] #ck-painel .ac-card-sem-tit.so-origem > .ac-origem:first-child { margin-top: 0; min-height: 28px; } html[data-cockpit][data-ck2] #ck-painel .ac-origem .ds-pil { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: 999px; font-size: 12px; font-weight: 500; } html[data-cockpit][data-ck2] #ck-painel .ds-pil.hip { background: var(--ds-hipotese-claro); color: var(--ds-hipotese); box-shadow: inset 0 0 0 1px var(--ds-hipotese-linha); } html[data-cockpit][data-ck2] #ck-painel .ac-lupa { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; margin-left: -2px; border-radius: 6px; color: var(--ds-ink-3); } html[data-cockpit][data-ck2] #ck-painel .ac-lupa::before { content: ""; position: absolute; inset: -10px; } html[data-cockpit][data-ck2] #ck-painel .ac-lupa:hover, html[data-cockpit][data-ck2] #ck-painel .ac-lupa[aria-expanded="true"] { background: var(--ds-hover); color: var(--ds-ink); } html[data-cockpit][data-ck2] #ck-painel .ac-lupa svg { width: 15px; height: 15px; } html[data-cockpit][data-ck2] #ck-painel .ac-trecho { display: block; margin: 6px 0 0; padding: 8px 12px; border-left: 2px solid var(--ds-hair-2); font-size: 13px; line-height: 19px; color: var(--ds-ink-2); quotes: "“" "”"; } html[data-cockpit][data-ck2] #ck-painel .ac-trecho[hidden] { display: none; } html[data-cockpit][data-ck2] #ck-painel .ck-acts.ac-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--ds-hair); } html[data-cockpit][data-ck2] #ck-painel .ac-esc { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 12px; line-height: 17px; color: var(--ds-ink-3); } html[data-cockpit][data-ck2] #ck-painel .ds-kbd { display: inline-flex; align-items: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 5px; background: var(--ds-fill); box-shadow: inset 0 0 0 1px var(--ds-hair); font-size: 12px; font-weight: 500; color: var(--ds-ink-2); } @media (max-width: 1023px), (pointer: coarse) { html[data-cockpit][data-ck2] #ck-painel .ac-esc { display: none; } /* alvos de 44 px no toque também nos botões restilizados (as regras acima baixavam para 32) */ html[data-cockpit][data-ck2] #ck-painel .ck-b, html[data-cockpit][data-ck2] #ck-painel .ac-mais, html[data-cockpit][data-ck2] #ck-painel .ds-ver-todas, html[data-cockpit][data-ck2] #ck-painel .ck-dc-lapis, html[data-cockpit][data-ck2] #ck-painel .ac-forca-it { min-height: 44px; } html[data-cockpit][data-ck2] #ck-painel .ck-dc-lapis { min-width: 44px; } html[data-cockpit][data-ck2] #ck-painel .ac-lupa { width: 44px; height: 44px; margin: -10px -10px -10px -12px; } html[data-cockpit][data-ck2] #ck-painel .ac-chip { min-height: 44px; } } @media (max-width: 1023px) { html[data-cockpit][data-ck2] #ck-painel .ac-no-item dl { grid-template-columns: minmax(0, 92px) minmax(0, 1fr); } } /* os três tipos de botão no padrão do DS: skill → chat (.ds-b-skill: balão azul-claro), corrigir/confirmar/não é → bandeja (.ds-b-corr: contorno, raio 8), ferramenta → aba Ferramentas (.ds-b-ferr: texto + ↗). O "pri" da skill não pinta mais de escuro (no desenho toda skill é o mesmo balão claro). */ html[data-cockpit][data-ck2] #ck-painel .ck-b { min-height: 32px; font-size: 13px !important; line-height: 19px; font-weight: 500; } html[data-cockpit][data-ck2] #ck-painel .ck-b-skill, html[data-cockpit][data-ck2] #ck-painel .ck-b-skill.pri { background: var(--ds-azul-claro) !important; color: var(--ds-azul) !important; border-color: transparent !important; border-radius: 16px 16px 16px 5px; padding: 5px 14px 5px 12px; } html[data-cockpit][data-ck2] #ck-painel .ck-b-skill:hover, html[data-cockpit][data-ck2] #ck-painel .ck-b-skill.pri:hover { background: #e2e9f4 !important; } html[data-cockpit][data-ck2] #ck-painel .ck-b-band { background: var(--ds-fundo) !important; color: var(--ds-ink) !important; border: 0 !important; border-radius: var(--ds-r-1); box-shadow: inset 0 0 0 1px var(--ds-hair-2); padding: 5px 12px 5px 10px; } html[data-cockpit][data-ck2] #ck-painel .ck-b-band:hover { background: var(--ds-fill) !important; } html[data-cockpit][data-ck2] #ck-painel .ck-b-band.on { background: var(--ds-azul-claro) !important; color: var(--ds-azul) !important; box-shadow: inset 0 0 0 1px var(--ds-azul-linha); } html[data-cockpit][data-ck2] #ck-painel .ck-b-band.on.nao, html[data-cockpit][data-ck2] #ck-painel .ck-b-band.on[data-ck-band="nao"] { background: var(--ds-perigo-claro) !important; color: var(--ds-perigo) !important; box-shadow: inset 0 0 0 1px rgba(180,35,24,.28); } html[data-cockpit][data-ck2] #ck-painel .ck-b-ferr { color: var(--ds-ink-2) !important; padding: 5px 8px; border-radius: var(--ds-r-1); } html[data-cockpit][data-ck2] #ck-painel .ck-b-ferr > span { text-decoration: underline; text-decoration-color: var(--ds-hair-2); text-underline-offset: 3px; } html[data-cockpit][data-ck2] #ck-painel .ck-b-ferr:hover { background: var(--ds-hover) !important; color: var(--ds-ink) !important; } html[data-cockpit][data-ck2] #ck-painel .ck-b-ferr .ck-b-seta, html[data-cockpit][data-ck2] #ck-painel .ck-b-ferr svg:last-child { color: var(--ds-ink-3); } /* o card de detalhe: raio 16 e sombra do que flutua; a seta aponta para o que foi clicado */ html[data-cockpit][data-ck2] #ck-painel .ck-card.c1 > .ck-cin { border: 0; border-radius: var(--ds-r-3); box-shadow: var(--ds-sombra-flutua); padding: 16px; } html[data-cockpit][data-ck2] #ck-painel .ck-card.c1 > .ck-caret { border: 0; box-shadow: -1px -1px 0 rgba(10,22,40,.08); } html[data-cockpit][data-ck2] #ck-painel .ck-xc { width: 32px; height: 32px; color: var(--ds-ink-2) !important; } /* o "?" do método: o título e os blocos em coluna de rótulo + filetes (sem a pílula "conceito do método") */ html[data-cockpit][data-ck2] #ck-painel .ck-card .ck-dh h4 { font-size: 17px; line-height: 23px; font-weight: 600; letter-spacing: -.01em; color: var(--ds-ink); } html[data-cockpit][data-ck2] #ck-painel .ck-card .ck-cb { display: grid; grid-template-columns: minmax(0, 112px) minmax(0, 1fr); gap: 0 12px; margin: 0; padding: 12px 0; border-bottom: 1px solid var(--ds-hair); } html[data-cockpit][data-ck2] #ck-painel .ck-card .ck-dh + .ck-cb { margin-top: 8px; border-top: 1px solid var(--ds-hair); } html[data-cockpit][data-ck2] #ck-painel .ck-card .ck-cb h5 { margin: 0; font-size: 13px; line-height: 22px; font-weight: 500; color: var(--ds-ink-2); text-transform: none; letter-spacing: 0; } html[data-cockpit][data-ck2] #ck-painel .ck-card .ck-cb p { margin: 0; font-size: 15px; line-height: 22px; color: var(--ds-ink); text-transform: none; } /* card do elemento (Fic02) */ html[data-cockpit][data-ck2] #ck-painel .ac-el-cab { display: flex; gap: 14px; align-items: flex-start; padding-right: 32px; } html[data-cockpit][data-ck2] #ck-painel .ac-el-cab .ds-nota-grande { width: 64px; height: 64px; font-size: 34px; } html[data-cockpit][data-ck2] #ck-painel .ds-nota-grande.nada { color: var(--ds-ink-3); box-shadow: none; outline: 1.5px dashed var(--ds-borda-campo); outline-offset: -1.5px; } html[data-cockpit][data-ck2] #ck-painel .ac-el-cab .t { flex: 1; min-width: 0; } html[data-cockpit][data-ck2] #ck-painel .ac-el-cab h4 { margin: 2px 0 0; font-size: 17px; line-height: 23px; font-weight: 600; letter-spacing: -.01em; color: var(--ds-ink); } html[data-cockpit][data-ck2] #ck-painel .ac-el-cab .s { display: block; margin-top: 2px; font-size: 13px; line-height: 19px; color: var(--ds-ink-2); } html[data-cockpit][data-ck2] #ck-painel .ac-el-cab .s b { font-weight: 600; color: var(--ds-ink); } html[data-cockpit][data-ck2] #ck-painel .ac-por { margin: 14px 0 0; font-size: 15px; line-height: 22px; color: var(--ds-ink); } html[data-cockpit][data-ck2] #ck-painel .ac-por b { font-weight: 600; } html[data-cockpit][data-ck2] #ck-painel .ac-por .niv { color: var(--ds-ink-2); } html[data-cockpit][data-ck2] #ck-painel .ac-sabemos { margin-top: 12px; padding: 10px 12px; border-radius: var(--ds-r-2); box-shadow: inset 0 0 0 1px var(--ds-hair); } html[data-cockpit][data-ck2] #ck-painel .ac-sabemos.parcial { box-shadow: none; outline: 1px dashed var(--ds-hipotese-linha); outline-offset: -1px; } html[data-cockpit][data-ck2] #ck-painel .ac-sabemos .ac-origem { margin: 0; display: block; } html[data-cockpit][data-ck2] #ck-painel .ac-sabemos .ac-origem b { font-weight: 600; color: var(--ds-ink); } html[data-cockpit][data-ck2] #ck-painel .ac-sabemos .ac-lupa { vertical-align: middle; margin-left: 2px; } html[data-cockpit][data-ck2] #ck-painel .ac-fazer { display: flex; gap: 10px; margin-top: 14px; padding: 12px 14px; border-radius: var(--ds-r-2); background: var(--ds-fill); font-size: 15px; line-height: 22px; color: var(--ds-ink); } html[data-cockpit][data-ck2] #ck-painel .ac-fazer > svg { width: 18px; height: 18px; flex: none; margin-top: 2px; } html[data-cockpit][data-ck2] #ck-painel .ac-fazer b { display: block; font-size: 13px; line-height: 19px; font-weight: 600; } html[data-cockpit][data-ck2] #ck-painel .ac-fazer span { display: block; } html[data-cockpit][data-ck2] #ck-painel .ac-chip b { font-weight: 600; } /* listas curtas no card: ponto = evidência (azul cheio) · hipótese (dourado tracejado) · falta (cinza vazio) */ html[data-cockpit][data-ck2] #ck-painel .ac-ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; } html[data-cockpit][data-ck2] #ck-painel .ac-ul li { display: flex; gap: 10px; align-items: flex-start; } html[data-cockpit][data-ck2] #ck-painel .ac-ul li > i { width: 8px; height: 8px; border-radius: 50%; flex: none; margin-top: 7px; } html[data-cockpit][data-ck2] #ck-painel .ac-ul li.ev > i { background: var(--ds-azul); } html[data-cockpit][data-ck2] #ck-painel .ac-ul li.hip > i { background: var(--ds-hipotese-claro); outline: 1.5px dashed var(--ds-hipotese-forte); outline-offset: -1.5px; } html[data-cockpit][data-ck2] #ck-painel .ac-ul li.sem > i { box-shadow: inset 0 0 0 1.5px var(--ds-borda-campo); } html[data-cockpit][data-ck2] #ck-painel .ac-ul li small { display: block; margin-top: 2px; font-size: 13px; line-height: 19px; color: var(--ds-ink-2); } /* o perfil de negociador (Fic06): bloco de fundo, não card */ html[data-cockpit][data-ck2] #ck-painel .ac-perfil { margin-top: 16px; padding: 14px 16px; border-radius: var(--ds-r-2); background: var(--ds-fill); font-size: 15px; line-height: 22px; color: var(--ds-ink); } html[data-cockpit][data-ck2] #ck-painel .ac-perfil .k { display: flex; align-items: center; gap: 4px; font-size: 12px; line-height: 17px; font-weight: 600; color: var(--ds-ink-2); } html[data-cockpit][data-ck2] #ck-painel .ac-perfil .tipo { margin-top: 2px; font-family: var(--font-serif); font-size: 21px; line-height: 27px; font-weight: 600; color: var(--ds-ink); } html[data-cockpit][data-ck2] #ck-painel .ac-perfil .tipo.hip { color: var(--ds-hipotese); } html[data-cockpit][data-ck2] #ck-painel .ac-perfil .tipo .tr { font-family: var(--font-sans); font-size: 15px; font-weight: 400; color: var(--ds-ink-2); } html[data-cockpit][data-ck2] #ck-painel .ac-perfil .tipo.vazio { font-family: var(--font-sans); font-size: 15px; line-height: 22px; color: var(--ds-ink-2); } html[data-cockpit][data-ck2] #ck-painel .ac-perfil .comb { font-size: 13px; line-height: 19px; color: var(--ds-ink-2); } html[data-cockpit][data-ck2] #ck-painel .ac-perfil p { margin: 10px 0 0; } html[data-cockpit][data-ck2] #ck-painel .ac-perfil .ac-ul { margin-top: 10px; font-size: 13px; line-height: 19px; } html[data-cockpit][data-ck2] #ck-painel .ac-perfil .ac-ul li > i { margin-top: 6px; } html[data-cockpit][data-ck2] #ck-painel .ac-perfil .ck-acts { margin-top: 14px; } html[data-cockpit][data-ck2] #ck-painel .ac-no-item .ac-ul { padding-top: 1px; font-size: 15px; line-height: 22px; } /* o só seu: o valor + o aviso */ html[data-cockpit][data-ck2] #ck-painel .ac-priv-val { margin: 0; padding-right: 32px; font-size: 17px; line-height: 23px; font-weight: 600; color: var(--ds-ink); } html[data-cockpit][data-ck2] #ck-painel .ac-priv-av { display: flex; gap: 8px; margin: 10px 0 0; padding: 10px 12px; border-radius: var(--ds-r-2); background: var(--ds-fill); font-size: 13px; line-height: 19px; color: var(--ds-ink-2); } html[data-cockpit][data-ck2] #ck-painel .ac-priv-av svg { width: 16px; height: 16px; flex: none; margin-top: 1px; } /* ---------- Fic11 · Enviar ao Ring (bandeja) ---------- */ /* faixa no pé (.ds-bandeja): número em ouro, "N para enviar ao Ring" 15, resumo 12, Descartar em texto, Enviar ao Ring ⌘↵ */ html[data-cockpit][data-ck2] #ck-painel .ckb-faixa { gap: 12px; min-height: 60px; padding: 10px 12px 10px 16px; background: var(--ds-ink); } html[data-cockpit][data-ck2] #ck-painel .ckb-faixa .ckb-n { min-width: 26px; height: 26px; padding: 0 7px; border-radius: 13px; background: var(--ds-ouro); color: var(--ds-ink); font-size: 13px; font-weight: 700; font-variant-numeric: var(--ds-num); } html[data-cockpit][data-ck2] #ck-painel .ckb-faixa .ckb-tx b { font-size: 15px; line-height: 20px; font-weight: 600; } html[data-cockpit][data-ck2] #ck-painel .ckb-faixa .ckb-tx small { font-size: 12px; line-height: 17px; color: var(--ds-marca-texto-2); white-space: normal; overflow: visible; text-overflow: clip; } html[data-cockpit][data-ck2] #ck-painel .ckb-faixa .ckb-bt.gh { color: var(--ds-marca-texto-2) !important; border-color: transparent !important; background: transparent !important; } html[data-cockpit][data-ck2] #ck-painel .ckb-faixa .ckb-bt.gh:hover { background: rgba(255,255,255,.08) !important; color: #fff !important; } html[data-cockpit][data-ck2] #ck-painel .ckb-faixa .ckb-bt.pri { display: inline-flex; align-items: center; gap: 8px; background: #fff !important; border-color: #fff !important; color: var(--ds-ink) !important; } html[data-cockpit][data-ck2] #ck-painel .ckb-faixa .ckb-bt.pri:hover { background: var(--ds-azul-claro) !important; } html[data-cockpit][data-ck2] #ck-painel .ckb-atalho { font-size: 12px; line-height: 16px; font-weight: 500; opacity: .72; font-variant-numeric: var(--ds-num); } /* a revisão (.ds-folha sobre véu): ícone do tipo em quadrado de 28 (confirmar azul, não é vermelho, correção cinza) */ html[data-cockpit][data-ck2] #ck-painel .ckb-folha { border-radius: var(--ds-r-4) var(--ds-r-4) 0 0; box-shadow: var(--ds-sombra-folha); } html[data-cockpit][data-ck2] #ck-painel .ckb-fh h3 { font-size: 17px; line-height: 23px; font-weight: 600; letter-spacing: -.01em; } html[data-cockpit][data-ck2] #ck-painel .ckb-fs { font-size: 13px; line-height: 19px; color: var(--ds-ink-2); } html[data-cockpit][data-ck2] #ck-painel .ckb-g { font-size: 12px; line-height: 17px; font-weight: 600; color: var(--ds-ink-2); margin: 14px 0 2px; } html[data-cockpit][data-ck2] #ck-painel .ckb-fit { border-top: 0; border-bottom: 1px solid var(--ds-hair); } html[data-cockpit][data-ck2] #ck-painel .ckb-fic { width: 28px; height: 28px; border-radius: 8px; background: var(--ds-fill); color: var(--ds-ink-2); } html[data-cockpit][data-ck2] #ck-painel .ckb-fic.confirmar, html[data-cockpit][data-ck2] #ck-painel .ckb-fic.feito { background: var(--ds-azul-claro); color: var(--ds-azul); } html[data-cockpit][data-ck2] #ck-painel .ckb-fic.nao { background: var(--ds-perigo-claro); color: var(--ds-perigo); } html[data-cockpit][data-ck2] #ck-painel .ckb-fic.corrigir, html[data-cockpit][data-ck2] #ck-painel .ckb-fic.responder, html[data-cockpit][data-ck2] #ck-painel .ckb-fic.ajustar, html[data-cockpit][data-ck2] #ck-painel .ckb-fic.pedido, html[data-cockpit][data-ck2] #ck-painel .ckb-fic.naosei, html[data-cockpit][data-ck2] #ck-painel .ckb-fic.plano { background: var(--ds-fill); color: var(--ds-ink-2); } html[data-cockpit][data-ck2] #ck-painel .ckb-fsobre { font-size: 15px; line-height: 21px; color: var(--ds-ink); } html[data-cockpit][data-ck2] #ck-painel .ckb-nota { display: block; margin-top: 4px; font-style: normal; font-size: 13px; line-height: 19px; color: var(--ds-ink-2); } html[data-cockpit][data-ck2] #ck-painel .ckb-fp .ckb-bt.pri { background: var(--ds-azul) !important; border-color: var(--ds-azul) !important; } @media (max-width: 1023px), (pointer: coarse) { html[data-cockpit][data-ck2] #ck-painel .ckb-atalho { display: none; } } /* ---------- Fic12 · Aba Ferramentas ---------- */ /* o Plano de Voo é a ferramenta da sala: bloco ds-fill, ícone azul de 44, nome em serifa, ação embaixo; as outras em linha */ html[data-cockpit][data-ck2] #ck-painel .fe-lista { margin-top: 12px; } html[data-cockpit][data-ck2] #ck-painel .fe-item[data-fe-tipo="plano"] { grid-template-columns: 44px minmax(0, 1fr); grid-template-areas: "ic tx" ". ac"; align-items: start; gap: 2px 14px; margin: 0 0 8px; padding: 16px; border: 0; border-radius: var(--ds-r-3); background: var(--ds-fill); } html[data-cockpit][data-ck2] #ck-painel .fe-item[data-fe-tipo="plano"] .fe-ic { width: 44px; height: 44px; border-radius: 10px; background: var(--ds-azul); color: #fff; } html[data-cockpit][data-ck2] #ck-painel .fe-item[data-fe-tipo="plano"] .fe-ic svg { width: 20px; height: 20px; } html[data-cockpit][data-ck2] #ck-painel .fe-item[data-fe-tipo="plano"] .fe-nome { font-family: var(--font-serif); font-size: 19px; line-height: 25px; font-weight: 600; letter-spacing: -.005em; } html[data-cockpit][data-ck2] #ck-painel .fe-item[data-fe-tipo="plano"] .fe-tx p { font-size: 15px; line-height: 22px; white-space: normal; overflow: visible; } html[data-cockpit][data-ck2] #ck-painel .fe-item[data-fe-tipo="plano"] .fe-ac { justify-content: flex-start; margin-top: 10px !important; } html[data-cockpit][data-ck2] #ck-painel .fe-item:not([data-fe-tipo="plano"]) { grid-template-columns: 40px minmax(0, 1fr) auto; grid-template-areas: "ic tx ac"; align-items: center; gap: 4px 14px; min-height: 64px; padding: 14px 4px; border-top: 0; border-bottom: 1px solid var(--ds-hair); } html[data-cockpit][data-ck2] #ck-painel .fe-item:not([data-fe-tipo="plano"]) .fe-ic { width: 40px; height: 40px; border-radius: 10px; background: var(--ds-fill); color: var(--ds-ink); } html[data-cockpit][data-ck2] #ck-painel .fe-tx h4 { font-size: 15px; line-height: 22px; font-weight: 600; } html[data-cockpit][data-ck2] #ck-painel .fe-tx .fe-sub { font-size: 12px; font-weight: 400; color: var(--ds-ink-2); } html[data-cockpit][data-ck2] #ck-painel .fe-item:not([data-fe-tipo="plano"]) .fe-tx p { font-size: 13px; line-height: 19px; color: var(--ds-ink-2); white-space: normal; overflow: visible; } /* ações: o Plano de Voo com o botão principal escuro; as outras com o botão de contorno */ html[data-cockpit][data-ck2] #ck-painel .fe-ac .ck-btn { min-height: 36px; padding: 0 14px; border-radius: 999px; font-size: 13px !important; font-weight: 600; } html[data-cockpit][data-ck2] #ck-painel .fe-item:not([data-fe-tipo="plano"]) .fe-ac .ck-btn, html[data-cockpit][data-ck2] #ck-painel .fe-item:not([data-fe-tipo="plano"]) .fe-ac .ck-btn.pri { background: var(--ds-fundo) !important; color: var(--ds-ink) !important; border: 0 !important; box-shadow: inset 0 0 0 1px var(--ds-hair-2); } html[data-cockpit][data-ck2] #ck-painel .fe-item:not([data-fe-tipo="plano"]) .fe-ac .ck-btn:hover { background: var(--ds-fill) !important; } html[data-cockpit][data-ck2] #ck-painel .fe-item[data-fe-tipo="plano"] .fe-ac .ck-btn:not(.pri):not(.fe-so-icone) { background: var(--ds-azul) !important; color: #fff !important; border-color: var(--ds-azul) !important; } /* o aviso de pouca informação dentro do bloco (.ds-aviso.inline) */ html[data-cockpit][data-ck2] #ck-painel .fe-item > .ckb-gate { grid-column: 1 / -1; margin: 12px 0 0; border: 0; border-radius: var(--ds-r-2); background: var(--ds-fundo); box-shadow: inset 0 0 0 1px var(--ds-hair-2); } /* a tela do documento: revisado em verde */ html[data-cockpit][data-ck2] #ck-painel .fe-revisao { background: var(--ds-hipotese-claro); font-size: 13px; line-height: 19px; } html[data-cockpit][data-ck2] #ck-painel .fe-revisao.ok { color: var(--ds-novo); background: var(--ds-novo-claro); border-bottom-color: rgba(31,122,77,.2); } html[data-cockpit][data-ck2] #ck-painel .fe-barra i { background: var(--ds-azul); } @media (max-width: 1023px), (pointer: coarse) { html[data-cockpit][data-ck2] #ck-painel .fe-ac .ck-btn { min-height: 44px; } } /* (20/10, teste do Rafa) até 560 px (não só 400): com "Simular agora" + "Tentativas (1)" lado a lado, a descrição ficava com ~150 px, uma palavra por linha */ @container ck (max-width: 560px) { html[data-cockpit][data-ck2] #ck-painel .fe-item:not([data-fe-tipo="plano"]) { grid-template-columns: 40px minmax(0, 1fr); grid-template-areas: "ic tx" ". ac"; align-items: start; } html[data-cockpit][data-ck2] #ck-painel .fe-item:not([data-fe-tipo="plano"]) .fe-ac { justify-content: flex-start; margin-top: 8px !important; } } /* ---------- Fic13 · Aba Documentos ---------- */ /* área de soltar (mantém): tracejada, raio 16, ícone azul; arrastando = "Solte para subir nesta negociação" acesa */ html[data-cockpit][data-ck2] #ck-painel .ck-subir { border: 1.5px dashed var(--ds-borda-campo); border-radius: var(--ds-r-3); background: var(--ds-fundo); padding: 16px; } html[data-cockpit][data-ck2] #ck-painel .ck-subir:hover { background: var(--ds-fill); } html[data-cockpit][data-ck2] #ck-painel .ck-subir-ic { width: 44px; height: 44px; border-radius: 10px; background: var(--ds-azul); color: #fff; } html[data-cockpit][data-ck2] #ck-painel .ck-subir-tx b { font-size: 15px; line-height: 22px; font-weight: 600; } html[data-cockpit][data-ck2] #ck-painel .ck-subir-tx small { font-size: 13px; line-height: 19px; color: var(--ds-ink-2); } html[data-cockpit][data-ck2] #ck-painel.ck-solte .ck-subir { border-color: var(--ds-azul); background: var(--ds-azul-claro); box-shadow: 0 0 0 4px var(--ds-azul-claro); } /* "Nesta negociação · N documentos" sem caixa alta */ html[data-cockpit][data-ck2] #ck-painel .ck-docs > h3.ck-h { display: flex; align-items: baseline; justify-content: space-between; margin: 20px 0 4px; padding: 0; border: 0; } html[data-cockpit][data-ck2] #ck-painel .ck-docs > h3.ck-h .ck-ht { font-size: 13px; line-height: 19px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--ds-ink); } html[data-cockpit][data-ck2] #ck-painel .ck-docs > h3.ck-h .ck-r { font-size: 12px; color: var(--ds-ink-3); } /* cada documento */ html[data-cockpit][data-ck2] #ck-painel .ck-doc { border-bottom: 1px solid var(--ds-hair); } html[data-cockpit][data-ck2] #ck-painel .ck-doc-ic { width: 36px; height: 44px; border-radius: 6px; background: var(--ds-fundo); box-shadow: inset 0 0 0 1px var(--ds-hair-2); color: var(--ds-ink-2); font-size: 12px; font-weight: 700; } html[data-cockpit][data-ck2] #ck-painel .ck-doc-tx b { font-size: 15px; line-height: 22px; font-weight: 600; color: var(--ds-ink); } html[data-cockpit][data-ck2] #ck-painel .ck-doc-tx small { font-size: 12px; line-height: 17px; color: var(--ds-ink-2); } html[data-cockpit][data-ck2] #ck-painel .ck-doc.falhou .ck-doc-tx small { color: var(--ds-perigo); } html[data-cockpit][data-ck2] #ck-painel .ck-doc-pv { font-size: 13px; line-height: 19px; color: var(--ds-ink-2); } /* interruptor "entra no contexto" no azul do DS */ html[data-cockpit][data-ck2] #ck-painel .ck-sw.on { background: var(--ds-azul) !important; } html[data-cockpit][data-ck2] #ck-painel .ck-sw:not(.on) { background: var(--ds-borda-campo) !important; } /* aberto: Excluir em texto vermelho; o que o Ring entendeu em bloco ds-fill; o comentário com ajuda e contador */ html[data-cockpit][data-ck2] #ck-painel .ck-doc-acts .ck-txt-perigo { color: var(--ds-perigo) !important; background: transparent !important; border-color: transparent !important; } html[data-cockpit][data-ck2] #ck-painel .ck-doc-md { margin-left: 48px; padding-left: 0; } html[data-cockpit][data-ck2] #ck-painel .ac-entendeu { margin: 4px 0 0; padding: 12px 14px; border-radius: var(--ds-r-2); background: var(--ds-fill); } html[data-cockpit][data-ck2] #ck-painel .ck-doc-md .ck-g { margin: 0 0 4px; font-size: 12px; line-height: 17px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--ds-ink-2); } html[data-cockpit][data-ck2] #ck-painel .ac-entendeu .ck-md { font-size: 15px; line-height: 22px; color: var(--ds-ink); } html[data-cockpit][data-ck2] #ck-painel .ac-entendeu .ck-md h1, html[data-cockpit][data-ck2] #ck-painel .ac-entendeu .ck-md h2, html[data-cockpit][data-ck2] #ck-painel .ac-entendeu .ck-md h3 { margin: 0 0 2px; font-size: 15px; line-height: 22px; font-weight: 600; } html[data-cockpit][data-ck2] #ck-painel .ac-entendeu .ck-md p { margin: 0; } html[data-cockpit][data-ck2] #ck-painel .ck-doc-md textarea { border: 1px solid var(--ds-borda-campo); border-radius: var(--ds-r-2); font-size: 15px; line-height: 22px; } html[data-cockpit][data-ck2] #ck-painel .ck-doc-md textarea:focus { outline: 2px solid var(--ds-foco); outline-offset: 1px; } /* confirmação da exclusão no lugar */ html[data-cockpit][data-ck2] #ck-painel .ck-doc-conf { padding: 12px 14px; border-radius: var(--ds-r-2); background: var(--ds-perigo-claro); color: var(--ds-ink); font-size: 13px; line-height: 19px; } html[data-cockpit][data-ck2] #ck-painel .ck-doc-conf .ck-perigo { background: var(--ds-perigo) !important; border-color: var(--ds-perigo) !important; color: #fff !important; } @container ck (max-width: 400px) { html[data-cockpit][data-ck2] #ck-painel .ck-doc-md { margin-left: 0; } } /* ---------- Fic14 · Celular: início e miniaturas (só o conteúdo; como a seção abre e o gesto são do contêiner) ---------- */ @media (max-width: 1023px) { /* "Fixados" · "Foco da etapa" · "Também no painel" no padrão .ds-rotulo-sec: 13/600, sem caixa alta */ html[data-cockpit][data-ck2] #ck-painel .ckc-nh h3, html[data-cockpit][data-ck2] #ck-painel .ckc-bt h3 { font-size: 13px; line-height: 19px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--ds-ink); } /* miniatura fixável (.ds-fixado): fundo ds-fill, raio 16, sem contorno */ html[data-cockpit][data-ck2] #ck-painel .ckc-tile { border-radius: var(--ds-r-3); background: var(--ds-fill); box-shadow: none; } html[data-cockpit][data-ck2] #ck-painel .ckc-th b { font-size: 13px; font-weight: 600; color: var(--ds-ink); } html[data-cockpit][data-ck2] #ck-painel .ckc-mn small { color: var(--ds-ink-2); } html[data-cockpit][data-ck2] #ck-painel .ckc-mn small.ckc-k { color: var(--ds-ink-2); font-weight: 400; } /* Construção: o melhor encaixe em serifa (Georgia pela CSP) */ html[data-cockpit][data-ck2] #ck-painel .ckc-tile[data-ckc-push="acordo"] .ckc-t2 { font-family: var(--font-serif); font-size: 15px; line-height: 20px; font-weight: 600; color: var(--ds-ink); } /* Próxima rodada: a data grande */ html[data-cockpit][data-ck2] #ck-painel .ckc-tile[data-ckc-push="rodada"] .ckc-mn > :first-child { font-size: 22px; line-height: 27px; font-weight: 600; letter-spacing: -.01em; } } /* card estreito (≈ 230 px: o card que abre na coluna da lista "O que mais pede trabalho" com o painel a 720): o card do elemento cabe na altura da janela — nota menor ao lado do nome, régua só com o nível atual, textos em 13, sem a dica Esc */ html[data-cockpit][data-ck2] #ck-painel .ck-card { container: ck-card / inline-size; } @container ck-card (max-width: 320px) { html[data-cockpit][data-ck2] #ck-painel .ac-el-cab { gap: 10px; padding-right: 28px; } html[data-cockpit][data-ck2] #ck-painel .ac-el-cab .ds-nota-grande { width: 44px; height: 44px; font-size: 24px; } html[data-cockpit][data-ck2] #ck-painel .ac-el-cab h4 { font-size: 15px; line-height: 21px; margin-top: 0; } html[data-cockpit][data-ck2] #ck-painel .ac-card-el .ds-regua { margin-top: 10px; } html[data-cockpit][data-ck2] #ck-painel .ac-card-el .ds-regua .nomes { grid-template-columns: minmax(0, 1fr); text-align: left; } html[data-cockpit][data-ck2] #ck-painel .ac-card-el .ds-regua .nomes span:not(.at) { display: none; } html[data-cockpit][data-ck2] #ck-painel .ac-card-el .ac-por, html[data-cockpit][data-ck2] #ck-painel .ac-card-el .ac-fazer { font-size: 13px; line-height: 19px; } html[data-cockpit][data-ck2] #ck-painel .ac-card-el .ac-por { margin-top: 10px; } html[data-cockpit][data-ck2] #ck-painel .ac-card-el .ac-fazer { margin-top: 10px; padding: 10px 12px; } html[data-cockpit][data-ck2] #ck-painel .ac-card-el .ac-sabemos { margin-top: 10px; padding: 8px 10px; } html[data-cockpit][data-ck2] #ck-painel .ac-card-el .ac-liga { margin-top: 10px; } html[data-cockpit][data-ck2] #ck-painel .ac-acoes { margin-top: 12px; padding-top: 10px; } html[data-cockpit][data-ck2] #ck-painel .ac-esc { display: none; } } /* celular (e toque): alvos de 44 px (ds-toque) */ @media (max-width: 1023px), (pointer: coarse) { html[data-cockpit][data-ck2] #ck-painel .ck-bl-todos, html[data-cockpit][data-ck2] #ck-painel .ck-bl-mais { min-height: 44px; } html[data-cockpit][data-ck2] #ck-painel .ck-bl-x { width: 44px; height: 44px; margin: 0; } } /* ---------- tour: as dicas com o visual do DS v2 (sem mudar comportamento) ---------- vem de js/tour.js quando NEWGO_FLAGS.painelV2 não é false (?painel=v1 = tour igual à main) */ html[data-ds2] .tour-balao, html[data-ds2] .tour-dica { border: 0; border-radius: var(--ds-r-3); box-shadow: var(--ds-sombra-pop); background: var(--ds-fundo); font-family: var(--font-sans); } html[data-ds2] .tour-passo { font-size: 12px; line-height: 17px; color: var(--ds-ink-3); } html[data-ds2] .tour-tit { font-size: 15px; line-height: 22px; font-weight: 600; letter-spacing: -.005em; color: var(--ds-ink); } html[data-ds2] .tour-txt { font-size: 13px; line-height: 19px; color: var(--ds-ink-2); } html[data-ds2] .tour-pontos i.on { background: var(--ds-azul); } html[data-ds2] .tour-pular, html[data-ds2] .tour-voltar, html[data-ds2] .tour-prox { min-height: 32px; font-size: 13px !important; line-height: 19px; border-radius: var(--ds-r-pilula); } html[data-ds2] .tour-voltar { border: 0; background: var(--ds-fill); color: var(--ds-ink); } html[data-ds2] .tour-voltar:hover { background: var(--ds-fill-2); } html[data-ds2] .tour-prox:hover { background: var(--ds-azul-hover); border-color: var(--ds-azul-hover); } html[data-ds2] .tour-foco { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--ds-foco, #152848), 0 0 0 200vmax var(--ds-veu, rgba(10, 22, 40, .28)); } @media (pointer: coarse) { html[data-ds2] .tour-pular, html[data-ds2] .tour-voltar, html[data-ds2] .tour-prox { min-height: 44px; } } @media (max-width: 1023px) { html[data-cockpit][data-ck2] #ck-painel .ac-etapa .t { font-size: 12px; overflow-wrap: normal; hyphens: auto; } } /* (20/10, varredura da madrugada) o Ring lado a lado só a partir de 760 px: com 640 a coluna "O que mais pede trabalho" ficava com ~150 px e quebrava "Pod/er". A regra de 601 px foi trocada acima. */ /* (20/10) etapas com o painel estreito: "Implementação" não quebra no meio da palavra (a regra do celular, também no painel) */ @container ck (max-width: 460px) { html[data-cockpit][data-ck2] #ck-painel .ac-etapa .t { font-size: 12px; overflow-wrap: normal; hyphens: auto; } /* (20/10) Poder com o painel estreito: Você e A outra parte um embaixo do outro, como no celular */ html[data-cockpit][data-ck2] #ck-painel .ck-poder.ac-lados-poder { grid-template-columns: minmax(0, 1fr); } }