:root{
  --bg: #0b1026;
  --card: #0f172a;
  --muted: #94a3b8;
  --accent: #22d3ee; /* cyan-400 */
  --accent2: #6366f1; /* indigo-500 */
}
body {
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: radial-gradient(1200px 600px at 10% -20%, rgba(99,102,241,.25), transparent),
              radial-gradient(1200px 800px at 90% 0%, rgba(34,211,238,.18), transparent),
              var(--bg);
  margin: 0; padding: 0; color: #e2e8f0;
}

h1 { font-size: 2.2em; color: #fff; margin: 0 0 8px 0; }
h2 { font-size: 1.25em; color: var(--accent); margin: 6px 0 8px 0; }
p  { font-size: 1.03em; color: var(--muted);}

/* CONTENEDOR PRINCIPAL MÁS ANCHO */
.container {
  display: flex; flex-wrap: wrap; justify-content: space-between;
  max-width: 1100px; /* antes 900px */
  margin: 18px auto; padding: 18px;
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02));
  border: 1px solid rgba(148,163,184,.15);
  border-radius: 16px; box-shadow: 0 20px 40px rgba(0,0,0,.35);
}

.column { width: 48%; box-sizing: border-box; }
.column.left { text-align: left; }
.column.right { text-align: left; background: rgba(15,23,42,.6); padding: 12px 14px; border-radius: 12px; border: 1px solid rgba(148,163,184,.15);}

.chart-row { display: flex; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.chart-container { width: 48%; background: var(--card); padding: 10px; border-radius: 12px; box-shadow: inset 0 1px 0 rgba(255,255,255,.05);}

/* CADA GRÁFICO */
.full-width-chart {
  width: 100%; max-width: 1100px; /* evita desbordes */
  height: 280px; background: var(--card); padding: 12px; border-radius: 14px;
  border: 1px solid rgba(148,163,184,.12); box-shadow: 0 10px 30px rgba(2,6,23,.5);
  margin: 12px auto; box-sizing: border-box;
}

canvas { width: 100% !important; height: 100% !important; display: block; }

.column.right p { font-size: 1.02em; color: #cbd5e1;}
.column.right strong { color: var(--accent2);}

/* Responsivo */
@media (max-width: 1100px){ .container{ max-width: 95%; padding: 14px; } }
@media (max-width: 900px){ .column{ width: 100%; margin-bottom: 10px;} .full-width-chart{ max-width: 100%; height: 240px;} }
@media (max-width: 600px){ h1{font-size:1.6em;} h2{font-size:1.15em;} .full-width-chart{height:210px;} }