/* La web del portafolio: los recuadros, las notas y las tablas. Los colores
   del tema estan en theme.scss. */
.kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 0.85rem;
  margin: 0.25rem 0 0.75rem;
}
.kpi {
  border: 1px solid #E5E7EB;
  border-radius: 14px;
  padding: 1rem 1.1rem;
  background: #FFFFFF;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 6px 18px rgba(79, 70, 229, 0.08);
}
.kpi .v { font-size: 2rem; font-weight: 800; line-height: 1.1; color: #4F46E5; }
/* El numero en degradado, solo donde el navegador lo sabe hacer: sin esto,
   el texto quedaria transparente, o sea invisible */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .kpi .v {
    background: linear-gradient(120deg, #4F46E5, #7C3AED);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}
.kpi .l { font-size: 0.85rem; color: #64748B; margin-top: 0.3rem; }
.nota { font-size: 0.85rem; color: #64748B; }
.tabla-simple { border-collapse: collapse; font-size: 0.9rem; margin: 0.5rem 0 1rem; }
.tabla-simple th, .tabla-simple td { border-bottom: 1px solid #E5E7EB; padding: 0.4rem 0.75rem; text-align: left; }
.tabla-simple th { color: #0F172A; font-weight: 600; }
.tabla-simple td.n { text-align: right; font-variant-numeric: tabular-nums; }
.baja { color: #E11D48; font-weight: 600; }
.sube { color: #059669; font-weight: 600; }