/*
  Mapa de Evolução Clínica (doc 12) — estilos da página /marcadores/mapa.
  Fiel às imagens de referência, construído sobre os tokens --vt-*. Azul (--vt-info) nas ações primárias.
  Prefixo cm-*. As trilhas (swimlanes) posicionam segmentos/eventos por data via style inline no componente.
*/

.cm-page {
    display: flex;
    flex-direction: column;
    gap: 18px;

    /* Tons de segmento por classificação (cor nunca é o único diferenciador — há rótulo e borda). */
    --cm-preserved: #34C759;
    --cm-preserved-bg: rgba(52, 199, 89, .24);
    --cm-borderline: #22C7B8;
    --cm-borderline-bg: rgba(34, 199, 184, .24);
    --cm-mild: #E0A400;
    --cm-mild-bg: rgba(234, 179, 8, .28);
    --cm-moderate: #FF9F0A;
    --cm-moderate-bg: rgba(255, 159, 10, .28);
    --cm-marked: #FF5A5F;
    --cm-marked-bg: rgba(255, 90, 95, .26);
    --cm-indeterminate: #8A94A3;
    --cm-indeterminate-bg: rgba(138, 148, 163, .20);
    --cm-gap: #C9D0D8;
    --cm-event: #2F80ED;
    --cm-episode: #7B61FF;
}

/* ---------- Cabeçalho contextual (doc 12 §7) ---------- */
.cm-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 16px 24px;
    padding: 18px 20px;
    background: var(--vt-surface);
    border: 1px solid var(--vt-border);
    border-radius: var(--vt-radius-lg);
    box-shadow: var(--vt-shadow-soft);
}

.cm-head__id { display: flex; align-items: center; gap: 14px; min-width: 240px; flex: 1 1 260px; }
.cm-head__avatar {
    width: 46px; height: 46px; border-radius: 50%;
    display: grid; place-items: center;
    background: var(--vt-tint-info); color: var(--vt-info);
    font-weight: 700; font-size: 1rem; flex: none;
}
.cm-head__name { font-size: 1.28rem; font-weight: 700; color: var(--vt-text-primary); line-height: 1.15; }
.cm-head__sub { font-size: .82rem; color: var(--vt-text-secondary); margin-top: 2px; }

.cm-head__facts { display: flex; flex-wrap: wrap; gap: 18px 26px; align-items: flex-start; }
.cm-fact { display: flex; flex-direction: column; gap: 3px; min-width: 120px; }
.cm-fact__k { font-size: .68rem; text-transform: uppercase; letter-spacing: .04em; color: var(--vt-text-muted); font-weight: 600; }
.cm-fact__v { font-size: .86rem; color: var(--vt-text-primary); font-weight: 600; }
.cm-fact__v--ok { color: var(--vt-success); }
.cm-fact__sub { font-size: .72rem; color: var(--vt-text-muted); }
.cm-fact__chips { display: flex; flex-wrap: wrap; gap: 5px; }
.cm-fact__chip { font-size: .72rem; padding: 2px 8px; border-radius: var(--vt-radius-pill); background: var(--vt-surface-muted); border: 1px solid var(--vt-border); color: var(--vt-text-secondary); }
.cm-fact__link { font-size: .72rem; color: var(--vt-info); background: none; border: none; padding: 0; cursor: pointer; }

.cm-head__actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-left: auto; }
.cm-action {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: .78rem; font-weight: 600;
    padding: 7px 12px; border-radius: var(--vt-radius-md);
    background: var(--vt-surface); border: 1px solid var(--vt-border); color: var(--vt-text-secondary);
    cursor: pointer; white-space: nowrap;
}
.cm-action:hover:not(:disabled) { border-color: var(--vt-border-strong); color: var(--vt-text-primary); }
.cm-action:disabled { opacity: .5; cursor: not-allowed; }
.cm-action--primary { background: var(--vt-info); border-color: var(--vt-info); color: #fff; }
.cm-action--primary:hover:not(:disabled) { filter: brightness(.96); color: #fff; }

.cm-badge-ok {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: .74rem; font-weight: 600; padding: 3px 9px;
    border-radius: var(--vt-radius-pill); background: var(--vt-tint-success); color: #1c8b3e;
}

/* ---------- Resumo clínico (doc 12 §8) ---------- */
.cm-summary { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)) 1.6fr; gap: 12px; }
.cm-stat {
    display: flex; flex-direction: column; gap: 4px;
    padding: 14px 16px; background: var(--vt-surface);
    border: 1px solid var(--vt-border); border-radius: var(--vt-radius-lg); box-shadow: var(--vt-shadow-soft);
}
.cm-stat__top { display: flex; align-items: center; gap: 8px; }
.cm-stat__ico { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; flex: none; }
.cm-stat__num { font-size: 1.6rem; font-weight: 700; color: var(--vt-text-primary); line-height: 1; }
.cm-stat__lbl { font-size: .75rem; color: var(--vt-text-secondary); }
.cm-stat--change .cm-stat__ico { background: var(--vt-tint-info); color: var(--vt-info); }
.cm-stat--up .cm-stat__ico { background: var(--vt-tint-success); color: var(--vt-success); }
.cm-stat--down .cm-stat__ico { background: var(--vt-tint-danger); color: var(--vt-danger); }
.cm-stat--stable .cm-stat__ico { background: var(--vt-surface-muted); color: var(--vt-text-secondary); }
.cm-stat--incon .cm-stat__ico { background: var(--vt-tint-neutral); color: var(--vt-text-muted); }

.cm-insights { padding: 14px 16px; background: var(--vt-surface); border: 1px solid var(--vt-border); border-radius: var(--vt-radius-lg); box-shadow: var(--vt-shadow-soft); }
.cm-insights__title { font-size: .82rem; font-weight: 700; color: var(--vt-text-primary); margin-bottom: 8px; }
.cm-insight-item {
    display: flex; gap: 8px; align-items: flex-start; width: 100%;
    text-align: left; background: none; border: none; padding: 5px 0; cursor: pointer;
    font-size: .8rem; color: var(--vt-text-secondary); border-bottom: 1px dashed var(--vt-border);
}
.cm-insight-item:last-child { border-bottom: none; }
.cm-insight-item:hover { color: var(--vt-text-primary); }
.cm-insight-item__dot { width: 7px; height: 7px; border-radius: 50%; margin-top: 6px; flex: none; background: var(--vt-info); }
.cm-insight-item--high .cm-insight-item__dot { background: var(--vt-danger); }
.cm-insights__more { margin-top: 6px; font-size: .76rem; color: var(--vt-info); background: none; border: none; padding: 0; cursor: pointer; }

/* ---------- Controles temporais/filtros (doc 12 §18/§19/§22) ---------- */
.cm-controls {
    display: flex; flex-wrap: wrap; gap: 12px 18px; align-items: flex-end;
    padding: 14px 18px; background: var(--vt-surface);
    border: 1px solid var(--vt-border); border-radius: var(--vt-radius-lg); box-shadow: var(--vt-shadow-soft);
}
.cm-control { display: flex; flex-direction: column; gap: 5px; }
.cm-control__lbl { font-size: .68rem; text-transform: uppercase; letter-spacing: .04em; color: var(--vt-text-muted); font-weight: 600; }
.cm-presets { display: inline-flex; gap: 4px; flex-wrap: wrap; }
.cm-preset {
    font-size: .76rem; font-weight: 600; padding: 6px 11px; border-radius: var(--vt-radius-md);
    background: var(--vt-surface-muted); border: 1px solid var(--vt-border); color: var(--vt-text-secondary); cursor: pointer;
}
.cm-preset.is-active { background: var(--vt-info); border-color: var(--vt-info); color: #fff; }
.cm-select, .cm-search input {
    font-size: .8rem; padding: 7px 10px; border-radius: var(--vt-radius-md);
    background: var(--vt-surface); border: 1px solid var(--vt-border); color: var(--vt-text-primary);
}
.cm-search { display: inline-flex; align-items: center; gap: 6px; padding: 0 10px; border: 1px solid var(--vt-border); border-radius: var(--vt-radius-md); background: var(--vt-surface); color: var(--vt-text-muted); }
.cm-search input { border: none; padding: 8px 0; background: none; min-width: 180px; }
.cm-viewmodes { display: inline-flex; gap: 4px; padding: 3px; background: var(--vt-surface-muted); border-radius: var(--vt-radius-md); }
.cm-viewmode { font-size: .76rem; font-weight: 600; padding: 6px 12px; border-radius: 8px; background: none; border: none; color: var(--vt-text-secondary); cursor: pointer; }
.cm-viewmode.is-active { background: var(--vt-surface); color: var(--vt-info); box-shadow: var(--vt-shadow-soft); }
.cm-viewmode:disabled { opacity: .45; cursor: not-allowed; }

/* ---------- Mapa principal / swimlanes (doc 12 §10–§17) ---------- */
.cm-map { background: var(--vt-surface); border: 1px solid var(--vt-border); border-radius: var(--vt-radius-lg); box-shadow: var(--vt-shadow-card); overflow: hidden; }
.cm-map__head { display: flex; align-items: center; gap: 8px; padding: 14px 18px; border-bottom: 1px solid var(--vt-border); }
.cm-map__title { font-size: .92rem; font-weight: 700; color: var(--vt-text-primary); }
/* O mapa é navegado por arraste/janela (map-pan.js muda o período, não o scroll), então nunca deve mostrar
   barra de rolagem horizontal. clip (e não hidden) evita induzir uma barra VERTICAL quando o eixo Y é visible. */
.cm-map__scroll { overflow-x: clip; }
/* Recuo à direita: o eixo, as swimlanes, a faixa de episódios e o navegador são blocos/grades que preenchem
   a largura de conteúdo deste bloco, então um padding-right afasta todos, alinhados, da borda direita (evita
   os últimos segmentos colarem na borda; substitui a antiga flag "Fim do período"). */
.cm-map__grid { min-width: 720px; position: relative; padding-right: 14px; }

/* Régua de anos no topo das trilhas */
.cm-axis { position: relative; height: 26px; margin-left: var(--cm-label-w, 190px); border-bottom: 1px solid var(--vt-border); }
.cm-axis__tick { position: absolute; top: 0; transform: translateX(-50%); font-size: .68rem; color: var(--vt-info); font-weight: 700; padding-top: 6px; white-space: nowrap; }
.cm-axis__tick::before { content: ''; position: absolute; top: 0; left: 50%; width: 1px; height: 4px; background: var(--vt-info); opacity: .5; }
/* Marcações nas pontas ancoram para dentro para não transbordarem (o tracinho segue na data real). */
.cm-axis__tick--start { transform: translateX(0); }
.cm-axis__tick--start::before { left: 0; }
.cm-axis__tick--end { transform: translateX(-100%); }
.cm-axis__tick--end::before { left: 100%; }

/* Faixa de ANOS acima das marcações de mês/dia (eixo de dois níveis): o ano fica no centro da sua porção visível. */
.cm-axis-years { position: relative; height: 15px; margin-left: var(--cm-label-w, 190px); }
.cm-axis-years__y { position: absolute; top: 1px; transform: translateX(-50%); font-size: .64rem; font-weight: 700; letter-spacing: .03em; color: var(--vt-text-muted); white-space: nowrap; }

.cm-lane { display: grid; grid-template-columns: var(--cm-label-w, 190px) 1fr; align-items: stretch; border-bottom: 1px solid var(--vt-border); }
.cm-lane:nth-child(even) .cm-lane__track { background: var(--vt-surface-muted); }
.cm-lane__label { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-right: 1px solid var(--vt-border); }
.cm-lane__ico { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: var(--vt-surface-muted); color: var(--vt-text-secondary); flex: none; }
/* Ícone de sistema colorido por domínio (como na referência). */
.cm-lane__ico--purple { background: rgba(123,97,255,.14); color: #7b61ff; }
.cm-lane__ico--blue { background: var(--vt-tint-info); color: var(--vt-info); }
.cm-lane__ico--orange { background: var(--vt-tint-warning); color: var(--vt-warning); }
.cm-lane__ico--pink { background: rgba(255,90,95,.14); color: #e8618f; }
.cm-lane__ico--red { background: var(--vt-tint-danger); color: var(--vt-danger); }
.cm-lane__ico--teal { background: var(--vt-tint-teal); color: var(--vt-teal); }
/* Ponto de confiança do estado atual da lane. */
.cm-lane__conf { width: 9px; height: 9px; border-radius: 50%; display: inline-block; margin-left: 6px; vertical-align: middle; }
.cm-lane__conf--high { background: var(--vt-success); }
.cm-lane__conf--mod { background: var(--vt-warning); }
.cm-lane__conf--low { background: var(--vt-danger); }
/* Grupo de confiança na legenda. */
.cm-legend__cap { font-size: .72rem; font-weight: 600; color: var(--vt-text-secondary); }
.cm-legend__sep { width: 1px; align-self: stretch; background: var(--vt-border); margin: 0 4px; }
.cm-legend__cdot { width: 9px; height: 9px; border-radius: 50%; }
.cm-legend__cdot--high { background: var(--vt-success); }
.cm-legend__cdot--mod { background: var(--vt-warning); }
.cm-legend__cdot--low { background: var(--vt-danger); }
.cm-legend__cdot--vlow { background: var(--vt-text-muted); }
.cm-lane__name { font-size: .82rem; font-weight: 600; color: var(--vt-text-primary); }
.cm-lane__trend { display: inline-flex; align-items: center; gap: 4px; font-size: .68rem; margin-top: 2px; }
.cm-lane__trend--improving { color: var(--vt-success); }
.cm-lane__trend--worsening { color: var(--vt-danger); }
.cm-lane__trend--stable { color: var(--vt-text-muted); }
.cm-lane__trend--inconclusive { color: var(--vt-text-muted); }

/* Recorta o transbordo horizontal de marcadores junto às bordas (eventos/episódios centralizados por translateX)
   para que NÃO gerem uma barra de rolagem horizontal que aparece/some ao navegar — o que fazia o Mapa "pular" de
   altura. A margem preserva o anel de seleção. Não afeta o scroll legítimo por min-width em telas estreitas. */
.cm-lane__track { position: relative; min-height: 62px; padding: 22px 0 22px 0; overflow-x: clip; overflow-clip-margin: 6px; }
/* Arraste-para-navegar: cursor de "agarrar" na área das trilhas; segmentos/eventos mantêm o cursor de clique. */
.cm-map__grid--pan .cm-lane__track, .cm-map__grid--pan .cm-axis, .cm-map__grid--pan .cm-informed__track { cursor: grab; }
.cm-map__grid--pan.is-panning { cursor: grabbing; user-select: none; }
.cm-map__grid--pan.is-panning .cm-seg, .cm-map__grid--pan.is-panning .cm-evt, .cm-map__grid--pan.is-panning .cm-episode, .cm-map__grid--pan.is-panning .cm-epbox { cursor: grabbing; }

/* Marquee zoom (Shift+arraste): cursor de mira e retângulo de seleção sobre a área de tempo. */
.cm-map__grid--pan.is-marquee, .cm-map__grid--pan.is-marquee * { cursor: crosshair !important; user-select: none; }
.cm-marquee {
    position: absolute; z-index: 4; pointer-events: none;
    background: color-mix(in srgb, var(--vt-info) 14%, transparent);
    border: 1px solid var(--vt-info);
    border-radius: 4px;
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--vt-info) 22%, transparent);
}

/* Dica de descoberta do gesto (só aparece com janela longa). */
.cm-map__hint { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; font-size: .72rem; color: var(--vt-text-muted); white-space: nowrap; }
.cm-map__hint strong { color: var(--vt-text-secondary); font-weight: 600; }
.cm-map__hint .clinical-icon { color: var(--vt-info); }
@media (max-width: 720px) { .cm-map__hint { display: none; } }

/* Segmentos de estado (barras datadas) */
.cm-seg {
    position: absolute; top: 18px; height: 26px;
    display: flex; align-items: center; gap: 6px; padding: 0 9px;
    border-radius: 7px; font-size: .74rem; font-weight: 600; white-space: nowrap; overflow: hidden;
    border: 1px solid transparent; cursor: pointer; box-sizing: border-box;
}
.cm-seg__dot { width: 7px; height: 7px; border-radius: 2px; flex: none; }
.cm-seg--preserved { background: var(--cm-preserved-bg); border-color: rgba(52,199,89,.45); color: #1c8b3e; }
.cm-seg--preserved .cm-seg__dot { background: var(--cm-preserved); }
.cm-seg--borderline { background: var(--cm-borderline-bg); border-color: rgba(34,199,184,.45); color: #128577; }
.cm-seg--borderline .cm-seg__dot { background: var(--cm-borderline); }
.cm-seg--mild { background: var(--cm-mild-bg); border-color: rgba(224,164,0,.5); color: #9a7100; }
.cm-seg--mild .cm-seg__dot { background: var(--cm-mild); }
.cm-seg--moderate { background: var(--cm-moderate-bg); border-color: rgba(255,159,10,.5); color: #b56d00; }
.cm-seg--moderate .cm-seg__dot { background: var(--cm-moderate); }
.cm-seg--marked { background: var(--cm-marked-bg); border-color: rgba(255,90,95,.55); color: #c0353a; }
.cm-seg--marked .cm-seg__dot { background: var(--cm-marked); }
.cm-seg--indeterminate { background: var(--cm-indeterminate-bg); border-color: rgba(138,148,163,.45); color: var(--vt-text-secondary); }
.cm-seg--indeterminate .cm-seg__dot { background: var(--cm-indeterminate); }
.cm-seg--insufficient { background: repeating-linear-gradient(45deg, var(--vt-surface-muted), var(--vt-surface-muted) 6px, #eceff2 6px, #eceff2 12px); border: 1px dashed var(--vt-border-strong); color: var(--vt-text-muted); }
.cm-seg--gap {
    top: 26px; height: 10px; padding: 0;
    background: repeating-linear-gradient(45deg, transparent, transparent 5px, var(--cm-gap) 5px, var(--cm-gap) 6px);
    border: none; border-top: 1px dashed var(--vt-border-strong); border-bottom: 1px dashed var(--vt-border-strong);
    color: transparent; cursor: default;
}
/* Seleção como "caixa com alças": realce + duas alças verticais nas bordas do segmento. */
.cm-seg.is-selected { outline: 2px solid var(--vt-info); outline-offset: 1px; box-shadow: 0 0 0 3px color-mix(in srgb, var(--vt-info) 16%, transparent); z-index: 3; }
.cm-seg.is-selected::before, .cm-seg.is-selected::after { content: ''; position: absolute; top: 50%; transform: translateY(-50%); width: 3px; height: 15px; border-radius: 2px; background: var(--vt-info); }
.cm-seg.is-selected::before { left: 2px; }
.cm-seg.is-selected::after { right: 2px; }

/* Setas de transição entre segmentos (piora ↑ âmbar/vermelho, melhora ↓ verde). */
.cm-trans { position: absolute; top: 50%; transform: translate(-50%, -50%); z-index: 2; width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; border: 1.5px solid var(--vt-surface); box-shadow: var(--vt-shadow-soft); pointer-events: none; }
.cm-trans--worse { background: #fdecea; color: #c0353a; }
.cm-trans--better { background: #e7f6ec; color: #1c8b3e; }

/* Marcos de evento sobre a trilha */
.cm-evt {
    position: absolute; top: -2px; transform: translateX(-50%);
    width: 22px; height: 22px; border-radius: 50%;
    display: grid; place-items: center; cursor: pointer;
    background: var(--vt-surface); border: 1.5px solid var(--cm-event); color: var(--cm-event);
    box-shadow: var(--vt-shadow-soft); z-index: 2;
}
.cm-evt--improvement { border-color: var(--cm-preserved); color: var(--cm-preserved); }
.cm-evt--resolution { border-color: var(--cm-preserved); color: var(--cm-preserved); }
.cm-evt--progression, .cm-evt--onset { border-color: var(--cm-moderate); color: var(--cm-moderate); }
.cm-evt--abrupt { border-color: var(--cm-marked); color: var(--cm-marked); }
.cm-evt.is-selected { outline: 2px solid var(--vt-info); outline-offset: 1px; }

/* Trilha separada de eventos informados (doc 12 §14) */
.cm-informed { display: grid; grid-template-columns: var(--cm-label-w, 190px) 1fr; border-top: 2px solid var(--vt-border-strong); background: rgba(123,97,255,.04); position: relative; z-index: 2; }
.cm-informed__label { display: flex; align-items: center; gap: 10px; padding: 14px; border-right: 1px solid var(--vt-border); }
.cm-informed__ico { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: rgba(123,97,255,.12); color: var(--cm-episode); flex: none; }
.cm-informed__name { font-size: .82rem; font-weight: 600; color: var(--vt-text-primary); }
.cm-informed__track { position: relative; min-height: 52px; overflow-x: clip; overflow-clip-margin: 6px; }
.cm-informed__line { position: absolute; left: 0; right: 0; top: 26px; height: 2px; background: rgba(123,97,255,.35); }
.cm-episode {
    position: absolute; top: 15px; transform: translateX(-50%);
    display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px;
    background: var(--vt-surface); border: 1px solid rgba(123,97,255,.4); color: var(--cm-episode);
    border-radius: var(--vt-radius-pill); font-size: .72rem; font-weight: 600; white-space: nowrap;
    cursor: pointer; box-shadow: var(--vt-shadow-soft); z-index: 2; max-width: 190px;
}
.cm-episode__lbl { overflow: hidden; text-overflow: ellipsis; }
/* Agrupamento de eventos informados co-localizados: vira um disco compacto com contagem (declutter). */
.cm-episode--multi { width: 24px; height: 24px; padding: 0; gap: 0; justify-content: center; border-radius: 50%; }
.cm-episode__count { position: absolute; top: -7px; right: -7px; min-width: 15px; height: 15px; padding: 0 3px; box-sizing: border-box; background: var(--cm-episode); color: #fff; border-radius: 999px; display: grid; place-items: center; font-size: .62rem; font-weight: 700; }
.cm-episode.is-selected { outline: 2px solid var(--vt-info); outline-offset: 1px; }

/* ── Episódios clínicos: caixas na faixa inferior + linhas tracejadas verticais na cor do episódio ── */
/* Camada das linhas: cobre a área das trilhas (à direita dos rótulos), do fim do eixo até a base do grid.
   pointer-events:none para não bloquear cliques nas swimlanes; z-index:1 fica acima das faixas de estado e
   abaixo da faixa de episódios (z-2) e do navegador (z-3, opaco, que mascara a ponta inferior das linhas). */
/* right acompanha o padding-right do grid, para as linhas de episódio ficarem alinhadas às swimlanes. */
.cm-eplayer { position: absolute; left: var(--cm-label-w, 190px); right: 14px; top: 41px; bottom: 0; pointer-events: none; z-index: 1; }
.cm-epline { position: absolute; top: 0; bottom: 0; width: 0; border-left: 2px dashed currentColor; transform: translateX(-1px); opacity: .55; }
/* Caixa do episódio: ancorada na base da faixa; a cor do episódio entra como currentColor (borda + ícone). */
.cm-epbox {
    position: absolute; bottom: 8px; transform: translateX(-50%);
    display: inline-flex; align-items: center; gap: 5px; max-width: 168px;
    padding: 4px 9px; border-radius: 9px; background: var(--vt-surface);
    border: 1.5px solid currentColor; box-shadow: var(--vt-shadow-soft);
    font-size: .72rem; font-weight: 600; line-height: 1.15; white-space: nowrap;
    cursor: pointer; pointer-events: auto; z-index: 2;
}
.cm-epbox__ico { color: currentColor; display: inline-flex; flex: none; }
.cm-epbox__lbl { color: var(--vt-text-primary); overflow: hidden; text-overflow: ellipsis; }
.cm-epbox.is-selected { outline: 2px solid var(--vt-info); outline-offset: 1px; }
/* Contagem para eventos detectados agrupados sobre a trilha. */
.cm-evt__count { position: absolute; top: -7px; right: -7px; min-width: 15px; height: 15px; padding: 0 3px; box-sizing: border-box; background: var(--vt-text-primary); color: #fff; border-radius: 999px; display: grid; place-items: center; font-size: .6rem; font-weight: 700; }
/* Itens clicáveis das listas de agrupamento no drawer. */
.cm-listbtn { display: inline-flex; align-items: center; gap: 6px; width: 100%; text-align: left; background: none; border: none; padding: 7px 2px; cursor: pointer; color: var(--vt-text-secondary); font-size: .82rem; }
.cm-listbtn:hover { color: var(--vt-text-primary); }
.cm-evlist__kind { margin-left: auto; font-size: .72rem; color: var(--vt-text-muted); }

/* Legenda */
.cm-legend { display: flex; flex-wrap: wrap; gap: 8px 16px; padding: 12px 18px; border-top: 1px solid var(--vt-border); }
.cm-legend__i { display: inline-flex; align-items: center; gap: 6px; font-size: .72rem; color: var(--vt-text-secondary); }
.cm-legend__sw { width: 14px; height: 10px; border-radius: 3px; border: 1px solid transparent; }
.cm-legend__sw--preserved { background: var(--cm-preserved-bg); border-color: var(--cm-preserved); }
.cm-legend__sw--mild { background: var(--cm-mild-bg); border-color: var(--cm-mild); }
.cm-legend__sw--moderate { background: var(--cm-moderate-bg); border-color: var(--cm-moderate); }
.cm-legend__sw--marked { background: var(--cm-marked-bg); border-color: var(--cm-marked); }
.cm-legend__sw--indeterminate { background: var(--cm-indeterminate-bg); border-color: var(--cm-indeterminate); }
.cm-legend__sw--gap { background: repeating-linear-gradient(45deg, transparent, transparent 3px, var(--cm-gap) 3px, var(--cm-gap) 4px); }

/* ---------- Navegador temporal ---------- */
.cm-nav { padding: 14px 18px; background: var(--vt-surface); border: 1px solid var(--vt-border); border-radius: var(--vt-radius-lg); box-shadow: var(--vt-shadow-soft); }
.cm-nav__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.cm-nav__title { font-size: .78rem; font-weight: 600; color: var(--vt-text-secondary); display: inline-flex; align-items: center; gap: 6px; }
.cm-nav__zoom { display: inline-flex; gap: 6px; }
.cm-nav__btn { width: 30px; height: 30px; display: grid; place-items: center; border-radius: var(--vt-radius-md); border: 1px solid var(--vt-border); background: var(--vt-surface); color: var(--vt-text-secondary); cursor: pointer; }
.cm-nav__btn:hover { border-color: var(--vt-border-strong); color: var(--vt-text-primary); }

/* Navegador temporal como "trilha" abaixo das swimlanes: a coluna de arraste (1fr) alinha EXATAMENTE com os
   tracks das swimlanes (mesma coluna de rótulo à esquerda). z-index acima do marcador de fim-de-período. */
.cm-navrow { display: grid; grid-template-columns: var(--cm-label-w, 190px) 1fr; align-items: center; border-top: 2px solid var(--vt-border-strong); background: var(--vt-surface); position: relative; z-index: 3; }
.cm-navrow__label { display: flex; flex-direction: column; gap: 8px; padding: 10px 14px; border-right: 1px solid var(--vt-border); }
.cm-navrow__title { font-size: .78rem; font-weight: 600; color: var(--vt-text-secondary); display: inline-flex; align-items: center; gap: 6px; }
.cm-navrow__zoom { display: inline-flex; gap: 6px; }
/* Sem padding horizontal: a área de arraste do navegador coincide com a das swimlanes. */
.cm-navrow__track { min-width: 0; padding: 8px 0 10px; }
.cm-navrow__track .mt-nav { margin-top: 0; }

/* ---------- Painel de detalhes (drawer, doc 12 §25–§28) ---------- */
.cm-drawer-scrim { position: fixed; inset: 0; background: var(--vt-scrim-popover, rgba(16,20,24,.28)); z-index: 60; }
.cm-drawer {
    position: fixed; top: 0; right: 0; bottom: 0; width: min(440px, 92vw);
    background: var(--vt-surface); border-left: 1px solid var(--vt-border);
    box-shadow: -8px 0 32px rgba(16,20,24,.14); z-index: 61;
    display: flex; flex-direction: column;
}
.cm-drawer__head { display: flex; align-items: flex-start; gap: 10px; padding: 16px 18px; border-bottom: 1px solid var(--vt-border); }
.cm-drawer__ico { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; flex: none; background: var(--vt-tint-info); color: var(--vt-info); }
.cm-drawer__kicker { font-size: .68rem; text-transform: uppercase; letter-spacing: .04em; color: var(--vt-text-muted); font-weight: 600; }
.cm-drawer__title { font-size: 1.06rem; font-weight: 700; color: var(--vt-text-primary); line-height: 1.2; }
.cm-drawer__sub { font-size: .78rem; color: var(--vt-text-secondary); }
.cm-drawer__close { margin-left: auto; background: none; border: none; color: var(--vt-text-muted); cursor: pointer; padding: 4px; }
.cm-drawer__body { padding: 16px 18px; overflow-y: auto; flex: 1; display: flex; flex-direction: column; gap: 14px; }

.cm-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; }
.cm-fields > div { display: flex; flex-direction: column; gap: 2px; }
.cm-fields dt, .cm-field__k { font-size: .68rem; text-transform: uppercase; letter-spacing: .03em; color: var(--vt-text-muted); font-weight: 600; }
.cm-fields dd, .cm-field__v { font-size: .84rem; color: var(--vt-text-primary); margin: 0; }
.cm-drawer__lead { font-size: .88rem; color: var(--vt-text-primary); line-height: 1.5; }
.cm-subhead { font-size: .78rem; font-weight: 700; color: var(--vt-text-secondary); text-transform: uppercase; letter-spacing: .03em; }
.cm-ba { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; }
.cm-ba__col { padding: 10px 12px; border-radius: var(--vt-radius-md); background: var(--vt-surface-muted); border: 1px solid var(--vt-border); }
.cm-ba__cap { font-size: .68rem; text-transform: uppercase; color: var(--vt-text-muted); font-weight: 600; }
.cm-ba__v { font-size: .86rem; font-weight: 600; color: var(--vt-text-primary); }
.cm-ba__arrow { color: var(--vt-text-muted); }

.cm-chip {
    display: inline-flex; align-items: center; gap: 5px; font-size: .72rem; font-weight: 600;
    padding: 3px 9px; border-radius: var(--vt-radius-pill); background: var(--vt-surface-muted);
    border: 1px solid var(--vt-border); color: var(--vt-text-secondary);
}
.cm-chip--conf { background: var(--vt-tint-info); color: var(--vt-info); border-color: transparent; }
.cm-chip-row { display: flex; flex-wrap: wrap; gap: 6px; }

.cm-drawer__actions { display: flex; flex-wrap: wrap; gap: 8px; padding: 14px 18px; border-top: 1px solid var(--vt-border); }
.cm-drawer__note {
    display: flex; gap: 8px; align-items: flex-start; padding: 10px 12px; margin: 0 18px 16px;
    background: var(--vt-tint-warning); border-radius: var(--vt-radius-md); font-size: .76rem; color: #96560a;
}
.cm-drawer__disclaimer { display: flex; gap: 8px; align-items: flex-start; padding: 12px 18px; border-top: 1px solid var(--vt-border); font-size: .74rem; color: var(--vt-text-muted); }

/* ---------- Painel de detalhes rico do estado ---------- */
.cm-drawer__headmain { min-width: 0; }
.cm-drawer__confpill { display: inline-flex; align-items: center; gap: 5px; font-size: .72rem; font-weight: 600; padding: 3px 9px; border-radius: var(--vt-radius-pill); background: var(--vt-surface-muted); color: var(--vt-text-secondary); align-self: flex-start; white-space: nowrap; }
.cm-drawer__confpill .cm-conf-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.cm-conf--high { background: var(--vt-tint-success); color: #1c8b3e; }
.cm-conf--mod { background: var(--vt-tint-warning); color: #96560a; }
.cm-conf--low { background: var(--vt-tint-danger); color: #c0353a; }
.cm-class--preserved { color: #1c8b3e; }
.cm-class--borderline { color: #128577; }
.cm-class--mild { color: #9a7100; }
.cm-class--moderate { color: #b56d00; }
.cm-class--marked { color: #c0353a; }
.cm-class--indeterminate, .cm-class--gap, .cm-class--insufficient { color: var(--vt-text-muted); }

.cm-stat-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.cm-stat-tile { border: 1px solid var(--vt-border); border-radius: var(--vt-radius-md); padding: 9px 10px; display: flex; flex-direction: column; gap: 3px; background: var(--vt-surface); }
.cm-stat-tile__k { font-size: .64rem; text-transform: uppercase; letter-spacing: .03em; color: var(--vt-text-muted); font-weight: 600; }
.cm-stat-tile__v { font-size: .9rem; font-weight: 700; color: var(--vt-text-primary); }
.cm-stat-tile__v small { font-size: .68rem; font-weight: 500; color: var(--vt-text-muted); }
.cm-conf-dots { display: inline-flex; gap: 3px; align-items: center; height: 18px; }
.cm-conf-dots__d { width: 8px; height: 8px; border-radius: 50%; background: var(--vt-border-strong); }
.cm-conf-dots__d.is-on { background: var(--vt-warning); }

.cm-drawer__period { display: flex; gap: 8px; align-items: flex-start; color: var(--vt-info); }
.cm-drawer__period > div { display: flex; flex-direction: column; }
.cm-drawer__row-v { font-size: .84rem; color: var(--vt-text-primary); font-weight: 600; }
.cm-drawer__row-s { font-size: .74rem; color: var(--vt-text-muted); }

.cm-tchip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 4px 3px 10px; border: 1px solid var(--vt-border); border-radius: var(--vt-radius-md); background: var(--vt-surface); font-size: .78rem; }
.cm-tchip__name { color: var(--vt-text-primary); font-weight: 600; }
.cm-tchip__tag { font-size: .66rem; font-weight: 600; padding: 1px 7px; border-radius: var(--vt-radius-pill); background: var(--vt-surface-muted); color: var(--vt-text-secondary); }

.cm-transitions { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; }
.cm-trans__box { padding: 8px 10px; border-radius: var(--vt-radius-md); border: 1px solid transparent; font-size: .78rem; display: flex; flex-direction: column; gap: 2px; }
.cm-trans__box span { font-weight: 600; }
.cm-trans__box small { font-size: .68rem; color: var(--vt-text-muted); }
.cm-trans__arrow { color: var(--vt-text-muted); font-weight: 700; }

.cm-drawer__2col { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.cm-drawer__ev { display: flex; gap: 7px; align-items: flex-start; padding: 5px 0; color: var(--vt-info); }
.cm-drawer__ev > div { display: flex; flex-direction: column; }
.cm-drawer__ev-t { font-size: .8rem; color: var(--vt-text-primary); font-weight: 600; }
.cm-drawer__ev-s { font-size: .7rem; color: var(--vt-text-muted); }
.cm-drawer__bullets { margin: 0; padding-left: 16px; font-size: .8rem; color: var(--vt-text-primary); display: flex; flex-direction: column; gap: 4px; }
.cm-drawer__bullets--muted { color: var(--vt-text-secondary); }
.cm-drawer__muted { font-size: .78rem; color: var(--vt-text-muted); }
.cm-drawer__link { font-size: .76rem; color: var(--vt-info); display: inline-block; margin-top: 6px; }

.cm-drawer-chart { width: 100%; height: 96px; display: block; }
.cm-drawer-chart__x { display: flex; justify-content: space-between; font-size: .68rem; color: var(--vt-text-muted); margin-top: 2px; }
/* Eixo-Y numérico (duplo: cada série é auto-normalizada, então cada uma tem sua própria escala e cor). */
.cm-dchart { display: grid; grid-template-columns: auto 1fr auto; gap: 6px; align-items: stretch; }
.cm-dchart__y { display: flex; flex-direction: column; justify-content: space-between; padding: 8px 0; font-size: .6rem; font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; line-height: 1; }
.cm-dchart__y--right { text-align: left; }
.cm-dchart__y em { font-style: normal; font-weight: 400; opacity: .7; }
.cm-drawer-chart__leg { display: inline-flex; align-items: center; gap: 6px; font-size: .74rem; color: var(--vt-text-secondary); }
.cm-drawer-chart__sw { width: 14px; height: 3px; border-radius: 2px; }

@media (max-width: 520px) { .cm-stat-tiles { grid-template-columns: repeat(2, 1fr); } .cm-drawer__2col { grid-template-columns: 1fr; } }

.cm-evlist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.cm-evlist li { display: flex; gap: 8px; align-items: baseline; font-size: .8rem; color: var(--vt-text-secondary); }
.cm-evlist__date { font-variant-numeric: tabular-nums; color: var(--vt-text-muted); flex: none; }

/* ---------- Mudança abrupta: antes → depois visual no drawer do evento ---------- */
.cm-abrupt { display: grid; grid-template-columns: 1fr auto 1fr; align-items: stretch; gap: 10px; margin-bottom: 14px; }
.cm-abrupt__side { display: flex; flex-direction: column; gap: 5px; padding: 12px 12px; border: 1px solid var(--vt-border); border-radius: var(--vt-radius-md); background: var(--vt-surface-muted); text-align: center; justify-content: center; }
.cm-abrupt__lbl { font-size: .64rem; text-transform: uppercase; letter-spacing: .05em; color: var(--vt-text-muted); font-weight: 700; }
.cm-abrupt__val { font-size: 1.12rem; font-weight: 700; color: var(--vt-text-primary); font-variant-numeric: tabular-nums; line-height: 1.15; }
.cm-abrupt__mid { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-width: 54px; }
.cm-abrupt__arrow { display: inline-flex; width: 36px; height: 36px; align-items: center; justify-content: center; border-radius: 50%; }
.cm-abrupt__cap { font-size: .62rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--vt-text-muted); }
/* Direção: subiu (âmbar) / caiu (azul) / mudou (neutro). Realça o cartão "Depois" (o valor novo). */
.cm-abrupt--up .cm-abrupt__arrow { background: rgba(217, 119, 6, .14); color: #b45309; }
.cm-abrupt--up .cm-abrupt__cap { color: #b45309; }
.cm-abrupt--up .cm-abrupt__side--after { border-color: rgba(217, 119, 6, .45); background: rgba(217, 119, 6, .06); }
.cm-abrupt--down .cm-abrupt__arrow { background: color-mix(in srgb, var(--vt-info) 14%, transparent); color: var(--vt-info); }
.cm-abrupt--down .cm-abrupt__cap { color: var(--vt-info); }
.cm-abrupt--down .cm-abrupt__side--after { border-color: color-mix(in srgb, var(--vt-info) 45%, transparent); background: color-mix(in srgb, var(--vt-info) 6%, transparent); }
.cm-abrupt--flat .cm-abrupt__arrow { background: var(--vt-surface-muted); color: var(--vt-text-secondary); }

/* ---------- Contexto hierárquico do evento informado (episódio-pai + deep-link) ---------- */
.cm-crumb {
    display: flex; align-items: center; gap: 8px; width: 100%;
    padding: 9px 11px; margin-bottom: 12px;
    background: var(--vt-info-soft, rgba(37, 99, 235, .06));
    border: 1px solid var(--vt-info-border, rgba(37, 99, 235, .18));
    border-radius: var(--vt-radius-md); text-decoration: none;
    color: var(--vt-text-secondary); font-size: .82rem;
}
.cm-crumb:hover { border-color: var(--vt-info); color: var(--vt-text-primary); }
.cm-crumb__ico { display: inline-flex; color: var(--vt-info); flex: none; }
.cm-crumb__txt { flex: 1 1 auto; min-width: 0; }
.cm-crumb__txt strong { color: var(--vt-text-primary); font-weight: 600; }
.cm-crumb > .clinical-icon:last-child, .cm-crumb svg:last-child { color: var(--vt-text-muted); flex: none; }

/* Agrupamento hierárquico dos eventos informados por episódio-pai (drawer de cluster) */
.cm-epigroup { margin-bottom: 14px; }
.cm-epigroup__head {
    display: flex; align-items: center; gap: 8px; width: 100%;
    padding: 8px 10px; text-decoration: none;
    background: var(--vt-surface-alt, rgba(0, 0, 0, .02));
    border: 1px solid var(--vt-border); border-radius: var(--vt-radius-md);
    color: var(--vt-text-primary); font-weight: 600; font-size: .84rem;
}
.cm-epigroup__head:hover { border-color: var(--vt-info); }
.cm-epigroup__ico { display: inline-flex; color: var(--vt-info); flex: none; }
.cm-epigroup__title { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cm-epigroup__count {
    flex: none; min-width: 18px; height: 18px; padding: 0 5px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--vt-info); color: #fff; border-radius: 9px;
    font-size: .68rem; font-weight: 700; font-variant-numeric: tabular-nums;
}
.cm-epigroup__head > .clinical-icon:last-child, .cm-epigroup__head svg:last-child { color: var(--vt-text-muted); flex: none; }
.cm-epigroup__items { list-style: none; margin: 4px 0 0; padding: 0 0 0 12px; border-left: 2px solid var(--vt-border); }
.cm-epigroup__items li { display: block; }

/* ---------- Narrativa e evidências (doc 12 §29) ---------- */
.cm-narrative { background: var(--vt-surface); border: 1px solid var(--vt-border); border-radius: var(--vt-radius-lg); box-shadow: var(--vt-shadow-soft); padding: 16px 20px; }
.cm-narrative__head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.cm-narrative__title { font-size: .92rem; font-weight: 700; color: var(--vt-text-primary); }
.cm-narrative__win {
    display: inline-flex; align-items: center; gap: 5px; margin-left: auto;
    padding: 3px 9px; border-radius: 999px;
    background: var(--vt-info-soft, rgba(37, 99, 235, .08));
    color: var(--vt-info); font-size: .74rem; font-weight: 600;
    font-variant-numeric: tabular-nums; white-space: nowrap;
}
.cm-narrative__win svg { flex: none; }
.cm-narrative__text { font-size: .88rem; color: var(--vt-text-primary); line-height: 1.55; }
.cm-narrative__text p { margin: 0 0 8px; }
.cm-narrative__meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; align-items: center; }

/* ---------- Limitações (doc 12 §32) ---------- */
.cm-limits { display: flex; gap: 10px; align-items: flex-start; padding: 14px 18px; background: var(--vt-tint-warning); border: 1px solid rgba(255,159,10,.3); border-radius: var(--vt-radius-lg); }
.cm-limits__ico { color: var(--vt-warning); flex: none; }
.cm-limits__title { font-size: .84rem; font-weight: 700; color: #96560a; }
.cm-limits ul { margin: 6px 0 0; padding-left: 18px; font-size: .8rem; color: #7a4a08; }

/* ---------- Vazios / carregamento ---------- */
.cm-state { padding: 40px 24px; text-align: center; color: var(--vt-text-secondary); background: var(--vt-surface); border: 1px solid var(--vt-border); border-radius: var(--vt-radius-lg); }
.cm-state__actions { display: flex; gap: 8px; justify-content: center; margin-top: 14px; flex-wrap: wrap; }
.cm-skel { position: relative; overflow: hidden; background: var(--vt-surface-muted); border-radius: var(--vt-radius-lg); }
.cm-skel::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,.6), transparent); animation: cm-shimmer 1.3s infinite; }
@keyframes cm-shimmer { 100% { transform: translateX(100%); } }
.cm-skel--head { height: 96px; }
.cm-skel--summary { height: 92px; }
.cm-skel--map { height: 320px; }
@media (prefers-reduced-motion: reduce) { .cm-skel::after { animation: none; } }

/* ---------- Comparação entre períodos (doc 12 §20/§21) ---------- */
.cm-cmp-controls { display: flex; flex-wrap: wrap; gap: 12px 18px; align-items: flex-end; padding: 14px 18px; border-bottom: 1px solid var(--vt-border); }
.cm-cmp-range { display: inline-flex; align-items: center; gap: 6px; }
.cm-cmp-range span { color: var(--vt-text-muted); }
.cm-cmp-summary { padding: 10px 18px; font-size: .82rem; color: var(--vt-text-secondary); background: var(--vt-surface-muted); }
.cm-cmp-table { width: 100%; border-collapse: collapse; min-width: 560px; }
.cm-cmp-table th { text-align: left; font-size: .7rem; text-transform: uppercase; letter-spacing: .03em; color: var(--vt-text-muted); padding: 10px 14px; border-bottom: 1px solid var(--vt-border); }
.cm-cmp-table td { padding: 11px 14px; border-bottom: 1px solid var(--vt-border); font-size: .84rem; vertical-align: middle; }
.cm-cmp-sys { display: flex; align-items: center; gap: 8px; font-weight: 600; color: var(--vt-text-primary); }
.cm-cmp-change { font-weight: 600; }
.cm-cmp-change--improving { color: var(--vt-success); }
.cm-cmp-change--worsening { color: var(--vt-danger); }
.cm-cmp-change--stable { color: var(--vt-text-muted); }
.cm-cmp-change--inconclusive { color: var(--vt-text-muted); }
/* Pílulas de mudança tingidas (não cinza neutro): melhora=verde, piora=vermelho. */
.cm-chip.cm-cmp-change--improving { background: var(--vt-tint-success); color: #1c8b3e; border-color: transparent; }
.cm-chip.cm-cmp-change--worsening { background: var(--vt-tint-danger); color: #c0353a; border-color: transparent; }
.cm-chip.cm-cmp-change--stable { background: var(--vt-surface-muted); color: var(--vt-text-secondary); border-color: transparent; }
.cm-chip.cm-cmp-change--inconclusive { background: var(--vt-tint-neutral); color: var(--vt-text-muted); border-color: transparent; }
.cm-cmp-note { display: flex; gap: 8px; align-items: center; padding: 12px 18px; font-size: .76rem; color: var(--vt-text-muted); }

/* ---------- Antes/depois de evento (doc 12 §21) ---------- */
.cm-ba-submodes { margin-left: auto; }
.cm-ba-lead { display: flex; gap: 8px; align-items: center; padding: 10px 18px 0; font-size: .8rem; color: var(--vt-text-secondary); }
.cm-ba-event {
    display: flex; gap: 12px; align-items: center; margin: 14px 18px;
    padding: 12px 16px; border: 1px solid rgba(47,128,237,.3); background: var(--vt-tint-info);
    border-radius: var(--vt-radius-lg);
}
.cm-ba-event__star { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--vt-info); color: #fff; flex: none; }
.cm-ba-event__k { font-size: .68rem; text-transform: uppercase; letter-spacing: .04em; color: var(--vt-info); font-weight: 600; }
.cm-ba-event__title { font-size: 1.02rem; font-weight: 700; color: var(--vt-text-primary); }
.cm-ba-event__meta { font-size: .78rem; color: var(--vt-text-secondary); }

.cm-ba-grid { display: grid; grid-template-columns: 1fr 56px 1fr; gap: 8px 0; padding: 0 18px 14px; align-items: stretch; }
.cm-ba-head { padding: 8px 12px; font-size: .78rem; font-weight: 700; display: flex; flex-direction: column; }
.cm-ba-head span { font-size: .68rem; font-weight: 500; color: var(--vt-text-muted); }
.cm-ba-head--antes { color: #c0353a; background: var(--vt-tint-danger); border-radius: var(--vt-radius-md) 0 0 0; }
.cm-ba-head--depois { color: #1c8b3e; background: var(--vt-tint-success); border-radius: 0 var(--vt-radius-md) 0 0; text-align: right; align-items: flex-end; }
.cm-ba-head--mid { align-items: center; justify-content: center; color: var(--vt-text-muted); font-size: .68rem; }
.cm-ba-cell { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border-top: 1px solid var(--vt-border); }
.cm-ba-cell--antes { background: rgba(255,90,95,.05); }
.cm-ba-cell--depois { background: rgba(52,199,89,.05); flex-direction: row-reverse; }
.cm-ba-sys { display: inline-flex; align-items: center; gap: 7px; font-size: .82rem; font-weight: 600; color: var(--vt-text-primary); }
.cm-ba-chg { font-size: .72rem; font-weight: 600; }
.cm-ba-arrow { display: grid; place-items: center; font-size: 1.1rem; font-weight: 700; border-top: 1px solid var(--vt-border); }

.cm-ba-foot { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 0 18px 16px; }
.cm-ba-resumo { padding: 14px 16px; border: 1px solid var(--vt-border); border-radius: var(--vt-radius-lg); background: var(--vt-surface); }
.cm-ba-resumo__title { font-size: .84rem; font-weight: 700; color: var(--vt-text-primary); margin-bottom: 8px; }
.cm-ba-resumo__stats { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: .82rem; font-weight: 600; }
.cm-ba-evid { margin-top: 10px; display: flex; align-items: center; gap: 6px; font-size: .74rem; color: var(--vt-text-muted); }
.cm-ba-causal { display: flex; gap: 10px; align-items: flex-start; padding: 14px 16px; background: var(--vt-tint-warning); border: 1px solid rgba(255,159,10,.3); border-radius: var(--vt-radius-lg); color: #7a4a08; font-size: .82rem; }
.cm-ba-causal strong { color: #96560a; }

@media (max-width: 760px) {
    .cm-ba-grid { grid-template-columns: 1fr; }
    .cm-ba-head--mid, .cm-ba-arrow { display: none; }
    .cm-ba-cell--depois { flex-direction: row; }
    .cm-ba-foot { grid-template-columns: 1fr; }
}

/* ---------- Linha do tempo de eventos informados (comparação) ---------- */
.cm-tl { border: 1px solid var(--vt-border); border-radius: var(--vt-radius-lg); margin: 12px 18px 4px; background: var(--vt-surface); }
.cm-tl__head { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--vt-border); font-size: .82rem; font-weight: 600; color: var(--vt-text-secondary); }
/* overflow-y: hidden explícito: mantém só o scroll horizontal (navegação da linha do tempo) e impede que
   o eixo Y vire "auto" (rótulos longos quebram em várias linhas e não devem gerar barra vertical). */
.cm-tl__scroll { overflow-x: auto; overflow-y: hidden; }
/* Altura suficiente para os rótulos (data + marcador + rótulo em até ~5 linhas) caberem sem cortar. */
.cm-tl__track { position: relative; height: 144px; min-width: 640px; margin: 0 46px; }
.cm-tl__line { position: absolute; left: 0; right: 0; top: 34px; height: 2px; background: var(--vt-border-strong); }
.cm-tl__pt { position: absolute; top: 0; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 3px; background: none; border: none; cursor: pointer; width: 92px; padding: 3px 2px; border-radius: 10px; }
.cm-tl__date { font-size: .66rem; color: var(--vt-text-muted); font-weight: 600; }
/* Marco = disco com ícone colorido por tipo de acontecimento. */
.cm-tl__dot { width: 24px; height: 24px; border-radius: 50%; background: var(--vt-surface); border: 2px solid var(--vt-border-strong); margin: 2px 0; display: grid; place-items: center; color: var(--vt-text-muted); }
.cm-tl__dot--blue { border-color: var(--vt-info); color: var(--vt-info); background: var(--vt-tint-info); }
.cm-tl__dot--purple { border-color: #7b61ff; color: #7b61ff; background: rgba(123,97,255,.12); }
.cm-tl__dot--orange { border-color: var(--vt-warning); color: var(--vt-warning); background: var(--vt-tint-warning); }
.cm-tl__dot--red { border-color: var(--vt-danger); color: var(--vt-danger); background: var(--vt-tint-danger); }
.cm-tl__dot--teal { border-color: var(--vt-teal); color: var(--vt-teal); background: var(--vt-tint-teal); }
.cm-tl__dot--neutral { border-color: var(--vt-border-strong); color: var(--vt-text-muted); background: var(--vt-surface); }
.cm-tl__lbl { font-size: .66rem; color: var(--vt-text-secondary); text-align: center; line-height: 1.15; max-width: 92px; display: -webkit-box; -webkit-line-clamp: 5; line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
/* Evento selecionado: caixa azul-clara atrás da coluna + disco azul cheio + rótulo azul-negrito. */
.cm-tl__pt.is-active { background: rgba(47,128,237,.09); }
.cm-tl__pt.is-active .cm-tl__dot { background: var(--vt-info); border-color: var(--vt-info); color: #fff; box-shadow: 0 0 0 4px var(--vt-tint-info); }
.cm-tl__pt.is-active .cm-tl__date, .cm-tl__pt.is-active .cm-tl__lbl { color: var(--vt-info); font-weight: 700; }
.cm-tl__pt:hover .cm-tl__dot { border-color: var(--vt-info); }

/* ---------- 3 colunas Antes | Evento | Depois com linhas por categoria ---------- */
.cm-ba2 { display: grid; grid-template-columns: minmax(0,1fr) 188px minmax(0,1fr); column-gap: 0; padding: 16px 18px; min-width: 780px; }
/* Antes/Depois são dois CARDS arredondados; subgrid alinha as linhas de categoria entre eles. */
.cm-ba2__card { grid-row: 1 / -1; display: grid; grid-template-rows: subgrid; border: 1px solid var(--vt-border); border-radius: 16px; overflow: hidden; }
/* Corpo do card quase transparente (só uma insinuação de cor); o TOM forte fica no cabeçalho. */
.cm-ba2__card--antes { grid-column: 1; background: rgba(255,90,95,.015); border-color: rgba(255,90,95,.22); }
.cm-ba2__card--depois { grid-column: 3; background: rgba(52,199,89,.015); border-color: rgba(52,199,89,.22); }
.cm-ba2__cardhead { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; padding: 13px 16px 11px; font-size: 1.06rem; font-weight: 700; }
.cm-ba2__cardhead > span { font-size: .73rem; font-weight: 500; color: var(--vt-text-muted); }
.cm-ba2__cardhead .cm-ba2__months { font-weight: 600; }
.cm-ba2__cardhead--antes { color: #c0353a; background: rgba(255,90,95,.10); }
.cm-ba2__cardhead--depois { color: #1c8b3e; background: rgba(52,199,89,.10); }
.cm-ba2__row { display: flex; gap: 12px; padding: 13px 16px; border-top: 1px solid rgba(16,20,24,.06); }
.cm-ba2__rlabel { display: flex; align-items: flex-start; gap: 9px; width: 148px; flex: none; font-size: .82rem; font-weight: 600; color: var(--vt-text-primary); line-height: 1.25; }
.cm-ba2__ico { width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center; flex: none; }
.cm-ba2__ico--red { background: var(--vt-tint-danger); color: var(--vt-danger); }
.cm-ba2__ico--purple { background: rgba(123,97,255,.14); color: #7b61ff; }
.cm-ba2__ico--blue { background: var(--vt-tint-info); color: var(--vt-info); }
.cm-ba2__ico--neutral { background: var(--vt-surface-muted); color: var(--vt-text-secondary); }
.cm-ba2__rbody { display: flex; flex-direction: column; gap: 3px; font-size: .82rem; min-width: 0; }
.cm-ba2__line { color: var(--vt-text-primary); line-height: 1.35; }
.cm-ba2__line:first-child { font-weight: 600; }
.cm-ba2__line.is-bullet { font-weight: 400; }
.cm-ba2__line.is-bullet::before { content: "•  "; color: var(--vt-text-muted); }
.cm-ba2__toarrow { color: var(--vt-text-muted); font-weight: 700; flex: none; margin-top: 1px; }
.cm-ba2__badge { align-self: flex-start; margin-top: 5px; font-size: .7rem; font-weight: 600; padding: 2px 9px; border-radius: var(--vt-radius-pill); }
.cm-ba2__badge--in { background: var(--vt-tint-success); color: #1c8b3e; }
.cm-ba2__badge--out { background: var(--vt-tint-danger); color: #c0353a; }

.cm-ba2__event { grid-column: 2; grid-row: 1 / -1; display: flex; flex-direction: column; align-items: center; padding: 6px 12px; }
.cm-ba2__ev-card { background: var(--vt-surface); border: 1px solid var(--vt-border); border-radius: 14px; padding: 14px 12px; text-align: center; box-shadow: var(--vt-shadow-soft); width: 100%; }
.cm-ba2__star { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--vt-info); color: #fff; margin: 0 auto 6px; }
.cm-ba2__ev-k { font-size: .66rem; text-transform: uppercase; letter-spacing: .04em; color: var(--vt-info); font-weight: 600; }
.cm-ba2__ev-t { font-size: .96rem; font-weight: 700; color: var(--vt-text-primary); line-height: 1.2; }
.cm-ba2__ev-d { font-size: .8rem; color: var(--vt-text-secondary); }
.cm-ba2__ev-m { font-size: .72rem; color: var(--vt-text-muted); margin-top: 2px; }
.cm-ba2__ev-flow { flex: 1; width: 2px; background: var(--vt-info); margin-top: 4px; position: relative; min-height: 64px; }
.cm-ba2__ev-arrows { position: absolute; top: 40%; left: 50%; transform: translate(-50%, -50%); display: flex; gap: 8px; white-space: nowrap; }
.cm-ba2__ar { font-size: .72rem; font-weight: 600; padding-top: 4px; border-top: 1.6px dashed currentColor; }
.cm-ba2__ar--a { color: #c0353a; }
.cm-ba2__ar--d { color: #1c8b3e; }
.cm-ba2__ev-tip { position: absolute; bottom: -1px; left: 50%; transform: translateX(-50%); width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 7px solid var(--vt-info); }

.cm-ba2-foot { display: grid; grid-template-columns: 1fr; gap: 12px; padding: 4px 18px 16px; align-items: stretch; }
.cm-ba2-resumo { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; }
.cm-ba2-resumo .cm-ba-resumo__title { grid-column: 1 / -1; font-size: .84rem; font-weight: 700; color: var(--vt-text-primary); margin: 0; }
.cm-ba2-card { display: flex; flex-direction: column; gap: 3px; padding: 12px 14px; border: 1px solid var(--vt-border); border-radius: var(--vt-radius-lg); background: var(--vt-surface); }
.cm-ba2-card__k { font-size: .72rem; color: var(--vt-text-muted); }
.cm-ba2-card__v { font-size: 1.15rem; font-weight: 700; color: var(--vt-text-primary); }
.cm-ba2-card__s { font-size: .72rem; color: var(--vt-text-muted); }

/* Layout 2 colunas: bloco antes/depois (esquerda) + coluna Resumo (direita) */
.cm-ba-layout { display: grid; grid-template-columns: minmax(0,1fr) 330px; gap: 16px; padding: 14px 18px; align-items: start; }
.cm-ba-layout__main { min-width: 0; overflow-x: auto; }
.cm-ba-resumo-col { display: flex; flex-direction: column; gap: 10px; }
.cm-ba-resumo-col .cm-ba-resumo__title { font-size: .92rem; font-weight: 700; color: var(--vt-text-primary); text-align: center; margin: 2px 0 4px; }
.cm-ba2-card--row { flex-direction: row; align-items: center; gap: 10px; }
.cm-ba2-card__ico { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; flex: none; background: var(--vt-surface-muted); color: var(--vt-text-secondary); }
.cm-ba2-card__ico--improving { background: var(--vt-tint-success); color: #1c8b3e; }
.cm-ba2-card__ico--worsening { background: var(--vt-tint-danger); color: #c0353a; }
.cm-ba2-card__ico--blue { background: var(--vt-tint-info); color: var(--vt-info); }
.cm-ba2-card__ico--stable, .cm-ba2-card__ico--inconclusive, .cm-ba2-card__ico--neutral { background: var(--vt-surface-muted); color: var(--vt-text-secondary); }
.cm-ba2-card__body { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.cm-ba2-card__t { font-size: .86rem; font-weight: 600; color: var(--vt-text-primary); }
.cm-ba2-card--row .cm-chip { margin-left: auto; flex: none; }
@media (max-width: 1000px) { .cm-ba-layout { grid-template-columns: 1fr; } }

/* Divisórias tingidas por painel (para o painel ler como um tom só) */
.cm-ba2__card--antes .cm-ba2__row { border-top-color: rgba(192,53,58,.13); }
.cm-ba2__card--depois .cm-ba2__row { border-top-color: rgba(28,139,62,.13); }

/* Holders dos ícones das evidências de suporte */
.cm-evsupport__ico { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; flex: none; background: var(--vt-surface-muted); border: 1px solid var(--vt-border); color: var(--vt-text-secondary); }
.cm-evsupport__ico--blue { background: var(--vt-tint-info); border-color: transparent; color: var(--vt-info); }
.cm-evsupport__ico--warn { background: var(--vt-tint-warning); border-color: transparent; color: var(--vt-warning); }
.cm-evsupport__ico .vt-ico { color: inherit; }

@media (max-width: 900px) {
    .cm-ba2-foot { grid-template-columns: 1fr; }
}

/* Controles do cabeçalho da linha do tempo (Exibir + zoom) */
.cm-tl__actions { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; }
.cm-tl__actions .cm-viewmodes { padding: 2px; }
.cm-tl__actions .cm-viewmode { padding: 4px 10px; font-size: .72rem; }
.cm-tl__exibir { font-size: .72rem; color: var(--vt-text-muted); }
.cm-tl__zoom { width: 26px; height: 26px; display: grid; place-items: center; border-radius: var(--vt-radius-sm); border: 1px solid var(--vt-border); background: var(--vt-surface); color: var(--vt-text-secondary); cursor: pointer; }
.cm-tl__zoom:hover { border-color: var(--vt-border-strong); color: var(--vt-text-primary); }
.cm-tl__info { color: var(--vt-text-muted); display: inline-flex; }

/* Evidências que sustentam a comparação (Piece D) */
.cm-evsupport { margin: 0 18px 16px; padding: 14px 16px; border: 1px solid var(--vt-border); border-radius: var(--vt-radius-lg); background: var(--vt-surface-muted); }
.cm-evsupport__title { display: flex; align-items: center; gap: 8px; font-size: .82rem; font-weight: 700; color: var(--vt-text-secondary); margin-bottom: 10px; }
.cm-evsupport__items { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; }
.cm-evsupport__i { display: flex; align-items: flex-start; gap: 8px; }
.cm-evsupport__i .vt-ico { flex: none; }
.cm-evsupport__i strong { display: block; font-size: .84rem; color: var(--vt-text-primary); font-weight: 600; }
.cm-evsupport__i span { font-size: .74rem; color: var(--vt-text-muted); }

/* ---------- Exportação: impressão (esconde o cromo interativo) ---------- */
@media print {
    .cm-head__actions, .cm-controls, .cm-navrow, .cm-drawer, .cm-drawer-scrim, .cm-cmp-controls { display: none !important; }
    .cm-map__scroll { overflow: visible !important; }
    .cm-page { gap: 10px; }
    .cm-map, .cm-narrative, .cm-summary, .cm-head, .cm-limits { box-shadow: none; break-inside: avoid; }
}

/* ---------- Responsivo (doc 12 §36) ---------- */
@media (max-width: 1080px) {
    .cm-summary { grid-template-columns: repeat(3, 1fr); }
    .cm-summary .cm-insights { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
    .cm-head__actions { width: 100%; margin-left: 0; }
    .cm-summary { grid-template-columns: repeat(2, 1fr); }
    .cm-map__grid { min-width: 560px; }
    .cm-drawer { width: 100vw; }
    /* No mobile a página prioriza feed vertical: as trilhas ainda rolam horizontalmente dentro do card. */
    .cm-lane { --cm-label-w: 140px; }
    .cm-axis, .cm-axis-years { margin-left: 140px; }
    .cm-navrow { --cm-label-w: 140px; }
    .cm-eplayer { left: 140px; }
}