/**
 * Página Ouro - Design System
 * CSS específico da página (não altera o DS core).
 * Classes usadas apenas em templates/FinancialIndicators/ouro.php
 */

/* Cotação atual - valor em linha única, destaque sem quebrar */
.ouro-ds-cotacao-valor {
  white-space: nowrap;
}

/* Hero - padding compacto (padrão instituição) */
.ouro-ds-hero .hero-body {
  padding-top: 4rem;
  padding-bottom: 4rem;
}

/* Card rows - separador entre itens */
.ouro-ds-card-row {
  border-bottom: 1px solid #f5f5f5;
}

.ouro-ds-card-row:last-child {
  border-bottom: none;
}

/* Container do gráfico - altura fixa para Chart.js (evita CLS) */
.ouro-ds-chart-container {
  position: relative;
  height: 320px;
}

.ouro-ds-chart-container canvas {
  width: 100%;
  height: 100%;
  display: block;
}

/* Tabelas - estilo clean (padrão quanto-rende) */
.ouro-ds-table thead tr {
  border-bottom: 1px solid #e8e8e8;
}

.ouro-ds-table thead th {
  font-weight: normal;
  padding: 1rem;
}

.ouro-ds-table tbody tr {
  border-bottom: 1px solid #f5f5f5;
}

.ouro-ds-table tbody td {
  padding: 1.25rem 1rem;
}

/* Sidebar banner - sticky */
.ouro-ds-sidebar-sticky {
  position: sticky;
  top: 1rem;
}

.ouro-ds-sidebar-img {
  border-radius: 8px;
}

/* Graph buttons (específico da página Ouro) */
/* Graph buttons - escopo página Ouro */
.section.has-background-white-ter .graph-button {
  background: white !important;
  border: 1px solid #ddd !important;
  color: #363636 !important;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  margin-right: 8px;
}

.section.has-background-white-ter .graph-button:hover {
  border-color: #00597C !important;
  color: #00597C !important;
}

.section.has-background-white-ter .graph-button.active {
  background: #00597C !important;
  color: white !important;
  border-color: #00597C !important;
}