/* Importar la font Latin Modern (la versió web de Computer Modern) */
@import url('https://cdn.jsdelivr.net/gh/aaaakshat/cm-web-fonts@latest/fonts.css');

body {
  /* Aplicar la font a tot el document */
  font-family: "Computer Modern Serif", serif;
  
  /* Justificar el text */
  text-align: justify;
  
  /* Activar guions automàtics perquè la justificació no deixi forats grans */
  hyphens: auto; 
}

/* Opcional: Perquè els títols també tinguin la mateixa lletra */
h1, h2, h3, h4, h5, h6 {
  font-family: "Computer Modern Serif", serif;
}

/* --- Estils per als contenidors de nivells --- */
.exercicil1, .exercicil2, .exercicil3 {
  padding: 1em;
  margin-bottom: 1.5em;
  border-radius: 8px;
  border: 1px solid transparent; /* Per donar consistència */
}

/* --- Colors (Exemple: Verd per Nivell 1) --- */
.exercicil1 {
  background-color: #f1f8e9; /* Fons molt suau */
  border-left: 6px solid #4caf50; /* Barra lateral verda */
  padding: 1em; margin-bottom: 1.5em; border-radius: 5px;
}

/* Nivell 2 (Mig - Taronja) */
.exercicil2 {
  background-color: #fff3e0; /* Taronja molt suau */
  border-left: 5px solid #ff9800; /* Taronja fort */
  padding: 1em; margin-bottom: 1.5em; border-radius: 5px;
}

/* Nivell 3 (Difícil - Vermell) */
.exercicil3 {
  background-color: #ffebee; /* Vermell molt suau */
  border-left: 5px solid #f44336; /* Vermell fort */
  padding: 1em; margin-bottom: 1.5em; border-radius: 5px;
}

/* --- Truc de màgia per al Títol de l'exercici --- */
.exercicil1 h3 {
  margin-top: 0;       /* Treure l'espai buit a dalt del títol */
  color: #2e7d32;      /* Color del text del títol (verd fosc) */
  font-size: 1.2em;    /* Mida del títol */
  font-weight: bold;
}
.exercicil2 h3 {
  margin-top: 0;       /* Treure l'espai buit a dalt del títol */
  color: #e65100;      /* Color del text del títol (verd fosc) */
  font-size: 1.2em;    /* Mida del títol */
  font-weight: bold;
}
.exercicil3 h3, .exercicil3 h4 { color: #b71c1c; margin-top: 0; }

/* Injectar la paraula "Exercici" abans del número */
.exercicil1 h4 .header-section-number::before,
.exercicil1 h3 .header-section-number::before,
.exercicil2 h4 .header-section-number::before,
.exercicil2 h3 .header-section-number::before,
.exercicil3 h3 .header-section-number::before,
.exercicil3 h4 .header-section-number::before {
  content: "Exercici ";  /* L'espai al final és important */
  font-weight: normal;   /* Opcional: si vols que la paraula no sigui negreta */
}


/* Opcional: Si vols separar una mica el número del títol */
.exercicil1 h4 .header-section-number,
.exercicil2 h4 .header-section-number,
.exercicil3 h4 .header-section-number {
  margin-right: 0.5em; /* Espai entre "Exercici 1.2.3" i el Títol */
}
/* Forçar que el fons de la solució sigui blau cel */
.callout-note {
  background-color: #e3f2fd !important;
  border-left-color: #2196f3 !important;
}