/* Zavra · O que construímos. Depende de site.css.
   Cada seção tem um formato próprio e a cor do seu tema (--c): ontologia céu, agentes brasa, cockpits mar, painéis mata, controle aurora. */

.demo-note { margin-top: 14px; text-align: right }
.stage-k { display: flex; align-items: center; gap: 8px; font-size: var(--fs-2xs); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--faint) }

/* ============ 01 · ONTOLOGIA ============ */
.onto { display: grid; grid-template-columns: minmax(0, 190px) 56px minmax(0, 1fr) 56px minmax(0, 190px); align-items: center; gap: 0; padding: clamp(20px, 3vw, 36px); background: #fff; border: 1px solid var(--line); border-radius: var(--r) }
.onto-k { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; font-size: var(--fs-2xs); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--muted) }
.onto-k .mark { width: 14px; height: 14px; color: var(--c) }
.onto-col ul { display: grid; gap: 6px }
.onto-col li { display: flex; align-items: center; gap: 10px; min-height: 36px; padding: 0 12px; border-radius: var(--r-sm); background: var(--paper); font-size: var(--fs-sm) }
.onto-src li::before { content: ""; width: 8px; height: 8px; background: #b9bbbf }
.onto-use li i { width: 8px; height: 8px; background: var(--c) }
.onto-s { margin-top: 10px; font-size: var(--fs-2xs); color: var(--faint) }
/* ligação: traço com um pulso que corre da esquerda para a direita */
.onto-link { position: relative; display: grid; justify-items: center; gap: 6px; font-size: var(--fs-2xs); color: var(--faint) }
.onto-link i { position: relative; width: 100%; height: 2px; background: var(--line); overflow: hidden }
.onto-link i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: 40%; background: linear-gradient(90deg, transparent, var(--c)); animation: run 1.8s linear infinite }
@keyframes run { from { transform: translateX(-100%) } to { transform: translateX(250%) } }
.onto-core { padding: 18px; border-radius: 12px; background: var(--paper); border: 1px solid var(--line) }
.graph { position: relative; aspect-ratio: 100 / 62; margin: 4px 0 14px }
.graph-edges { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible }
.graph-edges line { stroke: #c9c8c2; stroke-width: 1.4; vector-effect: non-scaling-stroke; transition: stroke .3s ease }
.graph-edges line.on { stroke: var(--c); stroke-width: 2.2 }
.node { position: absolute; transform: translate(-50%, -50%); min-height: 34px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line-2); background: #fff; font-size: var(--fs-xs); font-weight: 600; white-space: nowrap; transition: background .25s ease, color .25s ease, border-color .25s ease, box-shadow .25s ease }
.node:hover { border-color: var(--text) }
.node.near { border-color: var(--c) }
.node.on { background: var(--c); border-color: var(--c); color: #fff; box-shadow: 0 0 0 6px rgba(63, 104, 163, .14) }
.n-cliente { left: 14%; top: 26% } .n-contrato { left: 54%; top: 16% } .n-pedido { left: 28%; top: 70% }
.n-nota { left: 66%; top: 58% } .n-entrega { left: 46%; top: 92% } .n-pagamento { left: 86%; top: 86% }
.rel { position: absolute; transform: translate(-50%, -50%); font-size: var(--fs-2xs); color: var(--faint); background: var(--paper); padding: 0 4px; pointer-events: none }
.r1 { left: 34%; top: 21% } .r2 { left: 21%; top: 48% } .r3 { left: 60%; top: 37% } .r4 { left: 47%; top: 64% } .r5 { left: 37%; top: 81% } .r6 { left: 76%; top: 72% }
.onto-card { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 16px; margin: 0; padding: 14px 16px; min-height: 112px; border-radius: 10px; background: #fff; border: 1px solid var(--line); font-size: var(--fs-xs) }
.onto-card dt { color: var(--faint) }
.onto-card dd { margin: 0; color: var(--text) }
.onto-card .t { grid-column: 1 / -1; font-size: var(--fs-sm); font-weight: 600; color: var(--text) }
.onto figcaption { grid-column: 1 / -1; margin-top: 18px; text-align: center }
.keys { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; margin-top: clamp(40px, 5vw, 64px); counter-reset: k }
.keys li { display: grid; gap: 8px; align-content: start; padding-top: 18px; border-top: 2px solid var(--text); counter-increment: k }
.keys li::before { content: "0" counter(k); font-size: var(--fs-2xs); font-weight: 600; color: var(--c) }
.keys b { font-size: var(--fs-h3); font-weight: 550; letter-spacing: -.02em; line-height: 1.25; white-space: nowrap }
.keys span { color: var(--muted); font-size: var(--fs-sm) }
@media (max-width: 1180px) {
  .keys { grid-template-columns: 1fr 1fr; gap: 32px 48px }
  .rules { grid-template-columns: 1fr 1fr; gap: 32px 0 }
  .rules li:nth-child(2n) { border-right: 0; margin-right: 0 }
}
@media (max-width: 1000px) {
  .onto { grid-template-columns: 1fr; gap: 12px }
  .onto-col ul { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)) }
  .onto-link { height: 36px; grid-template-columns: auto; align-content: center }
  .onto-link i { width: 2px; height: 28px }
  .onto-link i::after { inset: 0 0 auto; width: 100%; height: 40%; background: linear-gradient(180deg, transparent, var(--c)); animation-name: run-y }
  .onto-link span { display: none }
  .keys { grid-template-columns: 1fr 1fr }
}
@keyframes run-y { from { transform: translateY(-100%) } to { transform: translateY(250%) } }
@media (max-width: 560px) {
  .onto { padding: 14px }
  .onto-core { padding: 12px }
  .graph { aspect-ratio: 100 / 80 }
  .node { min-height: 30px; padding: 0 10px }
  .rel { display: none }
  .keys { grid-template-columns: 1fr; gap: 24px }
}

/* ============ 02 · AGENTES ============ */
.ag-intro { display: grid; gap: 14px }
.ag-intro .small { max-width: 52ch }
.agent { border-radius: var(--r); padding: clamp(18px, 2.4vw, 28px); color: #fff; display: grid; gap: 18px }
.agent-veil { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(14, 8, 6, .42), rgba(14, 8, 6, .66)) }
.agent-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; font-size: var(--fs-sm) }
.agent-name { display: inline-flex; align-items: center; gap: 10px; font-weight: 600 }
.agent .tag { background: rgba(255, 255, 255, .12); color: #fff }
.live { width: 8px; height: 8px; border-radius: 50%; background: #8fe0b9; box-shadow: 0 0 0 0 rgba(143, 224, 185, .6); animation: live 2s infinite }
@keyframes live { 70% { box-shadow: 0 0 0 8px rgba(143, 224, 185, 0) } 100% { box-shadow: 0 0 0 0 rgba(143, 224, 185, 0) } }
.agent-count { display: flex; flex-wrap: wrap; gap: 6px 20px; color: rgba(255, 255, 255, .72); font-size: var(--fs-xs) }
.agent-count b { color: #fff; font-size: var(--fs-sm); font-variant-numeric: tabular-nums }
.agent-stages { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; counter-reset: none }
.stage { position: relative; min-height: 236px; padding: 16px; border-radius: 12px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .1); transition: background .35s ease, border-color .35s ease }
.stage::after { content: ""; position: absolute; left: 16px; right: 16px; top: 0; height: 2px; background: var(--peach); transform: scaleX(0); transform-origin: left; transition: transform .5s ease }
.stage.on { background: rgba(255, 255, 255, .11); border-color: rgba(255, 255, 255, .26) }
.stage.on::after, .stage.done::after { transform: scaleX(1) }
.stage.done::after { background: rgba(255, 255, 255, .35) }
.agent .stage-k { color: rgba(255, 255, 255, .62); margin-bottom: 14px }
.agent .stage-k span { color: var(--peach) }
.stage-body { display: grid; gap: 8px; font-size: var(--fs-xs) }
.stage-body > * { animation: pop .4s ease both }
@keyframes pop { from { opacity: 0; transform: translateY(6px) } to { opacity: 1; transform: none } }
.ev { padding: 12px; border-radius: 10px; background: rgba(255, 255, 255, .94); color: var(--ink) }
.ev small { display: block; font-size: var(--fs-2xs); color: #6b6e73; letter-spacing: .04em; text-transform: uppercase }
.ev b { display: block; margin: 4px 0 2px; font-size: var(--fs-sm); font-weight: 600; line-height: 1.3 }
.ev span { color: #55595f }
.chk { display: flex; gap: 8px; align-items: baseline; line-height: 1.4; color: rgba(255, 255, 255, .9) }
.chk::before { content: "✓"; flex: none; width: 16px; height: 16px; display: grid; place-items: center; border-radius: 4px; background: rgba(255, 255, 255, .16); font-size: 10px }
.chk.alert::before { content: "!"; background: var(--brasa); color: #fff }
.src { font-size: var(--fs-2xs); color: rgba(255, 255, 255, .55) }
.verdict { padding: 12px; border-radius: 10px; font-weight: 600; font-size: var(--fs-sm); line-height: 1.35 }
.verdict small { display: block; margin-top: 4px; font-weight: 400; font-size: var(--fs-xs); opacity: .85 }
.verdict.ok { background: rgba(111, 179, 156, .22); border: 1px solid rgba(143, 224, 185, .45) }
.verdict.up { background: rgba(239, 157, 114, .2); border: 1px solid rgba(239, 157, 114, .55) }
.act { display: flex; gap: 8px; align-items: baseline; line-height: 1.4 }
.act::before { content: "→"; color: var(--peach) }
.act.done::before { content: "✓"; color: #8fe0b9 }
.agent-log { padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, .12) }
.agent-log .stage-k { margin-bottom: 8px }
.agent-log ul { display: grid; gap: 6px; min-height: 84px; font-size: var(--fs-xs) }
.agent-log li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; animation: pop .4s ease both; color: rgba(255, 255, 255, .82) }
.agent-log time { color: rgba(255, 255, 255, .5); font-variant-numeric: tabular-nums }
.agent-log .tag { min-height: 22px }
.agent-log .tag.ok { background: rgba(111, 179, 156, .25) }
.agent-log .tag.up { background: rgba(239, 157, 114, .28) }
.rules { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin-top: clamp(40px, 5vw, 64px) }
.rules li { display: grid; gap: 8px; align-content: start; padding: 4px 24px 4px 0; margin-right: 24px; border-right: 1px solid var(--line) }
.rules li:last-child { border-right: 0; margin-right: 0 }
.rules span { font-size: var(--fs-2xs); font-weight: 600; color: var(--c) }
.rules b { font-size: var(--fs-h3); font-weight: 550; letter-spacing: -.02em; line-height: 1.25 }
.rules p { color: var(--muted); font-size: var(--fs-sm) }
@media (max-width: 1000px) {
  .agent-stages { grid-template-columns: 1fr 1fr }
  .rules { grid-template-columns: 1fr 1fr; gap: 32px 0 }
  .rules li:nth-child(2n) { border-right: 0; margin-right: 0 }
}
@media (max-width: 560px) {
  .agent-stages { grid-template-columns: 1fr }
  .stage { min-height: 0 }
  .rules { grid-template-columns: 1fr; gap: 28px }
  .rules li { border-right: 0; margin-right: 0; padding-right: 0 }
  .agent-log li { grid-template-columns: minmax(0, 1fr) auto }
  .agent-log time { display: none }
}

/* ============ 03 · COCKPITS ============ */
.cockpit { position: relative; overflow: hidden; background: #fff; border: 1px solid var(--line); border-radius: var(--r); box-shadow: 0 40px 80px -48px rgba(15, 16, 19, .35) }
.ck-bar { display: flex; align-items: center; gap: 18px; padding: 12px 18px; border-bottom: 1px solid var(--line); font-size: var(--fs-sm) }
.ck-dots { display: flex; gap: 6px } .ck-dots i { width: 10px; height: 10px; border-radius: 50%; background: #dcdad3 }
.ck-tabs { display: flex; gap: 4px; margin-left: 8px }
.ck-tabs button { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 12px; border: 0; border-radius: 999px; background: none; font-size: var(--fs-xs); color: var(--muted) }
.ck-tabs button:hover { color: var(--text) }
.ck-tabs [aria-selected="true"] { background: var(--paper); color: var(--text); font-weight: 600 }
.ck-tabs em { font-style: normal; display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--c); color: #fff; font-size: 11px; font-weight: 600 }
/* a visão geral define a altura da janela; casos e aprovações ocupam o mesmo espaço e rolam por dentro */
.ck-panels { position: relative }
.ck-panel { min-width: 0; transition: opacity .25s ease }
.ck-panel.off { opacity: 0; visibility: hidden }
.ck-sheet { position: absolute; inset: 0; overflow: auto; overscroll-behavior: contain; display: grid; align-content: start; gap: 14px; padding: clamp(16px, 2.4vw, 28px) }
.ck-sheet-head { position: sticky; top: calc(-1 * clamp(16px, 2.4vw, 28px)); z-index: 1; margin: calc(-1 * clamp(16px, 2.4vw, 28px)) calc(-1 * clamp(16px, 2.4vw, 28px)) 0; padding: clamp(16px, 2.4vw, 28px) clamp(16px, 2.4vw, 28px) 12px; background: #fff }
.ck-sheet-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; font-size: var(--fs-sm) }
.ck-sheet-head { border-bottom: 1px solid var(--line) }
.ck-filter { display: flex; flex-wrap: wrap; gap: 4px }
.ck-filter button { min-height: 32px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line); background: #fff; font-size: var(--fs-xs); color: var(--muted) }
.ck-filter [aria-pressed="true"] { border-color: var(--text); color: var(--text); font-weight: 600 }
.ck-table { display: grid; font-size: var(--fs-xs) }
.ck-table .tr { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.1fr) minmax(0, .7fr) minmax(0, 1.4fr); gap: 12px; align-items: center; padding: 10px 4px; border-bottom: 1px solid var(--line) }
.ck-table .th { padding-block: 6px; color: var(--faint); font-size: var(--fs-2xs); letter-spacing: .06em; text-transform: uppercase }
.ck-table b { font-weight: 600 }
.ck-table em { font-style: normal; font-variant-numeric: tabular-nums }
.ck-table small { display: block; margin-top: 2px; color: var(--muted) }
.st { display: inline-flex; align-items: center; gap: 6px; font-style: normal; font-weight: 600 }
.st::before { content: ""; width: 7px; height: 7px; background: currentColor }
.st.wait { color: #a8661f } .st.ok { color: var(--c) } .st.off { color: var(--faint) }
.ck-appr { display: grid; gap: 8px }
.ck-appr li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--line); background: #fff; animation: pop .3s ease both }
.ck-appr li > div:first-child { display: grid; gap: 2px; min-width: 0; flex: 1 1 280px; font-size: var(--fs-xs) }
.ck-appr small { color: var(--faint) }
.ck-appr b { font-size: var(--fs-sm); font-weight: 600 }
.ck-appr span { color: var(--muted) }
.ck-acts { display: flex; gap: 6px }
.ck-sheet .btn-line { border-color: var(--line-2); color: var(--text) }
.ck-empty { padding: 24px 4px; color: var(--muted); font-size: var(--fs-sm) }
.ck-appr .ck-empty { display: block; border: 1px dashed var(--line-2); background: none; text-align: center }
.ck-user { margin-left: auto; font-size: var(--fs-xs); color: var(--muted) }
.ck-body { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) }
.ck-heat { padding: clamp(16px, 2.4vw, 28px); border-right: 1px solid var(--line) }
.ck-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin-bottom: 16px; font-size: var(--fs-sm) }
.ck-head span { font-size: var(--fs-xs); color: var(--muted) }
.heat { display: grid; grid-template-columns: 92px repeat(5, minmax(0, 1fr)); gap: 4px; font-size: var(--fs-xs) }
.heat .hh { padding: 4px 0; text-align: center; font-size: var(--fs-2xs); color: var(--muted) }
.heat .rh { display: flex; align-items: center; color: var(--muted) }
.cell { position: relative; min-height: 52px; border: 0; border-radius: var(--r-step); font-size: var(--fs-xs); font-weight: 600; font-variant-numeric: tabular-nums; transition: background .5s ease, color .5s ease, box-shadow .2s ease, transform .15s ease }
.cell:hover { transform: scale(1.04) }
.cell.sel { box-shadow: 0 0 0 2px var(--ink), 0 0 0 5px rgba(15, 16, 19, .12) }
/* ponto no canto: há ação do agente esperando aprovação nesta célula */
.cell.has::after { content: ""; position: absolute; top: 5px; right: 5px; width: 6px; height: 6px; border-radius: 50%; background: var(--ink); opacity: .55 }
.l0 { background: #f1ede3; color: #6d6a62 } .l1 { background: #f6dcc6; color: #7a4a2f } .l2 { background: #efb48e; color: #5e2d16 }
.l3 { background: #df7f55; color: #fff } .l4 { background: #b8502c; color: #fff }
.heat-scale { display: flex; align-items: center; gap: 8px; margin-top: 14px; font-size: var(--fs-2xs); color: var(--faint) }
.heat-scale i { width: 120px; height: 6px; border-radius: 3px; background: linear-gradient(90deg, #f1ede3, #f6dcc6, #efb48e, #df7f55, #b8502c) }
.ck-detail { display: grid; align-content: start; gap: 14px; padding: clamp(16px, 2.4vw, 28px); background: var(--surface-2) }
.ck-detail h3 { font-size: var(--fs-h3); font-weight: 550; letter-spacing: -.02em }
.ck-kpi { display: flex; flex-wrap: wrap; gap: 4px 16px; align-items: baseline }
.ck-kpi b { font-size: 1.75rem; font-weight: 500; letter-spacing: -.03em }
.ck-kpi span { font-size: var(--fs-xs); color: var(--muted) }
.ck-cases { display: grid; gap: 6px }
.ck-cases li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; padding: 10px 12px; border-radius: 10px; background: #fff; border: 1px solid var(--line); font-size: var(--fs-xs) }
.ck-cases b { font-weight: 600 }
.ck-cases em { font-style: normal; font-variant-numeric: tabular-nums }
.ck-cases small { grid-column: 1 / -1; display: flex; align-items: center; gap: 6px; color: var(--c) }
.ck-cases small::before { content: ""; width: 6px; height: 6px; background: currentColor }
.ck-cases small.wait { color: #a8661f } .ck-cases small.off { color: var(--faint) }
.ck-prep { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 12px; border-radius: 10px; background: #e2ece9; font-size: var(--fs-xs) }
.ck-prep span { display: inline-flex; gap: 8px; align-items: center }
.ck-prep span::before { content: ""; width: 8px; height: 8px; background: var(--c) }
.ck-prep.done { background: var(--paper) }
.ck-toast { position: absolute; left: 50%; bottom: 18px; transform: translate(-50%, 20px); opacity: 0; padding: 10px 16px; border-radius: 999px; background: var(--ink); color: var(--paper); font-size: var(--fs-xs); transition: opacity .3s ease, transform .3s ease; pointer-events: none; white-space: nowrap }
.ck-toast.on { opacity: 1; transform: translate(-50%, 0) }
.claims, .points { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; margin-top: clamp(40px, 5vw, 64px) }
.claims li, .points li { display: grid; gap: 8px; align-content: start }
.claims li::before, .points li::before { content: ""; width: 24px; height: 8px; background: var(--c); margin-bottom: 8px }
.claims b, .points b { font-size: var(--fs-h3); font-weight: 550; letter-spacing: -.02em; line-height: 1.25 }
.claims span, .points span { color: var(--muted); font-size: var(--fs-sm) }
@media (max-width: 860px) {
  .ck-body { grid-template-columns: 1fr }
  .ck-heat { border-right: 0; border-bottom: 1px solid var(--line) }
  .ck-user { display: none }
  .ck-table .tr { grid-template-columns: minmax(0, 1fr) auto; }
  .ck-table .tr > :nth-child(2) { display: none }
  .ck-table .tr > :nth-child(4) { grid-column: 1 / -1 }
  .ck-table .th > :nth-child(4) { display: none }
  .claims, .points { grid-template-columns: 1fr; gap: 28px }
}
@media (max-width: 560px) {
  .heat { grid-template-columns: 64px repeat(5, minmax(0, 1fr)); gap: 3px }
  .cell { min-height: 42px; font-size: var(--fs-2xs) }
  .ck-bar { flex-wrap: wrap; gap: 8px 10px; padding: 10px 14px }
  .ck-tabs { order: 3; width: 100%; margin-left: 0 }
  .ck-tabs button { padding: 0 10px }
  .ck-toast { white-space: normal; width: calc(100% - 32px); text-align: center }
}

/* ============ 04 · PAINÉIS ============ */
.ask { border-radius: var(--r); padding: clamp(24px, 6vw, 72px) clamp(14px, 5vw, 72px); display: grid; justify-items: center; gap: 16px }
.ask-veil { position: absolute; inset: 0; z-index: -1; background: rgba(16, 18, 10, .18) }
.ask-card { width: 100%; max-width: 860px; padding: clamp(14px, 2vw, 20px); border-radius: 18px; background: rgba(249, 248, 244, .97); color: var(--ink); box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .55); display: grid; gap: 14px;
  --text: #0f1013; --muted: #55595f; --faint: #7a7d82; --line: rgba(15, 16, 19, .12) }
.ask-q { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 0 8px 0 18px; border-radius: 999px; background: #fff; border: 1px solid var(--line); font-size: var(--fs-body) }
.ask-text { flex: 1; min-height: 1.5em }
.ask-text.typing::after { content: ""; display: inline-block; width: 1.5px; height: 1.1em; margin-left: 2px; vertical-align: -2px; background: var(--ink); animation: blink 1s steps(2) infinite }
@keyframes blink { 50% { opacity: 0 } }
.ask-send { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--ink); color: #fff; font-size: 14px }
/* altura reservada para as três linhas: o cartão não cresce enquanto a análise aparece */
.ask-steps { display: grid; align-content: start; gap: 4px; min-height: calc(3 * 1.55em + 8px); padding: 0 8px; font-size: var(--fs-xs); line-height: 1.55; color: var(--muted) }
.ask-steps li { display: flex; gap: 8px; align-items: center; animation: pop .35s ease both }
.ask-steps li::before { content: ""; width: 12px; height: 12px; border-radius: 50%; border: 1.5px solid var(--line-2); border-top-color: var(--ink); animation: spin .8s linear infinite }
.ask-steps li.ok::before { content: "✓"; border: 0; animation: none; display: grid; place-items: center; font-size: 11px; color: #4b6b3a }
@keyframes spin { to { transform: rotate(360deg) } }
.ask-answer { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 12px; opacity: 0; transform: translateY(8px); transition: opacity .5s ease, transform .5s ease }
.ask-answer.on { opacity: 1; transform: none }
.ans-kpi, .ans-why { padding: 16px; border-radius: 12px; background: #fff; border: 1px solid var(--line); display: grid; gap: 10px; align-content: start }
.ans-num { font-size: 2.25rem; font-weight: 500; letter-spacing: -.03em; line-height: 1 }
.ans-num span { display: block; margin-top: 6px; font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0; color: #b8502c }
.bars { display: flex; align-items: flex-end; gap: 4px; height: 64px }
.bars i { flex: 1; background: #c5c0a0; border-radius: 2px 2px 0 0; height: 80% }
.bars i:nth-child(2) { height: 84% } .bars i:nth-child(3) { height: 78% } .bars i:nth-child(4) { height: 86% } .bars i:nth-child(5) { height: 82% } .bars i:nth-child(6) { height: 88% }
.bars i:nth-child(7) { height: 83% } .bars i:nth-child(8) { height: 85% } .bars i:nth-child(9) { height: 81% } .bars i:nth-child(10) { height: 84% }
.bars i.low { height: 58%; background: #b8502c }
.ans-text { font-size: var(--fs-body); font-weight: 600; line-height: 1.4 }
.ans-rows { display: grid; gap: 4px; font-size: var(--fs-xs) }
.ans-rows li { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid var(--line) }
.ans-rows b { color: #b8502c; font-variant-numeric: tabular-nums }
.ans-act { grid-column: 1 / -1; min-height: 60px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 12px 12px 16px; border-radius: 12px; background: var(--ink); color: var(--paper); font-size: var(--fs-sm) }
.ans-act-t { display: inline-flex; gap: 10px; align-items: center }
.ans-act-t i { width: 8px; height: 8px; background: var(--brasa); flex: none }
.ans-act.done { background: #2f4a3d }
.ans-act.done .ans-act-t i { background: #8fe0b9 }
.ask-watch { background: rgba(255, 255, 255, .16); color: #fff; opacity: 0; transition: opacity .5s ease }
.ask-watch.on { opacity: 1 }
@media (max-width: 760px) { .ask-answer { grid-template-columns: 1fr } .ans-num { font-size: 1.875rem } }

/* ============ 05 · CONTROLE ============ */
.bento { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px }
.bx { display: grid; grid-template-rows: auto auto 1fr; gap: 8px; padding: clamp(20px, 2.6vw, 32px); background: #fff; border: 1px solid var(--line); border-radius: var(--r) }
.bx-vis { margin-bottom: 18px; padding: 16px; border-radius: 12px; background: var(--paper); font-size: var(--fs-xs); min-height: 168px; display: grid; align-content: center; gap: 8px }
.acc div { display: grid; grid-template-columns: minmax(0, 1fr) auto 32px; gap: 12px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--line) }
.acc div:last-child { border-bottom: 0; color: var(--faint) }
.acc em { font-style: normal; color: var(--muted) }
.sw { position: relative; width: 32px; height: 18px; border-radius: 999px; background: #cfcdc6 }
.sw::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; transition: transform .3s ease }
.sw.on { background: var(--c) } .sw.on::after { transform: translateX(14px) }
.spend p { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px }
.spend p b { font-size: 1.5rem; font-weight: 500; letter-spacing: -.02em }
.spend p span { color: var(--muted) }
.spend-bar { position: relative; display: flex; height: 12px; border-radius: 6px; background: #e3e0d7; overflow: visible }
.spend-bar i { height: 100%; transform-origin: left; transform: scaleX(0); transition: transform 1.2s cubic-bezier(.3, .7, .2, 1) }
.spend-bar i.a { width: 34%; background: var(--c); border-radius: 6px 0 0 6px } .spend-bar i.b { width: 22%; background: #8796b3 } .spend-bar i.c { width: 17%; background: #b9c2d3 }
.bx.is-in .spend-bar i { transform: scaleX(1) }
.bx.is-in .spend-bar i.b { transition-delay: .3s } .bx.is-in .spend-bar i.c { transition-delay: .6s }
.spend-bar em { position: absolute; left: 80%; top: -5px; bottom: -5px; width: 2px; background: var(--brasa) }
.spend ul { display: flex; flex-wrap: wrap; gap: 4px 14px; color: var(--muted) }
.spend li { display: inline-flex; align-items: center; gap: 6px }
.spend li i { width: 8px; height: 8px } .spend li i.a { background: var(--c) } .spend li i.b { background: #8796b3 } .spend li i.c { background: #b9c2d3 }
.spend li.alert { color: var(--brasa); margin-left: auto } .spend li.alert::before { content: ""; width: 2px; height: 10px; background: var(--brasa) }
.route div { display: grid; grid-template-columns: minmax(0, 1fr) 40px auto; gap: 10px; align-items: center; padding: 6px 0 }
.route i { height: 1.5px; background: var(--line-2); position: relative }
.route i::after { content: ""; position: absolute; right: -1px; top: -3px; border: 4px solid transparent; border-left: 6px solid var(--line-2); border-right: 0 }
.route em { font-style: normal; padding: 4px 10px; border-radius: 999px; background: #fff; border: 1px solid var(--line) }
.route em.hi { background: var(--c); color: #fff; border-color: var(--c) }
.log p { display: flex; gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--line); line-height: 1.4 }
.log p:last-child { border-bottom: 0 }
.log time { flex: none; color: var(--faint); font-variant-numeric: tabular-nums }
@media (max-width: 760px) { .bento { grid-template-columns: 1fr } .bx-vis { min-height: 0 } }

/* ============ celular: demonstrações mais densas ============ */
@media (max-width: 560px) {
  .demo-note { margin-top: 10px }
  /* ontologia: origens e usuários viram etiquetas pequenas em linha; o mapa fica mais baixo */
  .onto { padding: 12px; gap: 6px }
  .onto-k { margin-bottom: 8px; font-size: 11px }
  .onto-col ul { display: flex; flex-wrap: wrap; gap: 6px }
  .onto-col li { min-height: 30px; padding: 0 10px; gap: 6px; border-radius: 999px; font-size: var(--fs-xs) }
  .onto-src li::before, .onto-use li i { width: 6px; height: 6px }
  .onto-s { display: none }
  .onto-link { height: 22px }
  .onto-link i { height: 16px }
  .onto-core { padding: 10px }
  .graph { aspect-ratio: 100 / 74; margin: 0 0 10px }
  .node { min-height: 28px; padding: 0 10px; font-size: 12px }
  .node.on { box-shadow: 0 0 0 4px rgba(63, 104, 163, .14) }
  .onto-card { gap: 4px 12px; padding: 10px 12px; min-height: 0; font-size: 12px }
  .onto figcaption { margin-top: 10px }
  .keys { gap: 20px; margin-top: 32px }
  .keys li { padding-top: 12px }
  /* agente: etapas compactas, histórico com dois casos */
  .agent { padding: 14px; gap: 12px }
  .agent-top { font-size: var(--fs-xs) }
  .stage { padding: 12px }
  .agent .stage-k { margin-bottom: 8px }
  .agent-log ul { min-height: 0 }
  .agent-log li:nth-child(n+3) { display: none }
  .rules { gap: 20px; margin-top: 32px }
  /* cockpit: mapa mais baixo, dois casos no detalhe */
  .ck-heat, .ck-detail { padding: 14px }
  .ck-head { margin-bottom: 10px }
  .cell { min-height: 34px }
  .heat-scale { margin-top: 10px }
  .ck-detail { gap: 10px }
  .ck-kpi b { font-size: 1.375rem }
  .ck-cases li:nth-child(n+3) { display: none }
  .ck-sheet { padding: 14px }
  .claims, .points { gap: 20px; margin-top: 32px }
  /* painel: cartão mais justo */
  .ask { padding: 14px 10px; gap: 10px }
  .ask-card { padding: 10px; gap: 10px; border-radius: 14px }
  .ask-q { min-height: 44px; padding-left: 14px; font-size: var(--fs-sm) }
  .ask-send { width: 32px; height: 32px }
  .ans-kpi, .ans-why { padding: 12px; gap: 8px }
  .ans-num { font-size: 1.625rem }
  .bars { height: 40px }
  .ans-rows li:nth-child(3) { display: none }
  .ans-act { padding: 10px 10px 10px 12px; font-size: var(--fs-xs) }
  /* controle */
  .bento { gap: 10px }
  .bx { padding: 16px }
  .bx-vis { margin-bottom: 10px; padding: 12px }
}