/* ==========================================================================
   Vidya · caixas, inputs, gráficos e o modelo "relatório" · v1 · 23/10/2026
   Fonte de verdade em marca/03-visual.md, seção 13.
   Referências: guias de gráfico do ONS e do Banco Mundial (grade só
   horizontal, atrás do dado), Apple HIG (segmented control: opções de
   largura igual, escolha imediata, estado ativo inconfundível), relatórios
   anuais com dado no meio do texto (o "estilo report").
   ========================================================================== */

:root {
  --raio-caixa: var(--raio, 10px);
  --sombra-app: 0 1px 0 var(--cor-linha), 0 10px 28px rgba(20, 26, 23, 0.07);
  --g-linha: var(--cor-tinta);
  --g-grade: var(--cor-linha);
  --g-area: rgba(20, 26, 23, 0.07);
  --g-faixa: rgba(247, 232, 75, 0.28);
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --g-area: rgba(237, 239, 236, 0.08); --g-faixa: rgba(255, 233, 92, 0.14); } }
:root[data-theme="dark"] { --g-area: rgba(237, 239, 236, 0.08); --g-faixa: rgba(255, 233, 92, 0.14); }

/* --- Caixas: quatro, cada uma com um papel --------------------------------- */
/* Folha: dado, case, experimento. Borda fina, sem sombra. */
.caixa { border-radius: var(--raio-caixa); }
.caixa--folha { background: var(--cor-papel); border: 1px solid var(--cor-linha); }
.caixa--folha, .caixa--nota, .caixa--quadro { border-radius: var(--raio-caixa); }
/* Nota: contexto lateral, fonte, explicação. Sem borda, tom de bancada. */
.caixa--nota { background: color-mix(in srgb, var(--cor-bancada) 60%, var(--cor-linha)); border: 0; }
/* App: só o que se clica para abrir um produto. Única com sombra. */
.caixa--app { background: var(--cor-papel); border-radius: var(--raio-app); box-shadow: var(--sombra-app); }
/* Quadro: método e figura técnica. Fundo tinta, uma por página. */
.caixa--quadro { background: var(--cor-quadro); color: var(--cor-quadro-texto); }

/* --- Modelo de conteúdo: relatório ----------------------------------------- */
.relatorio { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); border: 1px solid var(--cor-linha); border-radius: var(--raio-caixa); background: var(--cor-papel); overflow: hidden; }
.relatorio > * { padding: clamp(20px, 3vw, 36px); }
.relatorio__texto { display: grid; gap: var(--esp-3); align-content: start; border-right: 1px solid var(--cor-linha); }
.relatorio__fig { display: grid; gap: var(--esp-3); align-content: start; background: var(--cor-bancada); }
.relatorio__chapeu { font-family: var(--fonte-dado); font-stretch: var(--dado-wdth); font-size: var(--t-xs); font-weight: 600; color: var(--cor-tinta-2); }
.relatorio__tese { font-family: var(--fonte-texto); font-size: var(--t-l); line-height: 1.45; }
.relatorio__fig h4 { font-size: var(--t-m); margin: 0; }
.relatorio__fonte { font-family: var(--fonte-dado); font-stretch: var(--dado-wdth); font-size: var(--t-xs); font-weight: 560; color: var(--cor-tinta-2); line-height: 1.5; }
.relatorio__fonte b { color: var(--cor-tinta); font-style: italic; margin-right: 4px; }
@media (max-width: 900px) { .relatorio { grid-template-columns: minmax(0, 1fr); } .relatorio__texto { border-right: 0; border-bottom: 1px solid var(--cor-linha); } }

/* --- Inputs ----------------------------------------------------------------- */
/* Seletor segmentado: 2 a 5 opções de largura igual, escolha imediata. */
.segmento { position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; padding: 4px; gap: 0; border-radius: var(--raio-controle); background: color-mix(in srgb, var(--cor-bancada) 55%, var(--cor-linha)); max-width: 100%; }
.segmento button { position: relative; z-index: 1; appearance: none; border: 0; background: transparent; color: var(--cor-tinta-2); font-family: var(--fonte-titulo); font-weight: 560; font-size: var(--t-s); padding: 10px 14px; border-radius: 6px; cursor: pointer; white-space: nowrap; transition: color var(--dur-curta) var(--curva); }
.segmento button:hover { color: var(--cor-tinta); }
.segmento button[aria-pressed="true"] { color: var(--cor-tinta); font-weight: 650; }
.segmento button:focus-visible { outline: 2px solid var(--cor-tinta); outline-offset: -2px; }
.segmento__indicador { position: absolute; z-index: 0; top: 4px; bottom: 4px; left: 4px; border-radius: 6px; background: var(--cor-papel); box-shadow: 0 1px 2px rgba(20, 26, 23, 0.12), 0 0 0 1px var(--cor-linha); transition: transform 280ms var(--curva), width 280ms var(--curva); }
.segmento__indicador::after { content: ""; position: absolute; left: 10px; top: 50%; width: 6px; height: 6px; margin-top: -3px; background: var(--cor-marca-viva); }
.segmento button[aria-pressed="true"]::before { content: ""; display: inline-block; width: 6px; }
@media (max-width: 640px) { .segmento { grid-auto-flow: row; grid-template-columns: 1fr 1fr; } .segmento__indicador { display: none; } .segmento button[aria-pressed="true"] { background: var(--cor-papel); box-shadow: 0 0 0 1px var(--cor-linha); } }
@media (prefers-reduced-motion: reduce) { .segmento__indicador { transition: none; } }

/* Campo de texto: raio de controle, rótulo em cima, foco em tinta. */
.campo2 { display: grid; gap: 6px; }
.campo2 label { font-family: var(--fonte-titulo); font-size: var(--t-s); font-weight: 600; }
.campo2 input, .campo2 textarea { width: 100%; font: inherit; font-family: var(--fonte-texto); font-size: var(--t-m); color: var(--cor-tinta); background: var(--cor-papel); border: 1px solid var(--cor-linha-forte); border-radius: var(--raio-controle); padding: 12px 14px; transition: border-color var(--dur-curta) var(--curva), box-shadow var(--dur-curta) var(--curva); }
.campo2 textarea { min-height: 112px; resize: vertical; }
.campo2 input:hover, .campo2 textarea:hover { border-color: var(--cor-tinta-2); }
.campo2 input:focus-visible, .campo2 textarea:focus-visible { outline: none; border-color: var(--cor-tinta); box-shadow: 0 0 0 3px color-mix(in srgb, var(--cor-marca) 55%, transparent); }
.campo2 .ajuda { font-size: var(--t-xs); color: var(--cor-tinta-2); }
.botao2 { appearance: none; border: 1px solid var(--cor-tinta); background: var(--cor-tinta); color: var(--cor-papel); border-radius: var(--raio-controle); padding: 12px 18px; font-family: var(--fonte-titulo); font-weight: 650; font-size: var(--t-m); cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; transition: transform var(--dur-curta) var(--curva), background var(--dur-curta) var(--curva); }
.botao2:hover { transform: translateY(-1px); }
.botao2:focus-visible { outline: none; box-shadow: var(--foco); }
.botao2--claro { background: transparent; color: var(--cor-tinta); border-color: var(--cor-linha-forte); }

/* --- Gráficos --------------------------------------------------------------- */
.grafico { position: relative; }
.grafico svg { display: block; width: 100%; height: auto; overflow: visible; }
.g-grade { stroke: var(--g-grade); stroke-width: 1; }
.g-tick { font-family: var(--fonte-dado); font-stretch: var(--dado-wdth); font-size: 12px; font-weight: 560; fill: var(--cor-tinta-2); font-variant-numeric: tabular-nums; }
.g-area { fill: var(--g-area); }
.g-linha { fill: none; stroke: var(--g-linha); stroke-width: 2.25; stroke-linecap: round; stroke-linejoin: round; }
.g-ponto { fill: var(--g-linha); stroke: var(--cor-papel); stroke-width: 2; transition: r 160ms var(--curva); }
.g-ponto--fim { fill: var(--cor-marca-viva); stroke: var(--g-linha); stroke-width: 2; }
.g-ponto.ativo { r: 6; }
.g-fim { font-family: var(--fonte-dado); font-stretch: var(--dado-wdth); font-size: 13px; font-weight: 700; fill: var(--cor-tinta); font-variant-numeric: tabular-nums; }
.g-faixa { fill: var(--g-faixa); }
.g-ref { stroke: var(--cor-tinta); stroke-width: 1; }
.g-ref--min { stroke: var(--cor-tinta-2); stroke-dasharray: 3 4; }
.g-ref-t { font-family: var(--fonte-dado); font-stretch: var(--dado-wdth); font-size: 12px; font-weight: 700; fill: var(--cor-tinta); }
.g-ref-t--min { font-weight: 560; fill: var(--cor-tinta-2); }
.g-cruz { stroke: var(--cor-tinta-2); stroke-width: 1; opacity: 0; transition: opacity 120ms; pointer-events: none; }
.g-dica { position: absolute; transform: translate(-50%, calc(-100% - 14px)); pointer-events: none; background: var(--cor-tinta); color: var(--cor-papel); border-radius: 6px; padding: 6px 10px; font-family: var(--fonte-titulo); font-size: 12px; display: grid; gap: 1px; opacity: 0; transition: opacity 120ms; white-space: nowrap; }
.g-dica.vis { opacity: 1; }
.g-dica span { opacity: 0.7; }
.g-dica b { font-variant-numeric: tabular-nums; }

.g-barras { display: grid; gap: 10px; }
.g-barra { display: grid; grid-template-columns: minmax(96px, 30%) minmax(0, 1fr); gap: 12px; align-items: center; font-family: var(--fonte-titulo); font-size: var(--t-s); }
.g-barra__rot { color: var(--cor-tinta-2); }
.g-barra__trilho { display: flex; align-items: center; gap: 10px; min-width: 0; }
.g-barra__trilho i { display: block; height: 12px; width: calc((100% - 76px) * var(--p)); min-width: 2px; flex: none; background: var(--g-linha); border-radius: 0 4px 4px 0; transform-origin: left; transition: transform 900ms var(--curva); }
.g-barra--destaque .g-barra__trilho i { background: var(--cor-marca-viva); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cor-tinta) 35%, transparent); }
.g-barra--destaque .g-barra__rot { color: var(--cor-tinta); font-weight: 600; }
.g-barra__trilho b { font-family: var(--fonte-dado); font-stretch: var(--dado-wdth); font-variant-numeric: tabular-nums; font-weight: 700; white-space: nowrap; }
.g-espera .g-barra__trilho i { transform: scaleX(0); }
.g-barra:hover .g-barra__trilho i { filter: brightness(1.15); }