:root {
  /* Tipografía */
  --font-main: "Poppins", sans-serif;

  /* Colores base */
  --color-text-muted: #5c636a;

  /* Colores por sección */
  --color-prestamos: #157347;
  --color-multas: #ffca2c;
  --color-cuotas: #31d2f2;

  /* UI */
  --tab-radius-mobile: 16px;
  --tab-border-width: 1px;
}

body {
  font-family: var(--font-main);
}

.nav-link {
  color: var(--color-text-muted);
  transition: color 0.2s ease;
}

/* Préstamos */
#prestamos-tab.active,
#prestamos-tab:hover {
  color: var(--color-prestamos);
}

/* Multas */
#multas-tab.active,
#multas-tab:hover {
  color: var(--color-multas);
}

/* Cuotas */
#cuotas-tab.active,
#cuotas-tab:hover {
  color: var(--color-cuotas);
}

@media (max-width: 768px) {
  #prestamos-tab.active {
    border: var(--tab-border-width) solid var(--color-prestamos);
    border-radius: var(--tab-radius-mobile);
  }

  #multas-tab.active {
    border: var(--tab-border-width) solid var(--color-multas);
    border-radius: var(--tab-radius-mobile);
  }

  #cuotas-tab.active {
    border: var(--tab-border-width) solid var(--color-cuotas);
    border-radius: var(--tab-radius-mobile);
  }

  #cuotas-tab {
    margin-bottom: 12px;
  }
}