/* Fase B — Modelo Empiricus, Rebalanceamento, Opções, Evolução, Rendimentos,
   Atualizar dados. Reaproveita os tokens/componentes de organic-styles.css e os
   já definidos em dashboard.css (.o-panel, .o-table, .o-kpi, .o-acao-pill, etc.). */

.o-form-grid {
  display: grid; grid-template-columns: 1fr 1fr 2fr 1fr auto; gap: 14px; align-items: end;
}
@media (max-width: 720px) { .o-form-grid { grid-template-columns: 1fr; } }

.o-form-grid .field { margin: 0; }

/* dropzone — mantém as classes .dropzone/.dz-* que dropzone.js já manipula;
   só sobrepõe a aparência (escopado em .o-panel para vencer o style.css escuro
   por especificidade, não por ordem de carga). */
.o-panel .dropzone {
  border: 1.5px dashed var(--color-divider); border-radius: var(--radius-lg);
  background: transparent; color: color-mix(in srgb, var(--color-text) 65%, transparent);
  text-align: center; padding: 28px 20px;
}
.o-panel .dropzone:hover { border-color: var(--color-accent); color: var(--color-text); }
.o-panel .dropzone.drag {
  border-color: var(--color-accent); color: var(--color-text);
  background: var(--color-accent-100);
}
.o-panel .dropzone .dz-file { color: var(--color-accent-2-700); }

/* tabela de resultado do processamento — mesmas classes res-*/dropzone.js já usa */
.o-panel .res-table td {
  border-bottom-color: color-mix(in srgb, var(--color-text) 12%, transparent);
}
.o-panel .res-table tr.res-ok td strong { color: var(--color-accent-2-700); }
.o-panel .res-table tr.res-dup td strong { color: color-mix(in srgb, var(--color-text) 55%, transparent); }
.o-panel .res-table tr.res-err td strong { color: var(--color-accent-700); }

/* KPI de resumo com valor negativo (opções, rendimento) */
.o-kpi-value.neg { color: var(--color-accent-700); }
.o-kpi-value.pos { color: var(--color-accent-2-700); }

/* gráficos SVG de barra (Evolução, Rendimentos) — mesmas classes .g-* que
   grafico_evolucao()/grafico_rendimento_anual() já emitem; só a cor muda
   (cores em si vêm de COR_BARRA/COR_CAPITAL/COR_GANHO/COR_PERDA em views.py,
   já revalidadas para o fundo claro — ver comentário lá). */
.o-panel .g-grid, .o-panel .g-axis {
  stroke: color-mix(in srgb, var(--color-text) 12%, transparent);
}
.o-panel .g-tick { fill: color-mix(in srgb, var(--color-text) 50%, transparent); }
.o-panel .g-valor { fill: var(--color-text); }
.o-panel .g-tip {
  background: var(--color-bg); border: 1px solid var(--color-divider);
  box-shadow: var(--shadow-md); color: var(--color-text);
}
.o-panel .g-tip-data { color: var(--color-text); }
.o-panel .g-tip-linha { color: color-mix(in srgb, var(--color-text) 55%, transparent); }
.o-panel .g-tip-linha strong { color: var(--color-text); }
.o-panel .g-legenda { color: color-mix(in srgb, var(--color-text) 55%, transparent); }

/* tabelas SEM classe .o-table (tabela_evolucao(), rendimentos) — mesma
   aparência via seletor de elemento, escopado em .o-panel. Não dá pra por
   class="o-table" nelas: test_e2e_upload.py casa a substring literal
   "<table>" (ver 7.3 do teste). */
.o-panel table { width: 100%; border-collapse: collapse; font-size: 14px; }
.o-panel table th {
  text-align: left; font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 45%, transparent); font-weight: 400;
  padding: 0 10px 10px 0; border-bottom: none;
}
.o-panel table td {
  padding: 11px 10px 11px 0;
  border-top: 1px solid color-mix(in srgb, var(--color-text) 10%, transparent);
  border-bottom: none;
}
.o-panel table tbody tr:hover { background: color-mix(in srgb, var(--color-text) 4%, transparent); }
.o-pos { color: var(--color-accent-2-700); }
.o-neg { color: var(--color-accent-700); }

/* subtítulo pequeno dentro de painel (ex.: "Por mês" / "Por ano" na aba Opções) */
.o-panel-sub {
  font-family: var(--font-body); font-weight: 600; font-size: 13px;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: color-mix(in srgb, var(--color-text) 62%, transparent);
  margin: 0 0 10px;
}

/* aviso de divergência / posição antiga — variante do o-flash já existente */
.o-flash.warn {
  border-color: color-mix(in srgb, var(--color-accent) 26%, transparent);
  background: var(--color-accent-100); color: var(--color-accent-900);
}

/* ---- /upload: envio de arquivos de origem -----------------------------
   Confirmação de gravação usa accent-2 (a paleta secundária do Organic) em vez
   de verde avulso: o design system não tem token de "sucesso", e inventar um
   hex fora dele quebraria a coerência no modo escuro. */
.o-flash.ok {
  border-color: color-mix(in srgb, var(--color-accent-2) 30%, transparent);
  background: var(--color-accent-2-100); color: var(--color-accent-2-900);
}
.o-flash + .o-flash { margin-top: 8px; }

.form-upload { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-end; }
.form-upload label {
  display: flex; flex-direction: column; gap: 6px; flex: 1 1 260px;
  font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 62%, transparent);
}
.form-upload select, .form-upload input[type="file"] {
  font: inherit; text-transform: none; letter-spacing: normal; font-size: 14px;
  padding: 10px 12px; border-radius: 14px;
  border: 1px solid var(--color-divider); background: var(--color-bg); color: var(--color-text);
}
.form-upload select:focus, .form-upload input[type="file"]:focus {
  outline: 2px solid var(--color-accent-400); outline-offset: 1px;
}
.form-upload button {
  font: inherit; font-size: 14px; padding: 11px 26px; border: 0; border-radius: 999px;
  background: var(--color-accent-800); color: var(--color-bg); cursor: pointer;
}
.form-upload button:hover { background: var(--color-accent-900); }

/* Log do consumidor: largura fixa e rolagem própria, para linha longa de caminho
   não empurrar a largura da página. */
pre.log {
  margin: 12px 0 0; padding: 12px 14px; border-radius: 14px; overflow-x: auto;
  font-size: 12px; line-height: 1.55; white-space: pre;
  background: var(--color-neutral-100); border: 1px solid var(--color-divider);
  color: color-mix(in srgb, var(--color-text) 78%, transparent);
}

/* ---- /evolucao: series temporais em SVG -------------------------------
   As classes de layout (.o-chart-body, -yaxis, -svg, -grade, -eixo-x) ja vieram
   no port do design system Organic. Faltavam as da linha em si: o savica pintava
   com `style=` inline no SVG, o que impede tema e reuso. Aqui viram classe. */
.o-chart-linha { stroke: var(--color-accent-600); stroke-width: 2.75; }
.o-chart-ponta { fill: var(--color-accent-600); stroke: var(--color-bg); stroke-width: 3; }
/* Referencia (capital aportado) em accent-2 para nao competir com a serie principal. */
.o-chart-ref   { stroke: var(--color-accent-2-600); stroke-width: 2; }
/* Linha do zero no grafico de delta: mais firme que a grade, discreta ante a serie. */
.o-chart-zero  { stroke: color-mix(in srgb, var(--color-text) 38%, transparent); stroke-width: 1; }

.o-chart-serie-bloco + .o-chart-serie-bloco {
  margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--color-divider);
}
.o-h3 { font-family: var(--font-heading); font-size: 19px; margin: 0; }

/* Legenda: amostra da linha antes do texto, para dizer qual e qual sem depender
   so da cor (daltonismo) — a tracejada tem tracos visiveis na amostra. */
.o-chart-legenda {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px;
  margin: 14px 0 0; font-size: 12px;
  color: color-mix(in srgb, var(--color-text) 62%, transparent);
}
.o-chave-linha, .o-chave-ref { display: inline-block; width: 26px; height: 0; margin-right: -12px; }
.o-chave-linha { border-top: 2.75px solid var(--color-accent-600); }
.o-chave-ref   { border-top: 2px dashed var(--color-accent-2-600); }

/* Classes de prioridade (Risco) */
.row-critica td {
    background-color: var(--o-terracota-soft, rgba(188, 108, 37, 0.08));
}

.row-alta td {
    background-color: rgba(188, 150, 37, 0.08);
}

/* Banner de sanidade */
.banner-sanidade {
    padding: 0.75rem 1rem;
    border-radius: var(--o-border-radius);
    margin-bottom: 1.5rem;
}

.banner-sanidade p {
    margin: 0;
}

.banner-saneado {
    background-color: var(--o-salvia-soft);
    color: var(--o-salvia);
    border: 1px solid var(--o-salvia);
}

.banner-erro {
    background-color: var(--o-terracota-soft);
    color: var(--o-terracota);
    padding: 0.75rem 1rem;
    border-radius: var(--o-border-radius);
    margin-bottom: 1.5rem;
    border: 1px solid var(--o-terracota);
}