/* css/cockpit-celular.css — o Painel de apoio v2 no CELULAR (Frente C, 08/10/2026).
   Só vale com `html[data-cockpit][data-ck2]` e abaixo de 1024 px; o miolo `.ckc` só existe quando o shell chama
   CockpitCelular.render (tela < 1024 px). Paleta do painel: azul #152848, dourado #a87a06, cinzas;
   verde/vermelho só discretos. Alvos >= 44 px, texto >= 12 px. */
@media (max-width: 1023px) {
  html[data-cockpit][data-ck2] .ckc { --c-azul: var(--ck-azul, #152848); --c-ouro: var(--ck-hip, #a87a06); --c-ink: var(--ck-ink, #0a1628); --c-ink2: var(--ck-ink2, #5b6472); --c-ink3: #7d8591;
    --c-hair: var(--ck-hair, rgba(0,0,0,.08)); --c-bg2: var(--ck-bg2, #f5f5f7); --c-bg3: var(--ck-bg3, #ececef); --c-ease: cubic-bezier(.23,1,.32,1);
    position: relative; color: var(--c-ink); font-size: 15px; line-height: 1.4; padding: 0 0 calc(120px + env(safe-area-inset-bottom)); max-width: 100%; overflow-x: hidden; }
  html[data-cockpit][data-ck2] .ckc *, html[data-cockpit][data-ck2] .ckc *::before { box-sizing: border-box; }
  html[data-cockpit][data-ck2] .ckc :where(button) { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
  html[data-cockpit][data-ck2] .ckc button:focus-visible, html[data-cockpit][data-ck2] .ckc [role="button"]:focus-visible { outline: 2px solid var(--c-azul); outline-offset: 2px; border-radius: 8px; }
  html[data-cockpit][data-ck2] .ckc .ckc-i, html[data-cockpit][data-ck2] .ckc svg.lucide { width: 18px; height: 18px; stroke-width: 1.7; flex: none; display: inline-block; }
  html[data-cockpit][data-ck2] .ckc h3 { margin: 0; }

  /* a alça da bandeja */
  html[data-cockpit][data-ck2] .ckc-alca { display: flex; justify-content: center; align-items: center; height: 22px; margin: 0 -16px; cursor: grab; touch-action: none; }
  html[data-cockpit][data-ck2] .ckc-alca span { width: 36px; height: 5px; border-radius: 3px; background: rgba(0,0,0,.16); }
  html[data-cockpit][data-ck2] .ckc-painel.ckc-arrastando { box-shadow: 0 -8px 30px rgba(10,22,40,.18); }
  html[data-cockpit][data-ck2] .ckc-painel.ckc-arrastando * { user-select: none; -webkit-user-select: none; }

  /* linha do tempo das etapas */
  html[data-cockpit][data-ck2] .ckc-tl { margin: 6px 0 4px; }
  html[data-cockpit][data-ck2] .ckc-tl-l { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
  html[data-cockpit][data-ck2] .ckc-tl-p { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
  html[data-cockpit][data-ck2] .ckc-tl-b { display: block; height: 4px; border-radius: 2px; background: var(--c-bg3); }
  html[data-cockpit][data-ck2] .ckc-tl-p.feita .ckc-tl-b { background: var(--ck-azul-linha, #c9d3e6); }
  html[data-cockpit][data-ck2] .ckc-tl-p.atual .ckc-tl-b { background: var(--c-azul); }
  html[data-cockpit][data-ck2] .ckc-tl-n { font-size: 12px; color: var(--c-ink3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  html[data-cockpit][data-ck2] .ckc-tl-p.feita .ckc-tl-n { color: var(--c-ink2); }
  html[data-cockpit][data-ck2] .ckc-tl-p.atual .ckc-tl-n { color: var(--c-azul); font-weight: 600; }
  html[data-cockpit][data-ck2] .ckc-tl-atual { margin: 0 0 12px; font-size: 20px; line-height: 1.3; font-weight: 400; letter-spacing: -.01em; color: var(--c-ink2); }
  html[data-cockpit][data-ck2] .ckc-tl-atual b { font-weight: 650; color: var(--c-ink); }

  /* Neste turno */
  html[data-cockpit][data-ck2] .ckc-notifs, html[data-cockpit][data-ck2] .ckc-baloes { margin-top: 18px; }
  html[data-cockpit][data-ck2] .ckc-nh { display: flex; align-items: center; min-height: 44px; }
  html[data-cockpit][data-ck2] .ckc-nh h3, html[data-cockpit][data-ck2] .ckc-bt h3 { font-size: 13px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; color: var(--c-ink2); }
  html[data-cockpit][data-ck2] .ckc-lnk { margin-left: auto; min-height: 44px; min-width: 44px; padding: 0 2px 0 8px; color: var(--c-azul); font-size: 15px; font-weight: 500; }
  html[data-cockpit][data-ck2] .ckc-n { background: #fff; border: 1px solid var(--c-hair); border-left: 3px solid var(--c-ouro); border-radius: 14px; margin-bottom: 8px; overflow: hidden; touch-action: pan-y; transition: transform .2s var(--c-ease), opacity .2s; }
  html[data-cockpit][data-ck2] .ckc-n.saindo { transform: translateX(-110%); opacity: 0; }
  html[data-cockpit][data-ck2] .ckc-n-l { display: flex; align-items: stretch; }
  html[data-cockpit][data-ck2] .ckc-n-t { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-height: 56px; padding: 10px 4px 10px 14px; text-align: left; }
  html[data-cockpit][data-ck2] .ckc-n-ti { font-size: 15px; font-weight: 600; line-height: 1.3; }
  html[data-cockpit][data-ck2] .ckc-n-tx { display: block; max-width: 100%; font-size: 13px; color: var(--c-ink2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  html[data-cockpit][data-ck2] .ckc-n-x { width: 44px; min-height: 44px; display: grid; place-items: center; color: var(--c-ink3); flex: none; }
  html[data-cockpit][data-ck2] .ckc-n-mais { padding: 0 14px 12px; font-size: 15px; color: var(--c-ink2); animation: ckc-abre .22s var(--c-ease); }
  html[data-cockpit][data-ck2] .ckc-n-mais p { margin: 0 0 8px; }
  html[data-cockpit][data-ck2] .ckc-n-pq b { color: var(--c-ink); font-weight: 600; }
  html[data-cockpit][data-ck2] .ckc-n-ver { display: inline-flex; align-items: center; gap: 2px; min-height: 44px; padding: 0 14px; border-radius: 999px; background: var(--ck-azul-soft, #eef2f8); color: var(--c-azul); font-weight: 600; }
  @keyframes ckc-abre { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

  /* blocos */
  html[data-cockpit][data-ck2] .ckc-bloco { margin-top: 22px; }
  html[data-cockpit][data-ck2] .ckc-bt { display: flex; align-items: center; min-height: 44px; margin-bottom: 4px; }
  html[data-cockpit][data-ck2] .ckc-vazio, html[data-cockpit][data-ck2] .ckc-dica { font-size: 13px; color: var(--c-ink3); margin: 8px 0 0; }
  html[data-cockpit][data-ck2] .ckc-pe { margin: 28px 0 0; text-align: center; font-size: 12px; color: var(--c-ink3); }

  /* fixados (Fic14): .ds-fixado do DS v2 — fundo fill, raio 16, 12 px por dentro, 128 de altura mínima; título
     13/600 com o ícone de 16 px em ink-2 e a seta à direita; o largo (último, com total ímpar) ocupa a linha */
  html[data-cockpit][data-ck2] .ckc-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  html[data-cockpit][data-ck2] .ckc-tile-w { position: relative; min-width: 0; }
  html[data-cockpit][data-ck2] .ckc-tiles .ckc-tile-w:last-child:nth-child(odd) { grid-column: 1 / -1; }
  html[data-cockpit][data-ck2] .ckc-tile { display: flex; flex-direction: column; gap: 6px; width: 100%; height: 100%; min-height: 128px; padding: 12px; border-radius: var(--ds-r-3, 16px); background: var(--ds-fill, #f5f5f7); text-align: left; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; transition: transform .18s var(--c-ease), box-shadow .2s; }
  html[data-cockpit][data-ck2] .ckc-tile:active { transform: scale(.97); }
  html[data-cockpit][data-ck2] .ckc-tile.largo { min-height: 0; }
  html[data-cockpit][data-ck2] .ckc-th { display: flex; align-items: center; gap: 8px; font-size: 13px; line-height: 18px; min-width: 0; color: var(--c-ink); }
  html[data-cockpit][data-ck2] .ckc-th > .ckc-i:first-child, html[data-cockpit][data-ck2] .ckc-th > svg.lucide:first-child { width: 16px; height: 16px; color: var(--c-ink2); }
  html[data-cockpit][data-ck2] .ckc-th b { flex: 1; min-width: 0; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  html[data-cockpit][data-ck2] .ckc-th > :last-child { width: 16px; height: 16px; color: var(--c-ink3); }
  html[data-cockpit][data-ck2] .ckc-mn { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
  html[data-cockpit][data-ck2] .ckc-big { font-size: 22px; line-height: 26px; font-weight: 600; letter-spacing: -.01em; color: var(--c-ink); font-variant-numeric: tabular-nums lining-nums; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  html[data-cockpit][data-ck2] .ckc-big.serif { font-family: var(--font-serif, Georgia, serif); }
  html[data-cockpit][data-ck2] .ckc-de { font-size: 14px; color: var(--c-ink3); font-weight: 500; }
  html[data-cockpit][data-ck2] .ckc-s { display: block; font-size: 12px; line-height: 17px; color: var(--c-ink2); overflow: hidden; text-overflow: ellipsis; }
  html[data-cockpit][data-ck2] .ckc-t2 { font-size: 15px; font-weight: 600; line-height: 21px; color: var(--c-ink); display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
  html[data-cockpit][data-ck2] .ckc-t2.serif { font-family: var(--font-serif, Georgia, serif); line-height: 20px; }
  html[data-cockpit][data-ck2] .ckc-t2.leve { font-weight: 400; color: var(--c-ink2); }
  html[data-cockpit][data-ck2] .ckc-ints { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; margin-top: 2px; }
  html[data-cockpit][data-ck2] .ckc-ints .ckc-s { margin-left: 4px; }
  html[data-cockpit][data-ck2] .ckc-mn-ring { flex-direction: row; align-items: center; gap: 8px; }
  html[data-cockpit][data-ck2] .ckc-mn-ring > span { display: flex; flex-direction: column; min-width: 0; }
  html[data-cockpit][data-ck2] .ckc-barras { display: flex; align-items: flex-end; gap: 2px; height: 24px; margin: 2px 0; }
  html[data-cockpit][data-ck2] .ckc-barras i { width: 5px; border-radius: 2px; background: var(--c-azul); }
  html[data-cockpit][data-ck2] .ckc-barras i.sem { background: var(--c-bg3); }
  /* editar: calmo (sem tremer), um selo de tirar e um contorno tracejado (.ds-fixado.editando) */
  html[data-cockpit][data-ck2] .ckc-tiles.editando .ckc-tile { outline: 1.5px dashed var(--ds-borda-campo, #8a929e); outline-offset: -1.5px; background: #fff; }
  html[data-cockpit][data-ck2] .ckc-tiles.editando .ckc-th > :last-child { visibility: hidden; }
  html[data-cockpit][data-ck2] .ckc-tile-rm { position: absolute; top: -8px; right: -8px; width: 44px; height: 44px; display: grid; place-items: center; z-index: 2; }
  html[data-cockpit][data-ck2] .ckc-tile-rm span { width: 24px; height: 24px; border-radius: 50%; background: var(--c-ink2); color: #fff; display: grid; place-items: center; box-shadow: 0 0 0 2px #fff; }
  html[data-cockpit][data-ck2] .ckc-tile-rm .ckc-i, html[data-cockpit][data-ck2] .ckc-tile-rm svg.lucide { width: 14px; height: 14px; stroke-width: 2.4; }

  /* mini-Ring */
  html[data-cockpit][data-ck2] .ckc-miniring { flex: none; overflow: visible; }
  html[data-cockpit][data-ck2] .ckc-miniring .mr-anel { fill: none; stroke: var(--c-bg3); stroke-width: 2; }
  html[data-cockpit][data-ck2] .ckc-miniring .mr-poly { fill: rgba(21,40,72,.12); stroke: var(--c-azul); stroke-width: 2; stroke-linejoin: round; }
  html[data-cockpit][data-ck2] .ckc-miniring .mr-no { stroke: #fff; stroke-width: 1.5; }
  html[data-cockpit][data-ck2] .ckc-miniring .mr-no.ev { fill: var(--c-azul); }
  html[data-cockpit][data-ck2] .ckc-miniring .mr-no.hip { fill: var(--ck-azul-linha, #c9d3e6); }
  html[data-cockpit][data-ck2] .ckc-miniring .mr-no.sem { fill: #fff; stroke: var(--c-ink3); stroke-dasharray: 2 1.5; }
  html[data-cockpit][data-ck2] .ckc-miniring .mr-no.fraco { fill: var(--c-ouro); stroke: #fff; stroke-width: 2; }

  /* menu de seções: Foco da etapa + Também no painel (mais fosco, sem desvalorizar) */
  html[data-cockpit][data-ck2] .ckc-grupo { border-radius: 16px; background: var(--c-bg2); overflow: hidden; }
  html[data-cockpit][data-ck2] .ckc-grupo.outros { background: #fafafb; box-shadow: inset 0 0 0 1px var(--c-hair); }
  html[data-cockpit][data-ck2] .ckc-ml { display: flex; align-items: center; border-bottom: 1px solid var(--c-hair); }
  html[data-cockpit][data-ck2] .ckc-ml:last-child { border-bottom: 0; }
  html[data-cockpit][data-ck2] .ckc-ass { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 8px 8px 8px 12px; text-align: left; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
  html[data-cockpit][data-ck2] .ckc-ass:active { background: var(--c-bg3); }
  html[data-cockpit][data-ck2] .ckc-q { width: 36px; height: 36px; border-radius: 10px; background: #fff; display: grid; place-items: center; flex: none; color: var(--c-azul); }
  html[data-cockpit][data-ck2] .ckc-q .ckc-i, html[data-cockpit][data-ck2] .ckc-q svg.lucide { width: 20px; height: 20px; }
  html[data-cockpit][data-ck2] .ckc-tx { flex: 1; min-width: 0; }
  html[data-cockpit][data-ck2] .ckc-tx b { display: flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 600; line-height: 1.3; }
  html[data-cockpit][data-ck2] .ckc-novo { width: 7px; height: 7px; border-radius: 50%; background: var(--c-ouro); display: inline-block; flex: none; }
  html[data-cockpit][data-ck2] .ckc-tx small { display: block; font-size: 13px; color: var(--c-ink2); line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  html[data-cockpit][data-ck2] .ckc-vai { color: var(--c-ink3); flex: none; display: grid; place-items: center; }
  html[data-cockpit][data-ck2] .ckc-ml.fosco .ckc-q { background: transparent; color: var(--c-ink3); }
  html[data-cockpit][data-ck2] .ckc-ml.fosco .ckc-q .ckc-miniring { opacity: .7; }
  html[data-cockpit][data-ck2] .ckc-ml.fosco .ckc-tx b { font-weight: 500; }
  html[data-cockpit][data-ck2] .ckc-ml.fosco .ckc-tx small { color: var(--c-ink3); }
  html[data-cockpit][data-ck2] .ckc-pin { width: 44px; height: 44px; margin-right: 6px; border-radius: 50%; display: grid; place-items: center; color: var(--c-azul); flex: none; }
  html[data-cockpit][data-ck2] .ckc-pin.on { color: #fff; }
  html[data-cockpit][data-ck2] .ckc-pin.on > * { background: var(--c-azul); border-radius: 50%; padding: 3px; width: 24px; height: 24px; }
  html[data-cockpit][data-ck2] .ckc-pin[aria-disabled="true"] { color: var(--c-bg3); }

  /* segurar: menu de contexto */
  html[data-cockpit][data-ck2] .ckc-pop-veu { position: fixed; inset: 0; z-index: 330; background: rgba(10,22,40,.28); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
  html[data-cockpit][data-ck2] .ckc-pop { position: fixed; left: 16px; right: 16px; top: 28%; z-index: 331; background: #fff; border-radius: 16px; box-shadow: 0 20px 50px rgba(10,22,40,.28); overflow: hidden; animation: ckc-pop .22s var(--c-ease); }
  @keyframes ckc-pop { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }
  html[data-cockpit][data-ck2] .ckc-pop-h { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--c-hair); font-size: 15px; color: var(--c-azul); }
  html[data-cockpit][data-ck2] .ckc-pop-h b { color: var(--c-ink); }
  html[data-cockpit][data-ck2] .ckc-pop button { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 52px; padding: 0 16px; font-size: 17px; border-bottom: 1px solid var(--c-hair); }
  html[data-cockpit][data-ck2] .ckc-pop button:last-child { border-bottom: 0; }
  html[data-cockpit][data-ck2] .ckc-pop button > :first-child { color: var(--c-ink2); }
  html[data-cockpit][data-ck2] .ckc-pop-n { margin: 0; padding: 12px 16px; font-size: 15px; color: var(--c-ink2); border-bottom: 1px solid var(--c-hair); }
  html[data-cockpit][data-ck2] .ckc-toast { position: fixed; left: 50%; bottom: 96px; transform: translateX(-50%); z-index: 340; background: var(--c-ink); color: #fff; padding: 10px 16px; border-radius: 999px; font-size: 14px; white-space: nowrap; max-width: calc(100vw - 32px); overflow: hidden; text-overflow: ellipsis; }

  /* ── a folha da seção (10/10, pedido do Rafa; padrão da folha aprovada do "Treinar com um caso") ──
     Sobe por cima do início, que fica atrás escurecido pelo véu. Fundo OPACO e animação só de transform (a folha
     nunca anima opacidade: um bug de conteúdo transparente já aconteceu); o véu é quem esmaece. Alta (92% do
     painel) para caber o conteúdo das seções; rolagem própria; alça no topo; X de 44 px. Camadas dentro do painel:
     véu e folha em 5 (acima da barra sticky de "Etapa atual", 4), a pílula "Enviar ao Ring" em 6 segue por cima,
     e a revisão da bandeja (20/21) por cima de tudo. */
  html[data-cockpit][data-ck2] .ckc-veu { position: fixed; inset: 0; z-index: 5; background: var(--ds-veu, rgba(10,22,40,.28)); }
  html[data-cockpit][data-ck2] .ckc-veu.entra { animation: ckc-veu-entra .24s ease-out both; }
  html[data-cockpit][data-ck2] .ckc-veu.saindo { opacity: 0; transition: opacity .22s ease-in; }
  @keyframes ckc-veu-entra { from { opacity: 0; } to { opacity: 1; } }
  html[data-cockpit][data-ck2] .ckc-folha {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 5; height: 92%; max-height: calc(100% - 44px);
    display: flex; flex-direction: column; isolation: isolate; opacity: 1;
    background: #fff; color: var(--c-ink); border-radius: var(--ds-r-4, 24px) var(--ds-r-4, 24px) 0 0;
    box-shadow: var(--ds-sombra-folha, 0 -12px 40px rgba(10,22,40,.18)); outline: 0;
    will-change: transform; touch-action: pan-y;
  }
  html[data-cockpit][data-ck2] .ckc-folha.entra { animation: ckc-sobe .32s var(--c-ease) both; }
  @keyframes ckc-sobe { from { transform: translateY(100%); } to { transform: none; } }
  html[data-cockpit][data-ck2] .ckc-folha.ckc-arrastando { box-shadow: 0 -8px 30px rgba(10,22,40,.22); }
  html[data-cockpit][data-ck2] .ckc-folha.ckc-arrastando * { user-select: none; -webkit-user-select: none; }
  html[data-cockpit][data-ck2] .ckc-folha-alca { display: flex; justify-content: center; align-items: center; height: 22px; flex: none; cursor: grab; touch-action: none; }
  html[data-cockpit][data-ck2] .ckc-folha-alca span { width: 36px; height: 5px; border-radius: 3px; background: var(--ds-hair-2, rgba(10,22,40,.14)); }
  html[data-cockpit][data-ck2] .ckc-fecha { position: absolute; top: 22px; right: 8px; z-index: 2; width: 44px; height: 44px; display: grid; place-items: center; color: var(--c-ink2); }
  html[data-cockpit][data-ck2] .ckc-fecha::before { content: ""; position: absolute; width: 36px; height: 36px; border-radius: 50%; background: var(--c-bg2); }
  html[data-cockpit][data-ck2] .ckc-fecha .ckc-i, html[data-cockpit][data-ck2] .ckc-fecha svg.lucide { position: relative; width: 18px; height: 18px; stroke-width: 2; }
  html[data-cockpit][data-ck2] .ckc-folha-rol { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 0 16px calc(120px + env(safe-area-inset-bottom)); }
  /* com a folha aberta, o corpo do painel não rola (é `clip`, não `hidden`: nem por código — o shell tentaria rolar o
     corpo para revelar um card que está na folha); a rolagem do início é guardada e devolvida ao fechar (js) */
  /* só com a aba Newgo à vista: a folha que ficou aberta nela não pode travar a rolagem de Documentos/Ferramentas */
  html[data-cockpit][data-ck2] .ck-corpo:has(.ck-aba:not([hidden]) .ckc-folha) { overflow: clip; }
  /* tela da seção (dentro da folha) */
  html[data-cockpit][data-ck2] .ckc-tt { display: flex; align-items: center; gap: 4px; min-height: 44px; padding-right: 44px; }
  /* (Fic14) .ac-cel-sec-cab do DS: título 22/27 600, "?" de 44 px, resumo 15/22 */
  html[data-cockpit][data-ck2] .ckc-tt h2 { flex: 1; min-width: 0; margin: 0; font-size: 22px; font-weight: 600; letter-spacing: -.01em; line-height: 27px; }
  html[data-cockpit][data-ck2] .ckc .ckc-ajuda { text-decoration: none; border-bottom: 0; position: relative; width: 44px !important; height: 44px !important; min-height: 44px; padding: 0; display: grid; place-items: center; flex: none; border-radius: 50%; color: var(--c-ink2); font-size: 15px; font-weight: 600; }
  html[data-cockpit][data-ck2] .ckc .ckc-ajuda::before { content: ""; position: absolute; width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid var(--c-hair); }
  html[data-cockpit][data-ck2] .ckc-resumo { margin: 4px 0 16px; font-size: 15px; color: var(--c-ink2); line-height: 22px; }
  html[data-cockpit][data-ck2] .ckc-sec { margin: 0; padding: 0; border: 0; }
  /* o corpo do desktop com ajustes de toque */
  html[data-cockpit][data-ck2] .ckc-corpo { font-size: 15px; overflow-wrap: anywhere; }
  html[data-cockpit][data-ck2] .ckc-corpo img, html[data-cockpit][data-ck2] .ckc-corpo svg:not(.lucide):not(.ckc-i) { max-width: 100%; height: auto; }
  html[data-cockpit][data-ck2] .ckc-corpo [data-ck-item] { min-height: 48px; }
  html[data-cockpit][data-ck2] .ckc-corpo .ck-tx { font-size: 15px; }
  html[data-cockpit][data-ck2] .ckc-corpo small, html[data-cockpit][data-ck2] .ckc-corpo .ck-fdoc, html[data-cockpit][data-ck2] .ckc-corpo .ck-fdesl { font-size: max(12px, 1em * .86); }
  html[data-cockpit][data-ck2] .ckc-corpo .ck-b, html[data-cockpit][data-ck2] .ckc-corpo .ck-card button, html[data-cockpit][data-ck2] .ckc-corpo .ck-decide button { min-height: 44px; }
  html[data-cockpit][data-ck2] .ckc-corpo .ck-card .ck-xc { min-width: 44px; min-height: 44px; }
  html[data-cockpit][data-ck2] .ckc-corpo .ck-termo { min-height: 32px; }
  /* o card abre logo abaixo do item tocado: nada de reordenar */
  html[data-cockpit][data-ck2] .ckc-corpo .ck-card.c1 { order: initial; position: relative; margin: 8px 0 12px; }
  /* recolher grupos (Construção, Poder) */
  html[data-cockpit][data-ck2] .ckc-rec-h { position: relative; display: flex; align-items: center; min-height: 48px; padding-right: 32px; cursor: pointer; }
  html[data-cockpit][data-ck2] .ckc-rec-h::after { content: ""; position: absolute; right: 10px; top: 50%; width: 8px; height: 8px; border-right: 2px solid var(--c-ink3); border-bottom: 2px solid var(--c-ink3); transform: translateY(-70%) rotate(45deg); transition: transform .2s var(--c-ease); }
  html[data-cockpit][data-ck2] .ckc-rec-h[aria-expanded="true"]::after { transform: translateY(-30%) rotate(-135deg); }
  html[data-cockpit][data-ck2] .ckc-recolhido { display: none !important; }
  /* (Fic14) o melhor encaixe mínimo: no herói escuro ficam "O melhor encaixe até agora", o título, os marcadores do
     que ele resolve e "Ver o encaixe inteiro"; troca, resolve por lado, por que vale e ações só ao expandir */
  html[data-cockpit][data-ck2] .ckc-min .ac-troca, html[data-cockpit][data-ck2] .ckc-min .encaixe, html[data-cockpit][data-ck2] .ckc-min .ac-dl, html[data-cockpit][data-ck2] .ckc-min .acoes, html[data-cockpit][data-ck2] .ckc-min .ck-fdoc { display: none !important; }
  html[data-cockpit][data-ck2] .ckc-heroi-min { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 12px; font-size: 13px; line-height: 18px; color: var(--ds-marca-texto-2, rgba(255,255,255,.72)); }
  html[data-cockpit][data-ck2] .ckc-heroi-min .ds-int { box-shadow: 0 0 0 1.5px rgba(255,255,255,.9); }
  html[data-cockpit][data-ck2] .ckc-heroi-min > span:last-child { margin-left: 2px; }
  html[data-cockpit][data-ck2] .ckc-min-ok:not(.ckc-min) .ckc-heroi-min { display: none; }
  html[data-cockpit][data-ck2] .ckc-heroi-b { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin-top: 8px; padding: 0 12px 0 10px; border-radius: var(--ds-r-1, 8px); background: rgba(255,255,255,.1); color: #fff; font-size: 14px; font-weight: 500; }
  html[data-cockpit][data-ck2] .ckc-heroi-b .ckc-i, html[data-cockpit][data-ck2] .ckc-heroi-b svg.lucide { width: 16px; height: 16px; transition: transform .2s var(--c-ease); }
  html[data-cockpit][data-ck2] .ckc-heroi-b[aria-expanded="true"] .ckc-i, html[data-cockpit][data-ck2] .ckc-heroi-b[aria-expanded="true"] svg.lucide { transform: rotate(180deg); }
  html[data-cockpit][data-ck2] .ckc-mais { display: inline-flex; align-items: center; min-height: 44px; padding: 0 2px; color: var(--c-azul); font-weight: 600; font-size: 15px; }
  @media (prefers-reduced-motion: reduce) {
    html[data-cockpit][data-ck2] .ckc-folha.entra, html[data-cockpit][data-ck2] .ckc-veu.entra, html[data-cockpit][data-ck2] .ckc-pop, html[data-cockpit][data-ck2] .ckc-n-mais { animation: none; }
    html[data-cockpit][data-ck2] .ckc-veu.saindo { transition: none; }
  }
}


/* Ring no celular (08/10, fix): o nó tem data-ck-item e herdava o `min-height: 48px` dos itens tocáveis do
   .ckc-corpo, virando elipse alta. O nó é sempre círculo de 44 px; a área de toque fica no ::before invisível.
   Rótulos como na maquete aprovada (cel-390-sec-ring): laterais embaixo do nó, diagonais ao lado. */
@media (max-width: 1023px) {
  html[data-cockpit][data-ck2] .ckc-corpo .ck-orb { width: min(360px, 100%) !important; margin: 18px auto 22px; }
  html[data-cockpit][data-ck2] .ckc-corpo .ck-node { width: 44px !important; height: 44px !important; min-height: 0 !important; min-width: 0 !important;
    aspect-ratio: 1; padding: 0 !important; margin: -22px 0 0 -22px !important; font-size: 15px !important; }
  html[data-cockpit][data-ck2] .ckc-corpo .ck-node::before { inset: -4px !important; }
  html[data-cockpit][data-ck2] .ckc-corpo .ck-node .lb { font-size: 12px !important; text-shadow: 0 0 3px #fff, 0 0 3px #fff; }
  html[data-cockpit][data-ck2] .ckc-corpo .ck-node.l .lb, html[data-cockpit][data-ck2] .ckc-corpo .ck-node.r .lb { left: 50% !important; right: auto !important; top: calc(100% + 7px) !important; bottom: auto !important; transform: translateX(-50%) !important; }
  /* diagonais (Interesses, Cognição à direita; Concessões, Tempo à esquerda): rótulo ao lado */
  html[data-cockpit][data-ck2] .ckc-corpo .ck-nodes > .ck-node:nth-child(2) .lb, html[data-cockpit][data-ck2] .ckc-corpo .ck-nodes > .ck-node:nth-child(5) .lb { left: calc(100% + 8px) !important; right: auto !important; top: 50% !important; transform: translateY(-50%) !important; }
  html[data-cockpit][data-ck2] .ckc-corpo .ck-nodes > .ck-node:nth-child(7) .lb, html[data-cockpit][data-ck2] .ckc-corpo .ck-nodes > .ck-node:nth-child(10) .lb { right: calc(100% + 8px) !important; left: auto !important; top: 50% !important; transform: translateY(-50%) !important; }
  /* (09/10, respiro) o nó em foco tem o anel de 4 px: o rótulo se afasta junto */
  html[data-cockpit][data-ck2] .ckc-corpo .ck-node.foco.l .lb, html[data-cockpit][data-ck2] .ckc-corpo .ck-node.foco.r .lb { top: calc(100% + 10px) !important; }
  html[data-cockpit][data-ck2] .ckc-corpo .ck-node.t .lb { bottom: calc(100% + 7px) !important; }
  html[data-cockpit][data-ck2] .ckc-corpo .ck-node.b .lb { top: calc(100% + 7px) !important; }
  /* Cognição e Concessões (rótulo ao lado, embaixo no anel): o rótulo desce 8 px para dar lugar ao rótulo de baixo
     do nó vizinho (Poder, Conformidade), também quando o nó cresce com o cartão aberto */
  html[data-cockpit][data-ck2] .ckc-corpo .ck-nodes > .ck-node:nth-child(5) .lb, html[data-cockpit][data-ck2] .ckc-corpo .ck-nodes > .ck-node:nth-child(7) .lb { top: calc(50% + 8px) !important; }
  html[data-cockpit][data-ck2] .ckc-corpo .ck-nodes > .ck-node.foco:nth-child(2) .lb, html[data-cockpit][data-ck2] .ckc-corpo .ck-nodes > .ck-node.foco:nth-child(5) .lb { left: calc(100% + 12px) !important; }
  html[data-cockpit][data-ck2] .ckc-corpo .ck-nodes > .ck-node.foco:nth-child(7) .lb, html[data-cockpit][data-ck2] .ckc-corpo .ck-nodes > .ck-node.foco:nth-child(10) .lb { right: calc(100% + 12px) !important; }
  /* (09/10, respiro) Conformidade: o rótulo centrado embaixo caía em cima do nó de Concessões (a 390 e a 360);
     embaixo, alinhado pela direita 6 px antes da borda do nó, ele passa ao lado sem sair da tela */
  html[data-cockpit][data-ck2] .ckc-corpo .ck-nodes > .ck-node:nth-child(8) .lb { left: auto !important; right: 6px !important; transform: none !important; }

  /* Construção do acordo no celular, fiel à maquete (cel-390-sec-acordo): cartões abertos, marcador de 26 px,
     ícone do lado cheio, item com respiro e divisória. */
  html[data-cockpit][data-ck2] .ckc-corpo .ck-bh { margin: 20px 0 10px; }
  html[data-cockpit][data-ck2] .ckc-corpo .ck-bh span { font-size: 16px; }
  html[data-cockpit][data-ck2] .ckc-corpo .ck-bh small { font-size: 14px; flex-basis: 100%; margin-top: 4px; }
  html[data-cockpit][data-ck2] .ckc-corpo .ck-duas { display: grid; gap: 12px; }
  html[data-cockpit][data-ck2] .ckc-corpo .ck-duas > .ck-cad { padding: 14px 14px 6px; border-radius: 18px; }
  html[data-cockpit][data-ck2] .ckc-corpo h3.ck-lado { font-size: 16px !important; gap: 10px; border-bottom: 0 !important; padding-bottom: 4px !important; }
  html[data-cockpit][data-ck2] .ckc-corpo h3.ck-lado.ckc-rec-h { min-height: 44px; margin-bottom: 0; }
  html[data-cockpit][data-ck2] .ckc-corpo .ck-lado-ic { width: 28px; height: 28px; border-radius: 50%; background: var(--c-azul); color: #fff; }
  html[data-cockpit][data-ck2] .ckc-corpo .ck-lado-ic.e { background: var(--c-bg3); color: var(--c-ink2); }
  html[data-cockpit][data-ck2] .ckc-corpo .ck-lado-ic svg.lucide { width: 15px; height: 15px; }
  html[data-cockpit][data-ck2] .ckc-corpo .ck-duas .ck-it { padding-top: 8px; padding-bottom: 8px; gap: 12px; }
  html[data-cockpit][data-ck2] .ckc-corpo .ck-duas .ck-lista > * + * { border-top: 1px solid var(--c-hair); }
  html[data-cockpit][data-ck2] .ckc-corpo .ck-hk, html[data-cockpit][data-ck2] .ckc-corpo .ck-hk *, html[data-cockpit][data-ck2] .ckc-corpo .ck-hero dt, html[data-cockpit][data-ck2] .ckc-corpo .ck-hero .ck-tag { font-size: 12px !important; }
  html[data-cockpit][data-ck2] .ckc-corpo .ck-rk { min-width: 24px; height: 24px; border-radius: 50%; font-size: 12.5px; padding: 0; }
}
/* (09/10, respiro) abaixo de 375 px o anel encolhe e o rótulo de baixo encostaria no nó seguinte: ele fica a 3 px
   do próprio nó, como antes */
@media (max-width: 374px) {
  html[data-cockpit][data-ck2] .ckc-corpo .ck-node.l .lb, html[data-cockpit][data-ck2] .ckc-corpo .ck-node.r .lb { top: calc(100% + 3px) !important; }
  html[data-cockpit][data-ck2] .ckc-corpo .ck-node.foco.l .lb, html[data-cockpit][data-ck2] .ckc-corpo .ck-node.foco.r .lb { top: calc(100% + 6px) !important; }
}

/* ── v7 · design system no celular (09/10/2026) ─────────────────────────
   Hierarquia e contraste pedidos no celular §4 (A validar, Contexto, Stakeholders,
   Avaliação, Poder): um nível de título por bloco (15/600 tinta), rótulo de apoio
   13 ink-2, valor em tinta, meta 12 ink-3 (#676e7a). Construção (T4): grupos
   recolhidos com o resumo de 1 linha. */
@media (max-width: 1023px) {
  html[data-cockpit][data-ck2] .ckc { --c-ink3: #676e7a; --c-ouro: #8a6405; }
  /* grupos da Construção: cartão leve, título + resumo de 1 linha, seta à direita */
  html[data-cockpit][data-ck2] .ckc-corpo .ck-bh.ckc-grupo { display: block; margin: 10px 0 0; padding: 12px 44px 12px 16px; min-height: 64px; box-sizing: border-box;
    border-radius: 16px; background: var(--ds-fill, #f5f5f7); }
  html[data-cockpit][data-ck2] .ckc-corpo .ck-bh.ckc-grupo span { display: block; font-size: 16px; font-weight: 600; color: var(--ds-ink, #0a1628); }
  html[data-cockpit][data-ck2] .ckc-corpo .ck-bh.ckc-grupo small { display: block; margin-top: 2px; font-size: 14px; color: var(--ds-ink-2, #5b6472); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  html[data-cockpit][data-ck2] .ckc-corpo .ck-bh.ckc-grupo::after { right: 18px; }
  html[data-cockpit][data-ck2] .ckc-corpo .ck-bh.ckc-grupo[aria-expanded="true"] { background: transparent; padding-left: 0; }
  html[data-cockpit][data-ck2] .ckc-corpo .ck-bh.ckc-grupo + * { margin-top: 4px; }
  /* rótulo de grupo (Hipóteses do Ring, Para levar à conversa, Na mesa…): título do bloco */
  html[data-cockpit][data-ck2] .ckc-corpo .ck-g2 { font-size: 15px !important; color: var(--ds-ink, #0a1628) !important; margin: 24px 0 8px; padding-top: 16px; border-top: 1px solid var(--ds-hair, rgba(10,22,40,.08)); }
  html[data-cockpit][data-ck2] .ckc-corpo .ck-g2:first-child, html[data-cockpit][data-ck2] .ckc-corpo > div > .ck-g2:first-child { margin-top: 4px; padding-top: 0; border-top: 0; }
  /* Contexto: rótulo de apoio em cima, valor em tinta embaixo */
  html[data-cockpit][data-ck2] .ckc-corpo .ck-row .ck-k { font-size: 13px !important; color: var(--ds-ink-2, #5b6472) !important; font-weight: 500; }
  html[data-cockpit][data-ck2] .ckc-corpo .ck-row .ck-v .ck-tx { color: var(--ds-ink, #0a1628); }
  /* A validar: a frase da hipótese é o título; quem e o "testa com" recuam; as decisões ficam leves */
  html[data-cockpit][data-ck2] .ckc-corpo .ck-decide { background: var(--ds-fill, #f5f5f7); }
  html[data-cockpit][data-ck2] .ckc-corpo .ck-decide .ck-b { color: var(--ds-ink-2, #5b6472) !important; font-size: 14px !important; }
  html[data-cockpit][data-ck2] .ckc-corpo .ck-tx small { color: var(--ds-ink-2, #5b6472); }
  /* Stakeholders e fichas: os botões de decisão menores (celular §4) */
  html[data-cockpit][data-ck2] .ckc-corpo .ck-card .ck-decide .ck-b { font-size: 14px !important; padding: 0 12px; }
  /* tags e etapas do trilho: 12 px no mínimo */
  html[data-cockpit][data-ck2] .ckc-corpo .ck-tag, html[data-cockpit][data-ck2] .ckc-corpo .ck-dl dt, html[data-cockpit][data-ck2] .ckc-corpo .ck-fav b { font-size: 12px !important; }
  html[data-cockpit][data-ck2] .ckc-corpo .ck-etapas .ck-et, html[data-cockpit][data-ck2] .ckc-corpo .ck-etapas .ck-et .nm { font-size: 12px !important; }
}
@media (max-width: 1023px) {
  html[data-cockpit][data-ck2] .ckc-corpo .ck-it:has(.ck-fdesl) .ck-tx { color: var(--ds-ink-3, #676e7a); }
}