/* Target360 · estilos dos gráficos ilustrativos
   O tema vem do contêiner: .t-light (fundo claro) ou .t-dark (fundo escuro) */

.t-light {
  --ch-txt: #13203f; --ch-mute: #6b7591; --ch-track: #efe9e0; --ch-axis: #d9d1c4; --ch-zone: rgba(242,107,29,.06);
  --ch-c1: #13203f; --ch-c2: #3b6cb7; --ch-c3: #7f9ccc; --ch-c4: #b9c8e2; --ch-c5: #f26b1d;
  --ch-in-dark: #fff; --ch-in-light: #13203f;
  --ch-score: #13203f; --ch-slope-mute: #bdb4a7; --ch-row: #efe9e0;
}
.t-dark {
  --ch-txt: #f4efe8; --ch-mute: #8e98b6; --ch-track: rgba(255,255,255,.06); --ch-axis: rgba(255,255,255,.14); --ch-zone: rgba(242,107,29,.08);
  --ch-c1: #e9eef8; --ch-c2: #7f9ccc; --ch-c3: #4f6ea8; --ch-c4: #2c4378; --ch-c5: #f26b1d;
  --ch-in-dark: #0a1430; --ch-in-light: #fff;
  --ch-score: #1c2a52; --ch-slope-mute: #4b5679; --ch-row: rgba(255,255,255,.08);
}

.ch { width: 100%; height: auto; font-family: var(--f-sans); overflow: visible; }
.ch-lbl { fill: var(--ch-txt); font-size: 13px; font-weight: 500; }
.ch-lbl.b { font-weight: 700; }
.ch-num { font-weight: 400; fill: var(--ch-mute); }
.ch-lbl.b .ch-num { fill: var(--ch-c5); font-weight: 700; }
.ch-head { fill: var(--ch-txt); font-size: 13px; font-weight: 700; letter-spacing: .02em; }
.ch-leg { fill: var(--ch-mute); font-size: 11px; }
.ch-track { fill: var(--ch-track); }
.ch-axis { stroke: var(--ch-axis); stroke-width: 1; }
.ch-zone { fill: var(--ch-zone); }
.ch-c1 { fill: var(--ch-c1); } .ch-c2 { fill: var(--ch-c2); } .ch-c3 { fill: var(--ch-c3); }
.ch-c4 { fill: var(--ch-c4); } .ch-c5 { fill: var(--ch-c5); }
.ch-in { font-size: 10.5px; font-weight: 600; }
.ch-in1, .ch-in2, .ch-in5 { fill: var(--ch-in-light); }
.t-light .ch-in1, .t-light .ch-in2, .t-light .ch-in5 { fill: #fff; }
.t-light .ch-in3, .t-light .ch-in4 { fill: #13203f; }
.t-dark .ch-in1 { fill: #0a1430; }
.t-dark .ch-in2, .t-dark .ch-in3, .t-dark .ch-in4, .t-dark .ch-in5 { fill: #fff; }
.ch-score { fill: var(--ch-score); }
.ch-score-hi { fill: var(--ch-c5); }
.ch-score-t { fill: #fff; font-size: 13px; font-weight: 700; }
.ch-delta { font-size: 12px; font-weight: 700; }
.ch-delta.up { fill: #3b6cb7; } .t-dark .ch-delta.up { fill: #9fb8e6; }
.ch-delta.down { fill: var(--ch-c5); }

/* barras crescem */
.ch-grow { transform-box: fill-box; transform-origin: left center; transform: scaleX(0); transition: transform 1.2s var(--ease); transition-delay: calc(var(--i) * .08s); }
.is-in .ch-grow { transform: scaleX(1); }

/* inclinações */
.ch-slope { stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: var(--len); stroke-dashoffset: var(--len); transition: stroke-dashoffset 1.2s var(--ease); transition-delay: calc(var(--i) * .1s); }
.ch-slope.hl { stroke: var(--ch-c5); stroke-width: 3; }
.ch-slope.mute { stroke: var(--ch-slope-mute); }
.is-in .ch-slope { stroke-dashoffset: 0; }
.ch-dot.hl { fill: var(--ch-c5); }
.ch-dot.mute { fill: var(--ch-slope-mute); }
.ch-dot.end { opacity: 0; transition: opacity .4s; transition-delay: calc(1s + var(--i) * .1s); }
.is-in .ch-dot.end { opacity: 1; }
.ch-err { stroke-width: 2; }
.ch-err.hl { stroke: var(--ch-c5); }
.ch-err.mute { stroke: var(--ch-slope-mute); }

/* registro de previsões */
.reg { display: grid; grid-template-columns: 1fr 180px; gap: 24px; align-items: center; }
.reg-table-wrap { overflow-x: auto; }
.reg-table { width: 100%; border-collapse: collapse; font-size: 13.5px; color: var(--ch-txt); }
.reg-table th { text-align: left; font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; font-weight: 600; padding: 10px 10px; color: var(--ch-mute); border-bottom: 1px solid var(--ch-axis); }
.reg-table td { padding: 12px 10px; border-bottom: 1px solid var(--ch-row); white-space: nowrap; }
.reg-table td:nth-child(2) { white-space: normal; min-width: 170px; }
.reg-table .mono { font-family: var(--f-mono); color: var(--ch-mute); font-size: 12px; }
.reg-table .b { font-weight: 700; }
.pill { display: inline-block; font-size: 11.5px; font-weight: 600; padding: 4px 10px; border-radius: 999px; }
.pill.ok { background: rgba(31,174,91,.14); color: #1b8c4b; }
.t-dark .pill.ok { color: #5fd794; }
.pill.miss { background: rgba(242,107,29,.14); color: var(--orange); }
.reg-donut { position: relative; text-align: center; }
.reg-donut svg { width: 150px; margin: 0 auto; }
.d-track { fill: none; stroke: var(--ch-track); stroke-width: 12; }
.d-val { fill: none; stroke: var(--ch-c5); stroke-width: 12; stroke-linecap: round; stroke-dasharray: var(--c); stroke-dashoffset: var(--c); transition: stroke-dashoffset 1.4s var(--ease); }
.is-in .d-val { stroke-dashoffset: var(--v); }
.reg-donut-t { position: absolute; top: 0; left: 0; right: 0; height: 150px; display: grid; place-content: center; color: var(--ch-txt); }
.reg-donut-t strong { font-family: var(--f-serif); font-size: 34px; line-height: 1; font-weight: 600; }
.reg-donut-t span { font-size: 11px; color: var(--ch-mute); }
.reg-donut p { font-size: 12.5px; color: var(--ch-mute); margin: 10px 0 0; }
@media (max-width: 640px) { .reg { grid-template-columns: 1fr; } }

/* No celular, o gráfico mantém a leitura e rola na horizontal */
@media (max-width: 640px) {
  [data-chart="insight"], [data-chart="projecao"] { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-inline: -6px; padding-bottom: 6px; }
  [data-chart="insight"] .ch, [data-chart="projecao"] .ch { min-width: 560px; }
}

/* ---------- Gráficos do relatório de exemplo (.cx) ---------- */
.cx { width: 100%; height: auto; font-family: var(--f-sans); overflow: visible; }
.cx-t { fill: #13203f; font-size: 13px; }
.cx-t.b { font-weight: 700; }
.cx-t.sm { font-size: 11px; fill: #4a5574; }
.cx-t.or { fill: #f26b1d; }
.cx-ax { fill: #6b7591; font-size: 11px; }
.cx-cap { fill: #6b7591; font-size: 10.5px; font-weight: 600; letter-spacing: .14em; }
.cx-cap.or { fill: #f26b1d; } .cx-cap.bl { fill: #2a5aa0; }
.cx-grid { stroke: #ece5da; stroke-width: 1; }
.cx-event { stroke: #f26b1d; stroke-width: 1.2; stroke-dasharray: 3 4; opacity: .6; }
.cx-evn { fill: #fff; font-size: 11px; font-weight: 700; }
.cx-in { fill: #fff; font-size: 10.5px; font-weight: 600; }
.cx-in.dk { fill: #13203f; }
.cx-multi { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.cx-mini { margin: 0; background: #faf7f2; border-radius: 16px; padding: 16px 16px 6px; }
.cx-mini figcaption { display: grid; gap: 6px; margin-bottom: 6px; }
.cx-mini figcaption b { font-size: 15px; color: #13203f; }
.cx-tag { justify-self: start; font-size: 10px; font-weight: 700; letter-spacing: .08em; color: #fff; padding: 3px 9px; border-radius: 999px; background: #3d4660; }
.cx-tag.up { background: #2a5aa0; } .cx-tag.hot { background: #f26b1d; } .cx-tag.flat { background: #8c95ab; }
@media (max-width: 640px) {
  .cx-multi { grid-template-columns: 1fr; }
  [data-cx]:not([data-cx="ciclo"]) { overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 6px; }
  [data-cx="sov"] .cx, [data-cx="ifp"] .cx, [data-cx="redes"] .cx, [data-cx="proj"] .cx, [data-cx="onda"] .cx, [data-cx="matriz"] .cx, [data-cx="cenarios"] .cx, [data-cx="radar"] .cx { min-width: 600px; }
}