@import url("theme.css");

html {
  font-family: var(--font-family-base);
  color: var(--color-text-main);
  background-color: var(--color-bg-base);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-family-heading);
  color: var(--color-primary);
}

h2 b {
  font-family: var(--font-family-heading);
}

nav {
  font-family: var(--font-family-base);
}

/* CARDS for Statistics */
.stat-card {
  padding: var(--spacing-4);
  background-color: var(--color-bg-card);
  border-radius: var(--border-radius-md);
  box-shadow: var(--shadow-md);
  color: var(--color-text-inverted);
}

#lider_tabla {
  background-color: var(--color-success);
  color: var(--color-text-inverted);
  font-size: var(--font-size-3xl);
  font-family: var(--font-family-heading);
  padding: var(--spacing-4);
  border-radius: var(--border-radius-md);
  box-shadow: var(--shadow-md);
}

#lider_tabla h2,
#lider_tabla h2 span {
  color: var(--color-text-inverted);
  font-family: var(--font-family-heading);
  font-size: 1.5rem;
}

#lider_dif {
  background-color: var(--color-warning);
  color: var(--color-text-inverted);
  font-size: var(--font-size-3xl);
  font-family: var(--font-family-heading);
  padding: var(--spacing-4);
  border-radius: var(--border-radius-md);
  box-shadow: var(--shadow-md);
}

#lider_dif h2,
#lider_dif h2 span {
  color: var(--color-text-inverted);
  font-family: var(--font-family-heading);
  font-size: 1.5rem;
}

#ultimo_tabla {
  background-color: var(--color-danger);
  color: var(--color-text-inverted);
  font-size: var(--font-size-3xl);
  font-family: var(--font-family-heading);
  padding: var(--spacing-4);
  border-radius: var(--border-radius-md);
  box-shadow: var(--shadow-md);
}

#ultimo_tabla h2,
#ultimo_tabla h2 span {
  color: var(--color-text-inverted);
  font-family: var(--font-family-heading);
  font-size: 1.5rem;
}

.grande {
  font-size: var(--font-size-huge);
  /* ~72px */
  text-align: left;
  font-family: var(--font-family-heading);
  display: block;
}

#forma {
  background-color: var(--color-bg-highlight);
  font-family: var(--font-family-base);
  padding: var(--spacing-4);
  border-radius: var(--border-radius-md);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--color-primary);
}

#observablehq-footer {
  display: none;
}

/* Table Styles from existing CSS but updated */
.inputs-3a86ea-table tbody tr:first-child td {
  width: 220px;
  text-overflow: visible;
  overflow: visible;
}

/* Champions League / Top 4 */
tr:nth-child(-n+4) {
  background-color: var(--color-info);
  color: var(--color-text-inverted);
}

/* Europa League / Next */
tr:nth-child(n+5) {
  background-color: var(--color-success);
  color: var(--color-text-inverted);
}

/* Relegation Zone - Bottom 3 */
tr:nth-last-child(-n+3) {
  background-color: var(--color-warning);
  color: var(--color-text-inverted);
}

/* Direct Relegation - Bottom 2 */
tr:nth-last-child(-n+2) {
  background-color: var(--color-danger);
  color: var(--color-text-inverted);
}

/* General Cell Styling */
tr td {
  color: inherit;
  /* inherit from row */
  font-family: var(--font-family-base);
}

/* Middle of the table (Mid-table teams) */
/* nth-child(n+8) start after Europa (approx) and end before relegation */
/* The original logic was: tr:nth-child(n+8):nth-last-child(n+4) */
tr:nth-child(n+8):nth-last-child(n+4) td {
  background-color: var(--color-bg-card);
  color: var(--color-text-main);
}

table {
  table-layout: auto;
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-family-base);
}

td {
  overflow: visible;
  white-space: nowrap;
  padding: var(--spacing-1) var(--spacing-2);
}

td:nth-child(2) {
  text-overflow: visible;
}

.plot-d6a7b5 {
  font-family: var(--font-family-base);
  width: 100%;
}

p {
  font-family: var(--font-family-base);
  line-height: 1.6;
  color: var(--color-text-main);
}

label {
  font-family: var(--font-family-base);
  font-weight: 500;
}