/*
 * Rationum — capa de refinamiento tipográfico
 * Se carga DESPUÉS de tailwind.css. No sustituye nada: solo ajusta escala,
 * ritmo vertical y alineación de cifras para que la pantalla se lea de un vistazo.
 * Referencia: Trade Republic / Revolut. 31-ago-2026.
 */

/* ---------------------------------------------------------------
   1. Cifras: todas tabulares y con el interletraje cerrado.
      Sin esto los números "bailan" al actualizarse y las columnas
      de importes no cuadran verticalmente.
   --------------------------------------------------------------- */

.privacy-sensitive,
.font-mono,
[class*="tabular"] {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "ss01" 1;
}

/* ---------------------------------------------------------------
   2. La cifra principal manda. Es lo único que se mira al abrir.
   --------------------------------------------------------------- */

.text-3xl.privacy-sensitive,
p.text-3xl.font-medium.privacy-sensitive {
  font-size: 2.75rem;
  line-height: 1.04;
  font-weight: 600;
  letter-spacing: -0.035em;
}

@media (max-width: 480px) {
  .text-3xl.privacy-sensitive,
  p.text-3xl.font-medium.privacy-sensitive {
    font-size: 2.35rem;
  }
}

/* Cifras de segundo nivel (los totales por grupo de cuentas) */
.text-2xl.privacy-sensitive {
  font-size: 1.6rem;
  letter-spacing: -0.025em;
  font-weight: 600;
  line-height: 1.1;
}

/* ---------------------------------------------------------------
   3. La etiqueta que va encima de una cifra deja de competir con ella:
      pequeña, en versalitas, gris. Solo la primera línea de la tarjeta.
   --------------------------------------------------------------- */

.bg-container > p.text-sm.text-secondary:first-child {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.85;
}

/* ---------------------------------------------------------------
   4. Aire. Las tarjetas respiran y dejan de parecer cajas apretadas.
   --------------------------------------------------------------- */

.bg-container.rounded-xl.p-4 {
  padding: 1.5rem 1.375rem;
}

.bg-container.rounded-xl {
  border-radius: 18px;
}

/* Cajas dentro de cajas: la interior pierde el relleno gris y se
   queda con una línea, que es lo que hace Trade Republic. */
.bg-container .bg-surface.rounded-lg {
  border-radius: 12px;
}

/* ---------------------------------------------------------------
   5. Ritmo de las listas: filas más altas y separadas por línea fina,
      no por bloques de color.
   --------------------------------------------------------------- */

#net-worth-chart {
  padding-top: 0.25rem;
}

/* ---------------------------------------------------------------
   6. El saludo deja de ocupar el sitio de la cifra.
   --------------------------------------------------------------- */

h1.text-xl.lg\:text-3xl {
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.015em;
}

@media (min-width: 1024px) {
  h1.text-xl.lg\:text-3xl {
    font-size: 1.5rem;
  }
}