/*Aquest codi CSS inclou:
Reset bàsic
Estils generals del body
Estils de capçalera i navegació
Estils del contenidor principal
Estils de peu de pàgina
Components reutilitzables com targetes i botons
Consultes de mitjans (media queries) per a disseny responsive
Cada secció està comentada per explicar què fa cada part del codi.*/
/*-------------------------------------------------------------------------*/

/* Reset bàsic per eliminar marges i farcits per defecte */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box; /* Fa que el padding i border no augmentin l'amplada/alçada dels elements */
}

/* Estils per al cos de la pàgina */
body {
  font-family: 'Arial', sans-serif; /* Defineix la font principal */
  line-height: 1.6; /* Espaiat entre línies per millor llegibilitat */
  color: #333; /* Color de text principal */
  background-color: #f4f4f4; /* Color de fons del cos */
  padding: 20px; /* Espai interior al voltant del contingut */
}

/* Capçalera principal */
.header {
  background-color: #35424a; /* Color de fons */
  color: #ffffff; /* Color de text */
  padding: 20px 0; /* Espai interior (20px a dalt/baix, 0 als costats) */
  text-align: center; /* Alineació del text al centre */
  margin-bottom: 20px; /* Marge inferior */
}

/* Contenidor del logo */
.logo-container {
    display: flex;
    justify-content: center; /* Centra horitzontalment */
    margin-bottom: 15px; /* Espai entre el logo i el títol */
}

/* Enllaç del logo */
.logo-link {
    display: inline-block; /* Permet aplicar dimensions */
    transition: transform 0.3s ease; /* Animació suau al hover */
}

/* Efecte hover per interactivitat */
.logo-link:hover {
    transform: scale(1.05); /* Lleugerament més gran al passar el ratolí */
}

/* Estil de la imatge del logo */
/* LOGO CENTRAT */
.logo-img {
    height: 200px; /* Altura fixa (ajusta segons necessitis) */
    width: auto; /* Amplada proporcional */
    max-width: 400px; /* Amplada màxima per evitar que es faci massa gran */
    
    /* Opcional: filtre per hover (efecte de color) */
    filter: brightness(1);
    transition: filter 0.3s ease;
}
/* Efecte de color al passar el ratolí (opcional) */
.logo-link:hover .logo-img {
    filter: brightness(1.1);
}

/* Versió responsive per a mòbils */
@media (max-width: 768px) {
    .logo-img {
        height: 60px; /* Logo més petit en mòbils */
    }
    
    .logo-container {
        margin-bottom: 10px; /* Menys espai en mòbils */
    }
}
    /* 1. Logo al costat del títol:*/
/* .header-content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px; /* Espai entre logo i títol 
}
.titles {
    text-align: left;
}

    /* Ajustos responsive 
@media (max-width: 600px) {
    .header-content {
        flex-direction: column;
        gap: 10px;
    }
    .titles {
        text-align: center;
    }
}
*/
    /*2. Logo a la barra de navegació:*/
/*.nav-container {
    display: flex;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.nav-logo {
    height: 40px;
    margin-right: 30px;
}*/

/* Títol principal */
.main-title {
  font-size: 2.5em; /* Mida de la font */
  margin-bottom: 10px; /* Espai sota el títol */
}

/* Barra de navegació */
.navbar {
  background-color: #0A95A8; /* Color de fons */
  padding: 10px; /* Espai interior */
}

/* Llista de navegació */
.nav-list {
  list-style: none; /* Elimina els punts de la llista */
  display: flex; /* Fa que els elements es disposin en fila */
  justify-content: center; /* Centra els elements horitzontalment */
}

/* Elements de la navegació */
.nav-item {
  margin: 0 15px; /* Marge als costats de cada element */
}

/* Enllaços de navegació */
.nav-link {
  color: white; /* Color del text */
  text-decoration: none; /* Elimina el subratllat */
  font-weight: bold; /* Text en negreta */
  transition: color 0.3s; /* Transició suau per al canvi de color */
}

/* Canvi de color en passar el ratolí */
.nav-link:hover {
  color: #f0f0f0; /* Color més clar al hover */
}

/* Contenidor principal */
.container {
  max-width: 1200px; /* Amplada màxima */
  margin: 0 auto; /* Centrat horitzontalment */
  padding: 0 20px; /* Espai als costats dins del contenidor */
}

/*CSS per a Taules amb Comentaris Detallats*/

/* Estil base per a totes les taules */
table {
  width: 100%; /* Ocupa tot l'amplada del seu contenidor */
  border-collapse: collapse; /* Fusiona les vores de les cel·les */
  margin: 20px 0; /* Marge exterior (20px a dalt/baix, 0 als costats) */
  font-size: 0.9em; /* Mida de font lleugerament més petita que el text normal */
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.1); /* Ombra subtil per a profunditat */
}

/* Capçalera de la taula */
thead tr {
  background-color: #35424a; /* Color de fons */
  color: #ffffff; /* Color del text */
  text-align: left; /* Alineació del text a l'esquerra */
}

/* Cel·les de la capçalera i del cos */
th, td {
  padding: 12px 15px; /* Espai interior (12px a dalt/baix, 15px als costats) */
  border: 1px solid #dddddd; /* Vora subtil */
}

/* Files del cos de la taula */
tbody tr {
  border-bottom: 1px solid #dddddd; /* Vora inferior per a separació */
}

/* Alternança de colors per a les files (zebra pattern) */
tbody tr:nth-child(even) {
  background-color: #f3f3f3; /* Color de fons per a files parelles */
}

/* Efecte hover per a les files */
tbody tr:hover {
  background-color: #e0e0e0; /* Color de fons quan es passa el ratolí */
  cursor: pointer; /* Canvia el cursor a pointer */
}

/* Estil per a la darrera fila */
tbody tr:last-of-type {
  border-bottom: 2px solid #35424a; /* Vora inferior més gruixuda */
}

/* Estil per a cel·les destacades (opcional) */
td.highlight {
  font-weight: bold; /* Text en negreta */
  color: #e8491d; /* Color destacat (coherent amb l'esquema de colors) */
}

/* Estils responsius per a pantalles petites */
@media (max-width: 768px) {
  table {
    display: block; /* Canvia a display block per permetre desplaçament horitzontal */
    overflow-x: auto; /* Afegeix desplaçament horitzontal si cal */
    white-space: nowrap; /* Evita el trencament de línia */
  }
  
  th, td {
    padding: 8px 10px; /* Padding reduït en mòbil */
  }
}
/*Explicació dels estils principals de la taula:
Estructura bàsica:
    border-collapse: collapse fusiona les vores per a un aspecte més net
    box-shadow afegeix profunditat visual sense distreure
Capçalera:
    Colors contrastats per a diferenciar-la del cos
    Text alineat consistentment
Cel·les:
    Padding generós per a millor llegibilitat
    Vores subtils per a definició sense sobrecarregar
Files alternades:
    Patró zebra (nth-child) millora la scanneabilitat
    Efecte hover per a interactivitat
Responsivitat:
    En mòbils, permet desplaçament horitzontal
    Redueix padding per adaptar-se a espais petits
Detalls addicionals:
    Darrera fila destacada com a tancament visual
    Classe .highlight per a cel·les especials
Aquests estils creen una taula professional, accessible i responsive que s'integra
amb l'exemple HTML proporcionat anteriorment.*/

/* Nota al peu de pàgina */

  .foot-note {
    margin-top: 20px;
    border-top: 1px solid #ccc;
    padding-top: 8px;
    font-size: 0.9em;
  }
  .foot-note-return {
    text-align: right;
    font-size: 0.8em;
    color: black;
  }

/*Per utilitzar aquesta nota:
Al text principal posa: <a href="#ftn1" id="_ftnref1">[1]</a> on vulguis la referència
    La nota al peu anirà al final de la pàgina amb el codi que t'he proporcionat
Pots ajustar:
    El gruix de la línia canviant 1px a 0.5px o 2px
    El color de la línia canviant #ccc (gris clar) per un altre valor
    La mida de la lletra ajustant els valors 0.9em i 0.8em*/

/* Estil per al peu de pàgina */
/* Peu de pàgina */
.footer {
  background-color: #35424a; /* Color de fons */
  color: white; /* Color de text */
  text-align: center; /* Text centrat */
  padding: 20px 0; /* Espai interior */
  margin-top: 20px; /* Marge superior */
}

/* Estils per a targetes (cards) */
.card {
  background: white; /* Fons blanc */
  border-radius: 5px; /* Cantonades arrodonides */
  box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* Ombra subtil */
  padding: 20px; /* Espai interior */
  margin-bottom: 20px; /* Espai entre targetes */
}

/* Estils per a botons */
.btn {
  display: inline-block; /* Permet margin/padding com a block però no ocupa tota l'amplada */
  background: #e8491d; /* Color de fons */
  color: white; /* Color de text */
  padding: 10px 20px; /* Espai interior */
  border: none; /* Sense vora */
  border-radius: 5px; /* Cantonades arrodonides */
  cursor: pointer; /* Cursor de pointer al passar per sobre */
  transition: background 0.3s; /* Transició suau del color de fons */
}

/* Canvi de color al passar el ratolí */
.btn:hover {
  background: #333; /* Color de fons més fosc */
}

/* Estils per a dispositius mòbils (responsive) */
@media (max-width: 768px) {
  /* Canvia la navegació a columna en pantalles petites */
  .nav-list {
    flex-direction: column; /* Elements en columna */
  }
  
  .nav-item {
    margin: 5px 0; /* Marge reduït entre elements */
  }
  
  /* Redueix el padding del contenidor */
  .container {
    padding: 0 10px;
  }
}