/* Páginas /insights/ en modo oscuro (mismo gris oscuro y amarillo de «¿Sabías que…?»). */
.ins-cab, .ins-cuerpo { color: #e9edf1; }
.ins-cab {
  padding: 8rem 0 2.5rem;
  background:
    radial-gradient(60rem 24rem at 85% -20%, rgba(255, 200, 0, 0.14), transparent 60%),
    linear-gradient(180deg, #14181c, #1a2026);
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.ins-cab h1 { color: #fff; font-family: "Montserrat", system-ui, sans-serif; }
.ins-cab h1::after {
  content: ""; display: block; width: 4rem; height: 4px; margin-top: .9rem; border-radius: 2px;
  background: linear-gradient(90deg, #ffc800, #ff6dc2, #00d3f9);
}
.ins-cab.text-center h1::after { margin-left: auto; margin-right: auto; }
.ins-cab .ins-suave, .ins-cuerpo .ins-suave { color: #aab4bf; }
.ins-cab a, .ins-cuerpo a { color: #ffc800; }
.ins-cab a:hover, .ins-cuerpo a:hover { color: #fff; }
.ins-cuerpo {
  padding: 2.5rem 0 4rem;
  background: linear-gradient(180deg, #1a2026, #14181c);
}

/* Filtro */
.ins-cuerpo .form-select {
  color: #e9edf1; background-color: #222a31; border-color: rgba(255,255,255,.18);
}
.ins-cuerpo .form-select:focus { border-color: #ffc800; box-shadow: 0 0 0 .2rem rgba(255, 200, 0, .25); }
.ins-cuerpo .form-label { color: #aab4bf; }

/* Tarjetas de la lista */
.ins-card {
  height: 100%;
  border: 1px solid rgba(255, 255, 255, .08); border-radius: 1rem;
  background: linear-gradient(145deg, #222a31, #1a2026);
  box-shadow: 0 .8rem 1.6rem rgba(0, 0, 0, .3);
  transition: transform .2s, border-color .2s, box-shadow .2s;
}
.ins-card:hover { transform: translateY(-3px); border-color: rgba(255, 200, 0, .55); box-shadow: 0 1rem 2rem rgba(0, 0, 0, .45); }
.ins-card h2 a { color: #fff; }
.ins-card h2 a:hover { color: #ffc800; }
.ins-mini { margin: .5rem 0 .75rem; }
.ins-lienzo { min-height: 260px; border-radius: .75rem; background: rgba(0, 0, 0, .18); }
.ins-lienzo.ins-sin { min-height: 0; background: none; }
.ins-ver { font-weight: 700; text-decoration: none; }
.ins-ver i { margin-left: .25rem; font-size: .8em; transition: transform .2s; }
.ins-ver:hover i { transform: translateX(4px); }
.ins-card .ins-kpi { color: #ffc800; font-family: "Montserrat", system-ui, sans-serif; }

/* Detalle */
.ins-kpi-grande { color: #ffc800; font-family: "Montserrat", system-ui, sans-serif; }
.ins-texto { color: #d5dbe2; font-size: 1.05rem; line-height: 1.65; }
.ins-grafico {
  padding: 1rem; border: 1px solid rgba(255, 255, 255, .08); border-radius: 1rem;
  background: linear-gradient(145deg, #222a31, #1a2026);
}
.ins-fuente { border-top: 1px solid rgba(255, 255, 255, .12); color: #aab4bf; }
.ins-cuerpo summary { color: #ffc800; cursor: pointer; }
.ins-cuerpo .table { --bs-table-bg: transparent; --bs-table-color: #e9edf1; --bs-table-striped-bg: rgba(255,255,255,.04);
  --bs-table-striped-color: #e9edf1; --bs-table-border-color: rgba(255,255,255,.1); }
.ins-pag a { color: #ffc800; }

/* Detalle: cierre con invitación */
.ins-lienzo-detalle { min-height: 380px; }
.ins-h2 { margin: 0 0 .6rem; color: #fff; font: 700 1.25rem/1.3 "Montserrat", system-ui, sans-serif; }
.ins-cta {
  margin-top: 3rem; padding: 2rem 1.5rem; text-align: center; border-radius: 1rem;
  border: 1px solid rgba(255, 200, 0, .35);
  background: radial-gradient(40rem 14rem at 50% -30%, rgba(255, 200, 0, .16), transparent 70%), linear-gradient(145deg, #222a31, #1a2026);
}
.ins-cta p { color: #d5dbe2; max-width: 36rem; margin: 0 auto 1.25rem; }
.ins-cta .btn { color: #14181c; }
.ins-cta .ins-cta-nota { color: #fff; font: italic 400 1.05rem/1.5 "Roboto Slab", Georgia, serif; }

/* Celular: gráficos más bajos (y fuentes más chicas en el JS) para que la página no se vuelva interminable */
@media (max-width: 575.98px) {
  .ins-lienzo { min-height: 210px; }
  .ins-lienzo-detalle { min-height: 270px; }
  .ins-grafico { padding: .5rem; }
  .ins-cab { padding: 6.5rem 0 1.75rem; }
  .ins-cuerpo { padding: 1.75rem 0 3rem; }
  .ins-texto { font-size: 1rem; }
  .ins-cta { padding: 1.5rem 1rem; margin-top: 2rem; }
}
@media (prefers-reduced-motion: reduce) { .ins-card { transition: none; } .ins-card:hover { transform: none; } }