/* Reset general per evitar marges per defecte */
* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
    width: 100%;
    /* Ocupa el 100% de l'amplada */
    height: 100%;
    /* Canviat de 100vh a 100% */
    font-family: Arial, sans-serif;
    overflow: hidden;
    /* S'assegura que no apareguin barres de scroll */
}

/* El body s'organitza de dalt cap a baix */
body {
    display: flex;
    flex-direction: column;
}

/* Capçalera a dalt de tot */
header {
    background-color: #3b82f6;
    /* Color blau */
    color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 2% 4%;
    /* Marges interns usant % */
    height: 15%;
    /* La capçalera ocupa un 15% de la pantalla */
}

.header-info h1 {
    margin: 0;
    font-size: 2.2vw;
    /* vw = % de la pantalla, perquè el text creixi/encongeixi amb l'ordinador/tablet */
    font-weight: normal;
}

.header-info p {
    margin: 2% 0 0 0;
    font-size: 1.2vw;
}

.user-icon {
    font-size: 1.5vw;
    background-color: white;
    border-radius: 50%;
    /* Això fa el cercle perfecte malgrat els % */
    width: 3.5vw;
    /* Utilitzem vw per mantenir la proporció quadrada d'un cercle sense xafar-se */
    height: 3.5vw;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.user-icon:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* Part principal a sota de la capçalera */
main {
    display: flex;
    width: 100%;
    height: 85%;
    /* 100% total - 15% de capçalera = 85% de la pantalla restant. */
    background-color: #f9f9f9;
}

/* Columna de l'esquerra (Botons) */
aside {
    width: 20%;
    /* Ara ocupa el 20% de l'amplada de la pantalla! */
    height: 100%;
    display: flex;
    flex-direction: column;
    /* Col·loca els botons de dalt a baix */
    justify-content: center;
    /* Centrats verticalment */
    background-color: #f5f5f5;
}

aside button {
    color: white;
    border: none;
    padding: 8% 0;
    /* padding adaptant-se l'espai */
    width: 80%;
    /* El botó ocupa el 80% de l'espai de l'aside, així deixa pas buit al costat */
    font-size: 1.5vw;
    /* El text també s'adapta amb proporció de pantalla */
    margin-bottom: 10%;
    /* Espai sota cada botó usant % */
    border-radius: 0 40px 40px 0;
    /* Arrodonit només pel costat dret */
    cursor: pointer;
    transition: all 0.3s ease;
    /* Això fa l'animació suau quan creix el botó */
}

.btn-ateca {
    background-color: red;
}

.btn-agora {
    background-color: #3b82f6;
    /* Blau */
}

/* AQUEST ÉS L'ESTAT ACTIU QUE HAS DEMANAT PER FER-LO MÉS GRAN I AMB OMBRA */
aside button.active {
    width: 95%;
    /* Ara en comptes del 80% agafa el 95%, i per tant estira enfora! */
    box-shadow: 4px 6px 15px rgba(0, 0, 0, 0.4);
    /* Ombra cap a baix-dreta */
    font-weight: bold;
    /* Lletra una mica més dura per destacar */
}

/* Secció de la dreta (Imatge i contingut variable) */
.content {
    width: 80%;
    /* L'aside ja té 20%, el 80% es l'espai sobrant que omples complet */
    height: 100%;
    position: relative;
    overflow: hidden;
}

/* Aquí controlem com s'amaga o s'ensenya la informació basada en el javascript! */
.view-panel {
    display: none;
    /* Amagat per defecte */
    width: 100%;
    height: 100%;
}

.view-panel.active {
    display: block;
    /* Només mostrem el contingut actiu */
}

.view-panel img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Ajusta la imatge perquè no es deformi i cobreixi l'espai */
}