/* Estilos compartilhados dos dashboards da Chora API (/dashboards/). Carregado depois do CSS do site. */
/* ============================================================
   DASHBOARD — página de um dashboard
   ============================================================ */
:root {
  --dash-alta: #f75800;        /* validado no fundo escuro (faixa de luminosidade do modo escuro) */
  --dash-queda: #3987e5;
  --dash-cinza: #666666;
  --dash-grade: rgba(255, 255, 255, 0.08);
  --dash-texto-1: #ffffff;
  --dash-texto-2: #8a8a8a;
  --dash-superficie: #0a0a0a;
  --dash-neutro: #262626;
}
[data-theme="white"] {
  --dash-alta: #ff5b00;
  --dash-queda: #2a78d6;
  --dash-cinza: #888888;
  --dash-grade: rgba(0, 0, 0, 0.08);
  --dash-texto-1: #0a0a0a;
  --dash-texto-2: #666666;
  --dash-superficie: #ffffff;
  --dash-neutro: #f0efec;
}

#dash.container { max-width: 1320px; }
/* no tema escuro o cinza 'muted' do site fica em ~3,4:1; os rótulos pequenos do dashboard precisam de 4,5:1 */
:root:not([data-theme="white"]) #dash { --text-muted: #8f8f8f; }
#dash { padding-top: calc(var(--space-4xl) + 24px); padding-bottom: var(--space-3xl); }
.dash-head { max-width: 820px; margin-bottom: var(--space-xl); }
.dash-head .article-title { margin: var(--space-sm) 0; }
.dash-sub { color: var(--text-secondary); font-size: 1.05rem; line-height: 1.6; }
.dash-atualizado { margin-top: var(--space-xs); font-family: 'JetBrains Mono', monospace; font-size: 0.7rem; color: var(--text-muted); letter-spacing: 0.04em; }

/* filtros: uma linha só, acima de tudo */
.dash-filtros { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm) var(--space-md); padding: var(--space-md) 0; border-top: 1px solid var(--border-subtle); border-bottom: 1px solid var(--border-subtle); }
.seg { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 3px; border: 1px solid var(--border-normal); border-radius: var(--radius-full); background: var(--rev-surface-1); }
.seg button { font: 500 0.8rem 'Outfit', sans-serif; color: var(--text-secondary); background: transparent; border: 0; border-radius: var(--radius-full); padding: 6px 12px; cursor: pointer; transition: color .2s, background .2s; }
.seg button:hover { color: var(--text-primary); }
.seg button[aria-pressed="true"] { background: var(--rev-orange); color: #000; font-weight: 700; }
.seg button:focus-visible, .dash-periodo input:focus-visible, .dash-moeda select:focus-visible, .btn-aplicar:focus-visible, .ranking li:focus-visible, .grafico:focus-visible, .dash-tabela summary:focus-visible, .btn-link:focus-visible {
  outline: none; box-shadow: 0 0 0 3px rgba(255, 91, 0, .35); border-color: rgba(255, 91, 0, .5);
}
.dash-periodo { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs); }
.dash-periodo label, .dash-moeda { display: inline-flex; align-items: center; gap: 6px; font-size: 0.8rem; color: var(--text-muted); }
.dash-periodo input, .dash-moeda select { font: 500 0.85rem 'Outfit', sans-serif; color: var(--text-primary); background: var(--rev-surface-1); border: 1px solid var(--border-normal); border-radius: var(--radius-sm); padding: 6px 8px; color-scheme: light dark; }
.btn-aplicar { font: 700 0.8rem 'Outfit', sans-serif; background: var(--rev-orange); color: #000; border: 0; border-radius: var(--radius-full); padding: 8px 16px; cursor: pointer; transition: background .2s; }
.btn-aplicar:hover { background: var(--rev-orange-bright); }
.btn-link { font: inherit; color: var(--rev-orange-text); background: none; border: 0; padding: 0; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.dash-aviso { min-height: 1.4em; margin: var(--space-sm) 0 var(--space-md); font-size: 0.85rem; color: var(--text-secondary); }
.dash-aviso[data-tipo="erro"] { color: #d93a2b; }
[data-theme="white"] .dash-aviso[data-tipo="erro"] { color: #b42318; }

/* refetch: mantém o render anterior esmaecido, sem piscar */
.dash-carregando .dash-kpis, .dash-carregando .dash-card { opacity: .45; transition: opacity .2s; }

/* indicadores */
.dash-kpis { display: grid; grid-template-columns: 1.6fr repeat(5, 1fr); gap: var(--space-sm); margin-bottom: var(--space-md); }
.kpi { display: flex; flex-direction: column; gap: 4px; padding: var(--space-md); background: var(--rev-surface-1); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); min-width: 0; }
.kpi-rot { font-family: 'JetBrains Mono', monospace; font-size: 0.62rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); }
.kpi-val { white-space: nowrap; font-family: 'Sora', sans-serif; font-size: 1.45rem; font-weight: 700; letter-spacing: -0.02em; color: var(--text-primary); line-height: 1.15; }
.kpi-val-menor { font-size: 1.05rem; white-space: normal; }
.kpi-hero .kpi-val { font-size: clamp(2rem, 3vw, 2.6rem); }
.kpi-val[data-tendencia="alta"]::before { content: "▲ "; font-size: .55em; vertical-align: .25em; color: var(--dash-alta); }
.kpi-val[data-tendencia="queda"]::before { content: "▼ "; font-size: .55em; vertical-align: .25em; color: var(--dash-queda); }
.kpi-nota { font-size: 0.75rem; color: var(--text-muted); line-height: 1.4; }

/* cartões */
.dash-card { background: var(--rev-surface-1); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: var(--space-lg); margin-bottom: var(--space-md); min-width: 0; }
.dash-card-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: var(--space-sm) var(--space-lg); margin-bottom: var(--space-md); }
.dash-card h2 { font-family: 'Sora', sans-serif; font-size: 1.05rem; font-weight: 700; color: var(--text-primary); letter-spacing: -0.01em; }
.dash-card-sub { font-size: 0.8rem; color: var(--text-muted); margin-top: 2px; }
.dash-dupla { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-md); }
.dash-dupla > .dash-card { margin-bottom: var(--space-md); }
.dash-nota { font-size: 0.82rem; color: var(--text-secondary); margin-top: var(--space-sm); }
.legenda { display: flex; flex-wrap: wrap; gap: var(--space-md); list-style: none; padding: 0; margin: 0; font-size: 0.75rem; color: var(--text-secondary); }
.legenda li { display: inline-flex; align-items: center; gap: 6px; }
.chave { display: inline-block; width: 16px; height: 2px; border-radius: 2px; }
.chave.caixa { width: 10px; height: 10px; border-radius: 2px; }
.chave-alta { background: var(--dash-alta); }
.chave-queda { background: var(--dash-queda); }

/* gráficos */
.grafico { position: relative; width: 100%; min-height: 120px; border-radius: var(--radius-sm); }
.grafico svg { display: block; overflow: visible; }
.eixo-txt { font: 500 11px 'JetBrains Mono', monospace; fill: var(--dash-texto-2); font-variant-numeric: tabular-nums; }
.rotulo { font: 500 11px 'Outfit', sans-serif; fill: var(--dash-texto-2); }
.rotulo-forte { font-weight: 700; fill: var(--dash-texto-1); font-size: 12px; }
.rotulo-fraco { fill: var(--dash-texto-1); }
.vazio { padding: var(--space-xl) 0; text-align: center; color: var(--text-muted); font-size: 0.9rem; }
.dica { position: absolute; pointer-events: none; z-index: 5; min-width: 150px; padding: 8px 10px; background: var(--dash-superficie); border: 1px solid var(--border-normal); border-radius: var(--radius-sm); box-shadow: var(--shadow-soft); transform: translateY(-4px); }
.dica-titulo { font-family: 'JetBrains Mono', monospace; font-size: 0.65rem; color: var(--text-muted); margin-bottom: 4px; }
.dica-linha { display: flex; align-items: center; gap: 6px; font-size: 0.78rem; color: var(--text-secondary); line-height: 1.5; }
.dica-linha strong { color: var(--text-primary); font-variant-numeric: tabular-nums; }
.dica-chave { width: 12px; height: 2px; border-radius: 2px; flex-shrink: 0; }

/* extremos (maiores altas/quedas) */
.extremos { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-md); margin-top: var(--space-md); }
.extremos h4 { font-family: 'JetBrains Mono', monospace; font-size: 0.62rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 4px; }
.extremos ul { list-style: none; padding: 0; margin: 0; }
.extremos li { display: flex; justify-content: space-between; gap: var(--space-sm); font-size: 0.8rem; color: var(--text-secondary); padding: 3px 0; border-bottom: 1px solid var(--border-subtle); font-variant-numeric: tabular-nums; }
.extremos li strong { color: var(--text-primary); }
.extremos .alta li strong::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 2px; background: var(--dash-alta); margin-right: 6px; }
.extremos .queda li strong::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 2px; background: var(--dash-queda); margin-right: 6px; }

/* moedas + ranking */
.dash-moedas { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: var(--space-lg); align-items: start; }
.ranking { list-style: none; padding: 0; margin: 0; }
.ranking li { display: grid; grid-template-columns: 36px 1fr 64px; align-items: center; gap: 8px; padding: 5px 6px; border-radius: var(--radius-sm); font-size: 0.78rem; cursor: default; transition: background .15s; }
.ranking li:hover, .ranking li.ativo { background: var(--rev-surface-3); }
.ranking li.selecionada .rk-sigla { color: var(--rev-orange-text); }
.rk-sigla { font-family: 'JetBrains Mono', monospace; font-weight: 600; color: var(--text-primary); }
.rk-trilho { position: relative; height: 10px; }
.rk-trilho::before { content: ""; position: absolute; left: 50%; top: -2px; bottom: -2px; width: 1px; background: var(--border-normal); }
.rk-barra { position: absolute; top: 0; height: 10px; border-radius: 2px; }
.rk-barra.alta { background: var(--dash-alta); }
.rk-barra.queda { background: var(--dash-queda); }
.rk-valor { text-align: right; color: var(--text-secondary); font-variant-numeric: tabular-nums; }

/* mapa de calor */
.escala { display: inline-flex; align-items: center; gap: 8px; font-size: 0.72rem; color: var(--text-muted); }
.escala-barra { display: inline-block; width: 120px; height: 8px; border-radius: 4px; background: linear-gradient(90deg, var(--dash-queda), var(--dash-neutro), var(--dash-alta)); }
.calor { width: 100%; border-collapse: separate; border-spacing: 2px; font-variant-numeric: tabular-nums; }
.calor th { font: 600 0.62rem 'JetBrains Mono', monospace; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; padding: 4px; text-align: center; }
.calor tbody th { text-align: left; }
.calor td { height: 30px; min-width: 40px; text-align: center; font-size: 0.72rem; border-radius: 3px; color: var(--text-primary); background: var(--dash-neutro); }
.calor td.alta { background: color-mix(in srgb, var(--dash-alta) calc(var(--int) * 100%), var(--dash-neutro)); }
.calor td.queda { background: color-mix(in srgb, var(--dash-queda) calc(var(--int) * 100%), var(--dash-neutro)); }
.calor td.alta.forte { color: #0a0a0a; }
.calor td.queda.forte { color: #ffffff; }
.calor td.calor-ano { background: transparent; font-weight: 700; color: var(--text-secondary); min-width: 56px; }

/* tabela */
.dash-tabela summary { cursor: pointer; font-family: 'Sora', sans-serif; font-weight: 700; font-size: 0.95rem; color: var(--text-primary); border-radius: var(--radius-sm); }
.dash-tabela[open] summary { margin-bottom: var(--space-md); }
.dash-tabela-acoes { margin-bottom: var(--space-sm); }
.dash-tabela .table-wrap { max-height: 420px; overflow: auto; }
.dash-tabela td:not(:first-child), .dash-tabela th:not(:first-child) { text-align: right; font-variant-numeric: tabular-nums; }

/* como foi feito */
.dash-como { max-width: 820px; margin-top: var(--space-2xl); }
.dash-como pre code { white-space: pre; }

@media (max-width: 1024px) {
  .dash-kpis { grid-template-columns: repeat(3, 1fr); }
  .kpi-hero { grid-column: 1 / -1; }
}
@media (max-width: 768px) {
  .dash-dupla, .dash-moedas { grid-template-columns: minmax(0, 1fr); }
  .dash-kpis { grid-template-columns: repeat(2, 1fr); }
  .kpi-hero .kpi-val { font-size: 2.1rem; }
  .dash-card { padding: var(--space-md); }
  .calor td { min-width: 34px; font-size: 0.62rem; }
}

/* ============================================================
   DASHBOARDS — listagem
   ============================================================ */
#lista-dash { padding-top: calc(var(--space-4xl) + 24px); padding-bottom: var(--space-4xl); }
.dash-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: var(--space-lg); }
.dash-item { display: flex; flex-direction: column; background: var(--rev-surface-1); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); overflow: hidden; transition: border-color .25s, box-shadow .25s; }
.dash-item:hover { border-color: var(--border-hover); box-shadow: var(--shadow-card-hover); }
.dash-item-img img { display: block; width: 100%; height: auto; }
.dash-item-corpo { display: flex; flex-direction: column; gap: var(--space-xs); padding: var(--space-lg); }
.dash-item-tag { font-family: 'JetBrains Mono', monospace; font-size: 0.62rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--rev-orange-text); }
.dash-item h2 { font-family: 'Sora', sans-serif; font-size: 1.15rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.3; }
.dash-item h2 a { color: var(--text-primary); }
.dash-item h2 a:hover { color: var(--rev-orange-text); }
.dash-item p { font-size: 0.9rem; color: var(--text-secondary); line-height: 1.55; }
.dash-item-link { margin-top: var(--space-xs); font-size: 0.85rem; font-weight: 600; color: var(--rev-orange-text); }
.dash-item-link:hover { color: var(--text-primary); }


/* variação com 3 indicadores (modelo da skill dashboard-publico) */
.dash-kpis.dash-kpis-3 { grid-template-columns: 1.6fr 1fr 1fr; }
@media (max-width: 768px) {
  .dash-kpis.dash-kpis-3 { grid-template-columns: repeat(2, 1fr); }
}