/* ===== Slider elegante ===== */
.slider-title {
  font-weight: 600;
  font-size: 0.95rem;
  margin-bottom: 4px;
}
.slider-sub {
  margin-top: 4px;
  font-size: 0.85rem;
  color: #6b7280; /* cinza suave */
}
.year-slider .rc-slider { padding: 8px 6px 4px 6px; }
.year-slider .rc-slider-rail {
  height: 6px; background: #e5e7eb; border-radius: 999px;
}
.year-slider .rc-slider-track {
  height: 6px; background: #93c5fd; border-radius: 999px;
}
.year-slider .rc-slider-handle {
  width: 16px; height: 16px; margin-top: -5px;
  border: 2px solid #2563eb; background: #fff;
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.12);
}
.year-slider .rc-slider-mark-text { font-size: 0.8rem; color: #374151; }
.year-slider .rc-slider-tooltip-inner { padding: 4px 8px; font-size: 0.85rem; }

/* ===== Paleta clara, neutra ===== */
:root{
  --bg:#f6f8fb;
  --surface:#ffffff;
  --text:#0f172a;
  --muted:#64748b;
  --brand:#0ea5e9;
  --border:#e5e7eb;
  --shadow:0 8px 24px rgba(2, 132, 199, .06);
}

.page-light { padding-bottom: 24px; }
html, body {
  background: var(--bg); color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, "Helvetica Neue", Arial;
}

/* Cabeçalho */
.brand-title{font-size:24px;font-weight:800; letter-spacing:.2px}
.brand-sub{color:var(--muted);font-size:13px}

/* Tipografia geral */
.h2-title{font-size:18px;font-weight:700;margin:12px 0}
.tile-sub{color:var(--muted);font-size:12px;margin:6px 0}
.tile-title{font-size:15px;font-weight:800}
.tile-number{font-size:22px;font-weight:900}

/* Breadcrumb */
.crumb-item{color:#0b1220;font-weight:600}
.crumb-sep{margin-left:6px;color:var(--muted)}

/* Cartões genéricos */
.card-tile{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow);
  transition: transform .15s ease, box-shadow .15s ease;
}
.card-tile:hover{ transform: translateY(-2px); }

/* Tabs */
.themed-tab{
  background: var(--surface) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
  border-bottom: none !important;
  margin-right: 6px !important;
  border-top-left-radius: 10px !important;
  border-top-right-radius: 10px !important;
}
.themed-tab--selected{ box-shadow: inset 0 -3px 0 var(--brand) !important; }

/* Dropdown (claro) */
.themed-dd .Select-control, .Select-control{
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  box-shadow: var(--shadow);
  border-radius: 10px;
}
.themed-dd .Select-placeholder, .themed-dd .Select-value-label,
.Select-placeholder, .Select-value-label{ color: var(--text); }
.themed-dd .Select-menu-outer, .Select-menu-outer{
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
}
.themed-dd .Select-option, .Select-option{
  color: var(--text); background: var(--surface);
}
.themed-dd .Select-option.is-focused, .Select-option.is-focused{ background: #eef6ff; }
.themed-dd .Select-option.is-selected, .Select-option.is-selected{ background: #dff1ff; }

/* ===== LISTA ODS ===== */
.ods-row{
  display:flex; align-items:center; gap:16px; width:100%;
  padding:12px; border:1px solid var(--border); border-radius:14px;
  background:var(--surface); box-shadow: var(--shadow);
  cursor:pointer; transition: transform .12s ease, box-shadow .12s ease;
  min-height:112px;
}
.ods-row:hover{ transform: translateY(-2px); }

/* “pílula” da imagem */
.ods-pill{
  width:96px; height:96px; background-size: cover; background-position: center;
  background-repeat: no-repeat; border-radius: 18px; flex: 0 0 96px;
  box-shadow: 0 8px 24px rgba(0,0,0,.10);
}
.ods-text{ display:flex; flex-direction:column; gap:2px; min-width:0 }
.ods-small{ font-size:12px; color:var(--muted); font-weight:700; letter-spacing:.2px }
.ods-big{ font-size:16px; font-weight:800; color: var(--text) }
.ods-idx{ font-size:20px; font-weight:900; color:#111827 }

/* Grid */
.g-3>.col-md-6 { padding-bottom: .25rem; }

/* Plotly em fundo claro */
.js-plotly-plot .plotly .bg,
.js-plotly-plot .plotly .cartesianlayer .subplot { background: #ffffff !important; }

/* ===== Toolbar Focus (voltar) ===== */
.focus-toolbar{
  display:none; align-items:center; margin: 6px 0 0 0;
}
.btn-back{
  border:1px solid var(--border);
  background:#fff;
}

/* ===== Animações ===== */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.fade-in { animation: fadeInUp .35s ease both; }

/* ===== Título clicável do componente ===== */
.comp-title-row{
  display:flex; align-items:center; justify-content:space-between;
  gap:10px; margin-bottom: 4px; cursor:pointer;
}
.comp-title-row .tile-title{ font-size:15px; font-weight:800; }
.comp-title-row .chev{
  font-size:12px; opacity:.7; transform: translateY(-1px);
}

/* ===== Corpo colapsável ===== */
.comp-collapse-body{ padding: 6px 0 4px 0; }
.comp-desc{
  font-size: 13px;
  color: var(--text);
  line-height: 1.35rem;
  white-space: pre-line;
}
.comp-source-row{
  font-size: 12px;
  color: var(--muted);
  margin-top: 6px;
}
.comp-source{ font-weight: 600; }

/* reforço no grid de componentes */
@media (min-width: 992px){
  .g-3>.col-lg-6 { padding-bottom: .5rem; }
}