/* Insights. Só tokens do app.css (Ultramar e Marfim, claro e escuro). Sem cor fixa, sem biblioteca de gráfico. */

/* ---------- barra de período e abas ---------- */
.ins-topo { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: flex-end; justify-content: space-between; margin-bottom: 20px; }
.ins-periodo { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: flex-end; }
.ins-periodo .abas { display: inline-flex; max-width: 100%; }
.ins-periodo .abas button { min-height: 40px; padding: 0 16px; font-size: 14px; }
.ins-datas { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; }
.ins-datas .campo { min-width: 150px; }
.ins-datas .campo label { font-size: 12px; }
.ins-datas input { min-height: 40px; }
.ins-abas { display: flex; gap: 4px; overflow-x: auto; overflow-y: hidden; border-bottom: 1px solid var(--linha); margin-bottom: 20px; scrollbar-width: thin; }
.ins-abas [role="tab"] { flex: 0 0 auto; min-height: 44px; padding: 0 16px; border: 0; background: transparent; color: var(--texto-fraco); font: inherit; font-weight: 600; font-size: 14px; cursor: pointer; border-bottom: 3px solid transparent; margin-bottom: -1px; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.ins-abas [role="tab"]:hover { color: var(--texto); }
.ins-abas [role="tab"][aria-selected="true"] { color: var(--destaque); border-bottom-color: var(--destaque); }
.ins-abas [role="tab"]:focus-visible { outline: 2px solid var(--foco); outline-offset: -2px; border-radius: 4px; }
.ins-painel:focus { outline: none; }
.ins-barra { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; justify-content: space-between; }
.ins-barra .acoes { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

/* ---------- peças comuns ---------- */
.ins-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0; }
.ins-tile { background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio-md); padding: 16px 18px; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; }
.ins-tile dt { font-size: 13px; font-weight: 600; color: var(--texto-fraco); }
.ins-tile dd { margin: 0; min-width: 0; max-width: 100%; }
.ins-tile .valor { font-size: 26px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; overflow-wrap: anywhere; }
.ins-tile .valor.ok { color: var(--ok); }
.ins-tile .valor.ruim { color: var(--perigo); }
.ins-tile .valor.vazio { color: var(--texto-tenue); font-size: 20px; font-weight: 700; }
.ins-tile .sub { font-size: 13px; color: var(--texto-tenue); }
.ins-var { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 700; }
.ins-var.sobe { color: var(--ok); }
.ins-var.desce { color: var(--perigo); }
.ins-var.neutra { color: var(--texto-fraco); }
.ins-var .icone { width: 14px; height: 14px; }

.ins-grade { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; align-items: start; }
.ins-aviso { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--linha-forte); border-left: 4px solid var(--alerta); border-radius: var(--raio-md); background: var(--alerta-fundo); color: var(--texto); font-size: 14px; }
.ins-aviso .icone { flex: 0 0 auto; width: 18px; height: 18px; margin-top: 2px; color: var(--alerta); }
.ins-aviso ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; }
.ins-nota { font-size: 13px; color: var(--texto-tenue); max-width: 80ch; }

/* ---------- tabelas ---------- */
.ins-rolagem { overflow-x: auto; }
.ins-tabela { width: 100%; border-collapse: collapse; font-size: 14px; }
.ins-tabela th, .ins-tabela td { padding: 9px 10px; border-bottom: 1px solid var(--linha); text-align: left; vertical-align: top; }
.ins-tabela thead th { font-size: 12px; font-weight: 700; color: var(--texto-tenue); white-space: nowrap; }
.ins-tabela tbody th { font-weight: 600; min-width: 110px; }
.ins-tabela .n { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ins-tabela td.sem { color: var(--texto-tenue); text-align: right; white-space: nowrap; }
.ins-tabela tfoot td, .ins-tabela tfoot th { font-weight: 800; border-top: 2px solid var(--linha-forte); border-bottom: 0; }
.ins-tabela caption { text-align: left; font-weight: 700; padding-bottom: 8px; }
.ins-detalhes summary { min-height: 40px; display: flex; align-items: center; cursor: pointer; font-weight: 600; font-size: 14px; color: var(--destaque); }

/* ---------- barras simples ---------- */
.ins-barras { display: flex; flex-direction: column; margin: 4px 0 0; padding: 0; list-style: none; }
.ins-linha { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, auto); gap: 4px 12px; align-items: baseline; padding: 8px 0; }
.ins-linha .rotulo { grid-column: 1; grid-row: 1; font-weight: 600; font-size: 14px; min-width: 0; overflow-wrap: anywhere; }
.ins-linha .texto { grid-column: 2; grid-row: 1; font-size: 13px; color: var(--texto-fraco); text-align: right; min-width: 0; }
.ins-linha .trilho { grid-column: 1 / -1; grid-row: 2; display: block; height: 8px; border-radius: 4px; background: var(--superficie-2); overflow: hidden; }
.ins-linha .trilho i { display: block; height: 100%; border-radius: 4px; background: var(--destaque); }
.ins-linha .trilho i.ok { background: var(--ok); }
.ins-linha .trilho i.ruim { background: var(--perigo); }
.ins-linha .trilho i.aviso { background: var(--alerta); }

/* ---------- gráficos ---------- */
.ins-grafico { width: 100%; min-height: 220px; margin-top: 8px; }
.ins-svg { display: block; max-width: 100%; overflow: visible; }
.ins-svg .grade { stroke: var(--linha); stroke-width: 1; }
.ins-svg .eixo { stroke: var(--linha-forte); stroke-width: 1; }
.ins-svg .rot-x, .ins-svg .rot-y { fill: var(--texto-tenue); font-size: 12px; font-family: var(--fonte); }
.ins-svg .b-ganho { fill: var(--ok); opacity: .9; }
.ins-svg .b-perda { fill: var(--perigo); opacity: .85; }
.ins-svg .b-mes { fill: var(--destaque); opacity: .85; }
.ins-svg .b-mes.atual { opacity: 1; }
.ins-svg rect:hover { opacity: 1; }
.ins-svg .curva { stroke: var(--destaque); stroke-width: 2.5; fill: none; stroke-linejoin: round; stroke-linecap: round; }
.ins-svg .ideal { stroke: var(--texto-tenue); stroke-width: 2; stroke-dasharray: 6 5; fill: none; }
.ins-svg .meta { stroke: var(--ok); stroke-width: 1.5; stroke-dasharray: 2 4; }
.ins-svg .ponto { fill: var(--destaque); stroke: var(--superficie); stroke-width: 2; }
.ins-legenda { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; font-size: 13px; color: var(--texto-fraco); margin-top: 8px; }
.ins-legenda span { display: inline-flex; align-items: center; gap: 6px; }
.ins-legenda i { display: inline-block; width: 12px; height: 12px; border-radius: 2px; }
.ins-legenda i.ganho { background: var(--ok); }
.ins-legenda i.perda { background: var(--perigo); }
.ins-legenda i.curva { background: var(--destaque); }
.ins-legenda i.ideal { height: 0; width: 18px; border-top: 2px dashed var(--texto-tenue); border-radius: 0; }
.ins-legenda i.meta { height: 0; width: 18px; border-top: 2px dotted var(--ok); border-radius: 0; }

/* ---------- objetivos ---------- */
.ins-mes { display: inline-flex; align-items: center; gap: 4px; }
.ins-mes .rotulo { min-width: 150px; text-align: center; font-weight: 700; }
.ins-metas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.ins-meta { border: 1px solid var(--linha); border-radius: var(--raio-md); padding: 16px 18px; background: var(--superficie); display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.ins-meta h3 { font-size: 15px; }
.ins-meta .grande { font-size: 26px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; overflow-wrap: anywhere; }
.ins-meta .de { font-size: 14px; color: var(--texto-fraco); font-weight: 600; }
.ins-progresso { height: 12px; border-radius: 6px; background: var(--superficie-2); overflow: hidden; }
.ins-progresso i { display: block; height: 100%; border-radius: 6px; background: var(--destaque); }
.ins-progresso i.ok { background: var(--ok); }
.ins-mini { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 12px 18px; margin: 0; }
.ins-mini dt { font-size: 12px; font-weight: 600; color: var(--texto-tenue); }
.ins-mini dd { margin: 2px 0 0; font-size: 16px; font-weight: 800; overflow-wrap: anywhere; }

/* ---------- registro de atividades ---------- */
.ins-filtros { display: flex; flex-direction: column; gap: 12px; }
.ins-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; border: 0; }
.ins-chips legend { font-size: 12px; font-weight: 700; color: var(--texto-tenue); padding: 0; margin-bottom: 6px; }
.ins-chip { min-height: 36px; padding: 0 12px; border-radius: 18px; border: 1px solid var(--linha-forte); background: var(--superficie); color: var(--texto-fraco); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.ins-chip:hover { background: var(--superficie-2); color: var(--texto); }
.ins-chip[aria-pressed="true"] { background: var(--destaque-suave); border-color: var(--destaque); color: var(--destaque); }
.ins-chip:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }
.ins-chip .icone { width: 14px; height: 14px; }
.ins-selects { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.ins-selects .campo { min-width: 200px; }
.ins-dia { font-size: 13px; font-weight: 800; color: var(--texto-fraco); padding: 16px 0 6px; position: sticky; top: 0; background: var(--fundo); z-index: 1; margin: 0; }
.ins-reg { list-style: none; margin: 0; padding: 0; }
.ins-item { display: grid; grid-template-columns: 56px 32px minmax(0, 1fr); gap: 0 10px; padding: 12px 0; border-top: 1px solid var(--linha); }
.ins-item:first-child { border-top: 0; }
.ins-item time { font-size: 13px; color: var(--texto-tenue); font-variant-numeric: tabular-nums; padding-top: 4px; }
.ins-item .marca { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--superficie-2); color: var(--texto-fraco); }
.ins-item .marca .icone { width: 16px; height: 16px; }
.ins-item .marca.ia { background: var(--destaque-suave); color: var(--destaque); }
.ins-item .marca.pessoa { background: var(--ok-fundo); color: var(--ok); }
.ins-item .corpo { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.ins-item .quem { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; }
.ins-item .quem strong { font-size: 14px; }
.ins-item .titulo { font-size: 14px; }
.ins-item .detalhe { font-size: 14px; color: var(--texto-fraco); white-space: pre-wrap; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.ins-item .links { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 13px; }
.ins-item .links a { display: inline-flex; align-items: center; gap: 4px; min-height: 28px; color: var(--destaque); }
.ins-mais { display: flex; justify-content: center; padding: 16px 0 4px; }

/* ---------- formulário de investimento ---------- */
.ins-form { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; align-items: end; }
.ins-form .campo { min-width: 0; }
.ins-form .largo { grid-column: 1 / -1; }
.ins-inv { list-style: none; margin: 0; padding: 0; }
.ins-inv li { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; justify-content: space-between; padding: 10px 0; border-top: 1px solid var(--linha); }
.ins-inv li:first-child { border-top: 0; }
.ins-inv .info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

/* ---------- responsivo ---------- */
@media (max-width: 1100px) {
  .ins-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ins-grade { grid-template-columns: minmax(0, 1fr); }
  .ins-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .ins-periodo .abas { display: flex; width: 100%; }
  .ins-periodo .abas button { flex: 1; padding: 0 8px; }
  .ins-metas { grid-template-columns: minmax(0, 1fr); }
  .ins-tile { padding: 14px; }
  .ins-tile .valor { font-size: 22px; }
  .ins-item { grid-template-columns: 32px minmax(0, 1fr); }
  .ins-item time { grid-column: 2; grid-row: 1; padding-top: 0; }
  .ins-item .marca { grid-column: 1; grid-row: 1 / span 2; }
  .ins-item .corpo { grid-column: 2; grid-row: 2; }
  .ins-selects .campo { min-width: 100%; }
}
@media (max-width: 480px) {
  .ins-tiles { grid-template-columns: minmax(0, 1fr); }
  .ins-form { grid-template-columns: minmax(0, 1fr); }
  .ins-linha { grid-template-columns: minmax(0, 1fr); }
  .ins-linha .rotulo, .ins-linha .texto, .ins-linha .trilho { grid-column: 1; }
  .ins-linha .texto { grid-row: 3; text-align: left; }
}
@media (prefers-reduced-motion: no-preference) {
  .ins-progresso i { transition: width .4s ease; }
}
@media print {
  .ins-abas, .ins-periodo, .ins-barra .acoes, .ins-mais { display: none !important; }
}