/* ═══════════════════════════════════════════════════════════
   Macro Estrutural — estilos da aba #page-macro
   Wave 0: mobile grid + calendar + LG
   Wave 2: Macro Cockpit unificado
   Wave 3: Analytics (Curva DI + Juro Real)
   ═══════════════════════════════════════════════════════════ */

/* ── W3: Analytics Row (Curva DI + Juro Real) ── */
.macro-analytics-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.macro-analytics-card {
  /* herda .panel — sem backdrop-filter aninhado */
  background: rgba(255, 255, 255, 0.04) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

@media (max-width: 768px) {
  .macro-analytics-row {
    grid-template-columns: 1fr;
  }
}

/* ── Macro Cockpit ── */
.macro-cockpit {
  margin-bottom: 16px;
}

.macro-cockpit-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.07);
  margin: 14px 0;
}

/* Cards Minsky + GPR lado a lado */
.macro-cockpit-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 12px;
}

.macro-cockpit-card {
  /* herda .panel — sem backdrop-filter aninhado */
  background: rgba(255, 255, 255, 0.04) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Accordion summary — visível só em mobile */
.macro-cockpit-details {
  /* sem border nativo do <details> */
}

.macro-cockpit-details > summary {
  display: none; /* escondido em desktop */
  align-items: center;
  gap: 8px;
  padding: 8px 4px;
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
  cursor: pointer;
  list-style: none;
  border-radius: 6px;
  transition: background 0.15s;
}

.macro-cockpit-details > summary::-webkit-details-marker { display: none; }
.macro-cockpit-details > summary::marker { display: none; }

.macro-cockpit-details > summary:hover {
  background: rgba(255, 255, 255, 0.04);
}

.macro-cockpit-details > summary::after {
  content: '▸';
  margin-left: auto;
  font-size: 10px;
  transition: transform 0.2s;
}

.macro-cockpit-details[open] > summary::after {
  transform: rotate(90deg);
}

/* Faixa de alertas */
.macro-cockpit-alerts-strip {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  flex-wrap: wrap;
}

/* Sparkline SVG */
.macro-sparkline {
  display: block;
  width: 100%;
  height: 36px;
  margin-top: 8px;
  border-radius: 4px;
  overflow: visible;
}

.macro-sparkline-label {
  font-size: 9px;
  color: var(--text-muted);
  text-align: right;
  margin-top: 1px;
}

/* ── Mobile responsivo (≤768px) ── */
@media (max-width: 768px) {
  /* Termômetro: layout colunado */
  #macro-thermometer-content > div {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  /* Cockpit cards — accordion ativo */
  .macro-cockpit-details > summary {
    display: flex;
  }

  .macro-cockpit-cards {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  /* BCB snapshot */
  #macro-bcb-grid {
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)) !important;
    gap: 8px !important;
  }
}

@media (max-width: 480px) {
  .macro-cockpit-alerts-strip {
    flex-direction: column;
    gap: 6px;
  }
}

/* ── Calendário Macro ── */
.macro-month-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 4px;
  margin-bottom: 4px;
  font-size: 12px;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: 0.4px;
  text-transform: uppercase;
  border-bottom: 1px solid rgba(99, 102, 241, 0.2);
}

.macro-cal-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 2px;
  table-layout: fixed;
  margin-bottom: 14px;
}

.macro-cal-table th {
  text-align: center;
  padding: 4px 2px;
  font-size: 10px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  font-weight: 500;
}

.macro-cal-table td {
  padding: 3px 2px;
  vertical-align: top;
  width: 14.28%;
  min-height: 44px;
  border-radius: 5px;
  border: 1px solid transparent;
  transition: background 0.15s;
}

.macro-cal-table td.is-today    { background: rgba(99, 102, 241, 0.12); border-color: rgba(99, 102, 241, 0.45); }
.macro-cal-table td.is-past     { background: rgba(0, 0, 0, 0.10); }
.macro-cal-table td.is-weekend  { background: rgba(255, 255, 255, 0.01); }
.macro-cal-table td.is-other-month { opacity: 0.28; }
.macro-cal-table td.has-event   { background: rgba(255, 255, 255, 0.04); }

.macro-cal-day              { font-size: 11px; line-height: 1.2; color: var(--text-secondary); }
.macro-cal-day.is-today     { color: #818cf8; font-weight: 700; }
.macro-cal-day.is-past      { color: var(--text-muted); }

.macro-cal-pill {
  display: block;
  margin-top: 2px;
  padding: 2px 4px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
}

.macro-cal-legend {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 11px;
  color: var(--text-muted);
  align-items: center;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  margin-top: 4px;
}

.macro-cal-legend-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 2px;
  margin-right: 3px;
}

/* ── Painéis abaixo da dobra — lazy render ── */
#page-macro .panel:nth-child(n+4) {
  content-visibility: auto;
  contain-intrinsic-size: 1px 260px;
}

/* ── W4.1: Mobile polish — SVG curva responsiva + tabelas compactas ── */

/* SVG da Curva de Juros tem width="260" fixo no HTML — forçar responsividade */
#macro-yield-curve-content svg {
  width: 100%;
  max-width: 260px;
}

@media (max-width: 768px) {
  /* Correlações estruturais: células compactas para caber na viewport */
  #macro-correlations-content td,
  #macro-correlations-content th {
    padding: 5px 8px !important;
    font-size: 11px !important;
  }

  /* Heatmap setorial: mesma lógica */
  #macro-sector-heatmap-content td,
  #macro-sector-heatmap-content th {
    padding: 5px 4px !important;
    font-size: 10px !important;
  }

  /* Mapa de correlações estruturais (90d) */
  #macro-correlations-content table {
    font-size: 11px;
  }
}

/* ── W3.5/W3.6/W3.7 — Animações premium ── */
@keyframes macroBarGrow {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}
@keyframes macroDotBounce {
  0%, 80%, 100% { transform: scale(0); opacity: 0.3; }
  40%           { transform: scale(1); opacity: 1; }
}
@keyframes macroRowFade {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}
.macro-bar-fill {
  transform-origin: left;
  animation: macroBarGrow 0.7s cubic-bezier(.4,0,.2,1) both;
}
.macro-dot-bounce {
  width: 7px; height: 7px; border-radius: 50%;
  animation: macroDotBounce 1.2s infinite;
}
.macro-heatmap-row {
  animation: macroRowFade 0.4s ease both;
}

@media (max-width: 480px) {
  /* iPhone SE (375px): exatamente 2 colunas no BCB grid */
  #macro-bcb-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 6px !important;
  }

  /* Curva de juros: labels dos prazos ainda menores */
  #macro-yield-curve-content div[style*="justify-content:space-between"] > div {
    font-size: 9px;
  }
}

/* ═══════════════════════════════════════════════════════════
   W3.8 — Premium redesign: Curva de Juros + Juro Real
   Tipografia maior, contraste forte no tema dark, glassmorphism
   ═══════════════════════════════════════════════════════════ */

.macro-analytics-card {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  padding: 18px 18px 16px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.02) 100%) !important;
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.06) inset,
    0 14px 40px -22px rgba(0,0,0,0.55);
}

/* Faixa accent superior (cor dinâmica via var --pcol) */
.macro-premium-card {
  --pcol: #8B5CF6;
  --pcol-soft: rgba(139, 92, 246, 0.18);
  position: relative;
}
.macro-premium-card::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--pcol), transparent);
  opacity: 0.55;
}
.macro-premium-card::after {
  content: '';
  position: absolute;
  top: -60px; right: -40px;
  width: 180px; height: 180px;
  background: radial-gradient(closest-side, var(--pcol-soft), transparent 70%);
  pointer-events: none;
  filter: blur(8px);
}

.macro-premium-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 0 14px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.2px;
  color: #E8EDF5;
}
.macro-premium-header .sub {
  font-size: 10px;
  font-weight: 500;
  color: #94A3B8;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}

/* ── HERO METRIC ─────────────────────────────── */
.macro-hero {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.macro-hero-left { min-width: 0; }
.macro-hero-eyebrow {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: #94A3B8;
  margin-bottom: 4px;
}
.macro-hero-value {
  font-size: 30px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.8px;
  background: linear-gradient(180deg, var(--pcol), color-mix(in srgb, var(--pcol) 60%, #ffffff 40%));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 0 24px color-mix(in srgb, var(--pcol) 30%, transparent);
}
.macro-hero-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.3px;
  background: color-mix(in srgb, var(--pcol) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--pcol) 45%, transparent);
  color: color-mix(in srgb, var(--pcol) 70%, #ffffff 30%);
  box-shadow: 0 0 14px color-mix(in srgb, var(--pcol) 22%, transparent);
}
.macro-hero-meta {
  font-size: 11px;
  font-weight: 600;
  color: #B8C2D1;
  text-align: right;
  line-height: 1.5;
}
.macro-hero-meta b { color: #E8EDF5; font-weight: 700; }

.macro-hero-delta {
  margin-top: 6px;
  font-size: 11px;
  color: #B8C2D1;
  letter-spacing: 0.2px;
}
.macro-hero-delta b { color: var(--pcol); font-weight: 700; }

/* ── SVG da curva premium ─────────────────────── */
.macro-curve-wrap {
  margin: 6px 0 4px;
  padding: 8px 4px 0;
  border-top: 1px dashed rgba(255,255,255,0.06);
}
.macro-curve-wrap svg {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
}

/* ── Grid de prazos (ladder) ─────────────────── */
.macro-tenor-row {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  margin-top: 8px;
}
.macro-tenor-cell {
  text-align: center;
  padding: 6px 2px;
  border-radius: 8px;
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.05);
  transition: transform .15s, background .15s, border-color .15s;
}
.macro-tenor-cell:hover {
  background: rgba(255,255,255,0.05);
  border-color: color-mix(in srgb, var(--pcol) 35%, transparent);
  transform: translateY(-1px);
}
.macro-tenor-label {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.6px;
  color: #94A3B8;
  text-transform: uppercase;
}
.macro-tenor-value {
  font-size: 12px;
  font-weight: 700;
  color: #E8EDF5;
  margin-top: 2px;
  font-variant-numeric: tabular-nums;
}

/* ── Juro Real: KPI grid ─────────────────────── */
.macro-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-top: 14px;
}
.macro-kpi-tile {
  position: relative;
  padding: 10px 8px;
  border-radius: 12px;
  text-align: center;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
  border: 1px solid rgba(255,255,255,0.07);
  transition: transform .15s, border-color .15s, background .15s;
}
.macro-kpi-tile:hover {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.03));
  border-color: color-mix(in srgb, var(--pcol) 35%, rgba(255,255,255,0.1));
  transform: translateY(-1px);
}
.macro-kpi-icon {
  font-size: 14px;
  margin-bottom: 4px;
  filter: drop-shadow(0 0 8px color-mix(in srgb, var(--pcol) 18%, transparent));
}
.macro-kpi-label {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: #94A3B8;
  margin-bottom: 4px;
}
.macro-kpi-value {
  font-size: 13.5px;
  font-weight: 800;
  color: #E8EDF5;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.3px;
}
.macro-kpi-value.is-na { color: #6B7383; font-size: 12px; font-weight: 600; }

/* Tema claro — ajusta contraste */
:root.theme-light .macro-analytics-card,
[data-theme="light"] .macro-analytics-card {
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%) !important;
  border-color: rgba(15,23,42,0.08);
}
:root.theme-light .macro-premium-header,
:root.theme-light .macro-hero-value,
:root.theme-light .macro-kpi-value,
:root.theme-light .macro-tenor-value,
[data-theme="light"] .macro-premium-header,
[data-theme="light"] .macro-hero-value,
[data-theme="light"] .macro-kpi-value,
[data-theme="light"] .macro-tenor-value { color: #0F172A; }
:root.theme-light .macro-hero-eyebrow,
:root.theme-light .macro-tenor-label,
:root.theme-light .macro-kpi-label,
:root.theme-light .macro-premium-header .sub,
[data-theme="light"] .macro-hero-eyebrow,
[data-theme="light"] .macro-tenor-label,
[data-theme="light"] .macro-kpi-label,
[data-theme="light"] .macro-premium-header .sub { color: #475569; }

/* Mobile */
@media (max-width: 560px) {
  .macro-kpi-grid { grid-template-columns: repeat(2, 1fr); }
  .macro-tenor-row { grid-template-columns: repeat(4, 1fr); row-gap: 6px; }
  .macro-hero-value { font-size: 26px; }
  .macro-hero { flex-direction: column; align-items: flex-start; }
  .macro-hero-meta { text-align: left; }
}