/* Força que l'scroll provingui de la finestra global perquè la barra de la plantilla es quedi 100% fixa d'entrada al mòbil */
html, body {
    overflow-x: hidden !important;
    position: relative !important;
    height: auto !important;
}

/* --- Variables CSS per a colors i mides. --- */
:root {
    /* 1. Unificació del fons amb la plantilla comuna */
    --color-fons-pagina: #f8fafc;       /* Gris clar modern en lloc del groc #FFFFCC */
    --color-text-fosc: #0f172a;         /* El blau-negre fosc de la plantilla */
    
    /* 2. Adaptació dels blaus corporatius de la web */
    --color-principal: #0369a1;         /* El blau corporatiu de les teves pastilles i menús */
    --color-principal-fosc: #025a87;    /* El blau per als efectes hover */
    --color-blau-clar: #e0f2fe;         /* El fons blau cel per al solucionari i botons actius */
    --color-blau-destacat: #38bdf8;     /* El blau elèctric dels focus */
    --color-blau-link-visitado: #0369a1;

    /* 3. Neteja de contrastos de la cerca */
    --color-blanc: #ffffff;
    --color-negre: #0f172a;
    --color-gris-claret: #f1f5f9;       /* Fons de la barra de paginació inferior */
    --color-gris-clar: #e2e8f0;         /* Línies divisòries i vores fines */
    --color-gris-mig: #94a3b8;          /* Textos secundaris o vores de controls */
    --color-gris-fosc: #475569;         /* Textos de suport i registres */
    --color-gris-fons-control: #ffffff; /* Desplegables en blanc pur (més modern) */
    --color-gris-fons-disabled: #f1f5f9;
    --color-transparent: transparent;

    /* 4. Colors d'alerta i etiquetes (Triat el taronja préssec) */
    --color-vermell: #ef4444;           /* Un vermell més suau i professional per a l'ID del problema */
    --color-groc: #ffd43b;              /* El groc alegre que fas servir per a les filter-tags */
    --color-groc-clar: #fff3bf;         /* El groc per ressaltar els selectors actius */
    --color-taronja-suau: #ffd8a8;      /* El taronja préssec final de les subtemàtiques */
    --color-verd: #d3f9d8;              /* El verd menta final de les temàtiques principals */
}

/* --- Estils Generals adaptats per al format modern --- */

.clearfix::after { /* Neteja el "float" indicant que s'ha acabat i així evitar que el text o altres elements que segueixen a la imatge s'alineïn de manera incorrecta */
  content: "";
  display: table;
  clear: both;
}

.align-horit-center {
  display: block;
  margin: 0 auto;
}

.align-horit-left {
  float: left;
  margin-right: 15px;
}

.align-horit-right {
  float: right;
  margin-left: 15px;
}

.align-vert-center {
  vertical-align: middle;
}

.align-vert-top {
  vertical-align: top;
}

.align-vert-bottom {
  vertical-align: bottom;
}

.mida-5 {
  width: 5%;
}

.mida-10 {
  width: 10%;
}

.mida-15 {
  width: 15%;
}

.mida-20 {
  width: 20%;
}

.mida-25 {
  width: 25%;
}

.mida-30 {
  width: 30%;
}

.mida-35 {
  width: 35%;
}

.mida-40 {
  width: 40%;
}

.mida-45 {
  width: 45%;
}

.mida-50 {
  width: 50%;
}

.mida-55 {
  width: 55%;
}

.mida-60 {
  width: 60%;
}

.mida-65 {
  width: 65%;
}

.mida-70 {
  width: 70%;
}

.mida-75 {
  width: 75%;
}

.mida-80 {
  width: 80%;
}

.mida-85 {
  width: 85%;
}

.mida-90 {
  width: 90%;
}

.mida-95 {
  width: 95%;
}

.mida-100 {
  width: 100%;
}

.interlineat-top-1-5 {
  margin-top: 1.5em;
}

.marges-vert-zero {
  margin-top: 0;
  margin-bottom: 0;
}

.tabulador-left-2 {
  padding-left: 2em;
}

.tabulador-left-3 {
  padding-left: 3em;
}

.tabulador-left-4 {
  padding-left: 4em;
}

.justificar-text {
  text-align: justify;
}

/* --- Capçalera i Barra de Filtres --- */
.capcalera {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: var(--color-fons-pagina);
    z-index: 1000;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    box-sizing: border-box;
}

.capcalera-principal {
    text-align: center;
    padding: 10px 0;
    box-sizing: border-box;
}

.capcalera-principal img {
    vertical-align: middle;
    margin-right: 15px;
    height: 90px;
    width: auto;
}

.capcalera-principal h1 {
    display: inline-block;
    margin: 0;
    font-size: 1.6875em;
    color: var(--color-principal);
    vertical-align: middle;
}

.capcalera a {
    text-decoration: none;
}

/* Estil per a la línia del peu de la cerca de resultats */
hr.linea {
    border: none;
    border-top: 2px solid var(--color-negre);
    margin: 0;
    padding: 0;
    width: 100%;
}

.linea-superior {
    margin-bottom: 10px;
}

.sec_subtitol {
    color: var(--color-negre);
    text-align: center;
    font-size: 2em;
    margin: 0; /* Eliminamos cualquier margen que interfiera */
    padding: 0;
}

.sec_controls-group {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
    width: 100%;
    max-width: 100%;
}

/* Canvis en l'estil dels controls per a una millor visualització */
.sec_controls-group select {
    padding-top: 1px;
    padding-bottom: 1px;
    padding-left: 8px;
    padding-right: 8px;
    border-radius: 4px;
    border: 1px solid var(--color-gris-mig);
    background-color: var(--color-gris-fons-control);
    min-width: 120px;
    flex: 1 0 auto; /* Permet que l'amplada s'ajusti automàticament */
    box-sizing: border-box;
    margin: 0;
}

.sec_controls-group button {
    padding: 8px 12px;
    border-radius: 4px;
    border: none;
    background-color: var(--color-principal);
    color: var(--color-blanc);
    cursor: pointer;
    white-space: nowrap; /* Evita que el text del botó es trenqui en dues línies */
}
.sec_controls-group button:hover {
    background-color: var(--color-principal-fosc);
}

#resetButton {
    background-color: #dee2e6; /* Gris amb una punta més d'intensitat i contrast */
    color: var(--color-principal); /* Text amb el blau de la teva web */
    border: 1px solid var(--color-principal); /* Vora fina de color blau */
    font-weight: bold; 
    transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}

#resetButton:hover {
    background-color: var(--color-principal); /* Blau complet al passar-hi el ratolí */
    color: var(--color-blanc); /* Text blanc per al contrast definitiu */
    border-color: var(--color-principal-fosc); /* La vora s'enfosqueix un punt */
}

/* --- Canvi de color per a filtres actius --- */
.sec_controls-group select.sec_filter-active {
    background-color: #fff3bf; /* Un groc lluminós, alegre i net */
    color: var(--color-negre);
    border-color: #6c757d; /* Vora grisa a joc amb la línia de sota dels filtres */
}

#active-filters-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
    padding: 10px 20px;
    width: 100%;
    box-sizing: border-box;
}

.sec_filter-tag {
    background-color: #ffd43b; /* <--- Groc alegre amb molta força */
    color: var(--color-negre);
    padding: 4px 8px 4px 12px; 
    border-radius: 20px; 
    font-size: 0.9em;
    font-weight: bold;
    display: flex;
    align-items: center;
    gap: 10px; 
    border: 1px solid var(--color-negre); 
}

/* Força que el botó de la creu (X) tingui el mateix fons grog i cap contorn extra */
.sec_filter-tag button,
.sec_filter-tag span.sec_close-btn,
.sec_filter-tag .sec_remove-filter {
    background-color: #ffd43b !important; /* <--- Mateix groc intens unificat */
    color: var(--color-negre);
    border: none;
    padding: 0 4px;
    margin: 0;
    cursor: pointer;
    font-weight: bold;
}

/* Opcional: una miqueta de reacció visual quan es passa el ratolí per sobre de la X */
.sec_filter-tag button:hover,
.sec_filter-tag span.sec_close-btn:hover {
    color: #cc0000; /* La X es posa vermella en fer hover per indicar que s'esborrarà */
}

.sec_filter-tag .sec_close-btn {
    background-color: var(--color-blau-clar);
    color: var(--color-negre);
    padding: 0px 10px; /* Ajusta el padding per a la "X" */
    border: none;
    border-radius: 0 20px 20px 0; /* Arrodoneix només la vora dreta */
    font-weight: normal;
    font-size: 1em;
    cursor: pointer;
    line-height: 1;
    border-left: 1px solid #e57e00;
}

.sec_filter-tag .sec_close-btn:hover {
    background-color: var(--color-blau-destacat);
    color: var(--color-blanc);
    font-weight: bold;
}

.sec_filter-actions {
    display: flex;
    align-items: center;
    justify-content: space-between; /* Força les etiquetes a l'esquerra i el botó a la dreta */
    width: 100%;
    padding: 10px 0;
    box-sizing: border-box;
    gap: 10px; 
}

.sec_filter-tag {
    padding: 0 5px 0 10px; /* Aplica el padding directament a l'etiqueta */
}

.sec_filter-tag span {
    /* No cal estil, el padding s'ha mogut al contenidor pare */
    padding-right: 0;
}

/* --- Media Query per a pantalles més petites --- */
@media (max-width: 768px) {
    /* Forcem que la capçalera fosca de la plantilla es mantingui 100% visible a mòbils */
    .capcalera, .menu-principal, header {
        display: flex !important; 
        position: relative !important; /* Evita que es mengi espai flotant si la pantalla és curta */
        width: 100% !important;
    }

    .sec_barra-filtros {
        flex-direction: column;
        align-items: center;
    }
    
    .sec_controls-group {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        max-width: 300px;
    }
    
    .sec_controls-group select, 
    .sec_controls-group button {
        width: 100%;
    }

    /* Reducció i adaptació de la barra de paginació inferior */
    #pagination-controls {
        flex-direction: column !important; /* Col·loca les línies una sota de l'altra */
        align-items: center !important;    /* Centra perfectament tot el bloc */
        gap: 15px !important;              /* Dona un espaiat net i vertical */
        width: 100% !important;            /* Evita que s'estiri cap als costats */
        padding: 10px 0 !important;
    }

    #pagination-center {
        display: flex !important;
        justify-content: center !important;
        flex-wrap: wrap !important;        /* Si hi ha moltes pàgines, salten de línia soles */
        gap: 5px !important;
    }

    #pagination-right {
        display: flex !important;
        flex-direction: row !important;    /* Manté el selector de files i el botó d'ordre de costat */
        justify-content: center !important;
        width: 100% !important;
        gap: 15px !important;
    }
}

#resultat {
    margin-top: 0;
    padding: 0;
    border: none;
    background-color: var(--color-transparent);
    min-height: 100px;
    border-radius: 0;
    margin-left: 0;
    margin-right: 0;
}

/* Recupera l'espaiat general del text dels enunciats */
#resultat p, #resultat div {
    line-height: 1.45 !important;
    margin-bottom: 12px !important;
}

/* Força l'augment d'espai SOTA del text vermell de l'exercici */
#resultat .pregunta-id,
#resultat p:first-of-type,
#resultat div > strong:first-child {
    display: block !important;
    margin-top: 0px !important;
    margin-bottom: 8px !important; /* <--- Augmenta aquest valor si vols encara més espai */
}

/* Espaiat controlat per als salts de línia */
#resultat br {
    content: "";
    margin-bottom: 8px;
    display: block;
}

/* --- Estil per a les etiquetes de temàtica i de subtemàtica dels resultats --- */
.sec_etiqueta-resultat {
    display: inline-block;
    padding: 1px 10px; /* Afegim una mica de padding vertical perquè quedi neta */
    border-radius: 0px; /* Es queden quadrades com tu volies */
    color: var(--color-negre);
    margin-right: 8px;
    font-size: 0.8em;
    font-weight: normal; /* Text una mica més definit */
    border: 3px solid var(--color-negre); /* <--- Vora de 1px a joc amb les de dalt */
    margin-bottom: 8px;
}

.sec_etiqueta-tematica {
    background-color: #d3f9d8 !important; /* <--- Verd menta lluminós, suau i net */
}

.sec_etiqueta-subtematica {
    background-color: #ffd8a8 !important; /* <--- Taronja préssec suau, fi i alegre */
}

.sec_etiquetes-container {
    margin-left: 15px; /* Ajusta aquest valor per canviar la tabulació */
    margin-top: 20px;
    margin-bottom: 15px; /* Afegeix un marge a la part inferior de les etiquetes */
}


.frase {
    margin-bottom: 10px;
    padding: 5px;
    position: relative;
}

.frase:last-child {
    border-bottom: none;
}

.frase:not(:first-child)::before {
    content: '';
    position: absolute;
    top: -10px; /* Ajusta la posició vertical de la línia */
    left: 0;
    right: 0;
    height: 4px; /* Gruix de la línia */
    background-color: var(--color-negre);
}

.frase.sec_resposta-mostrada::before {
    display: none;
}

/* 1. Forcem que abans del bloc [COMÚ] es dibuixi sempre la línia negra gruixuda */
.frase:not(:first-child)::before {
    content: '';
    position: absolute;
    top: -10px;
    left: 0;
    right: 0;
    height: 4px;
    background-color: var(--color-negre);
}

/* 2. En lloc d'esborrar la línia, la tornem a dibuixar però de color groguenc transparent (el color de fons) */
.frase.no-border-top::before {
    content: '';
    position: absolute;
    top: -10px;
    left: 0;
    right: 0;
    height: 4px; /* Manté el mateix gruix de barrera perquè no s'encavalquin */
    background-color: #ffffff !important; /* <--- Blanc pur, idèntic al fons real de la teva pantalla! */
    display: block !important;
}

/* 3. Ajustem l'espaiat superior perquè el bloc es vegi unificat però totalment a sota */
.frase.no-border-top {
    margin-top: 5px !important; /* Dona prou espai net perquè caigui una a sota de l'altra */
    padding-top: 5px !important;
    clear: both !important;      /* Trenca qualsevol intent de posar-se de costat */
}

.sec_solucionari-container {
  display: block;      /* Força que ocupi tota la línia i se'n vagi a sota */
  width: 100%;         /* S'assegura d'omplir tota l'amplada de la caixa */
  clear: both;         /* Trenca qualsevol acoblament amb elements anteriors */
  text-align: right;   /* Manté el text alineat a la dreta del tot */
  margin-top: 15px;    /* Dona una mica més d'espai net respecte a la pregunta */
}

.sec_resposta-link {
    margin-left: 15px;
    color: var(--color-principal);
    text-decoration: none;
    font-weight: bold;
    cursor: pointer;
	font-size: 1.25em;
}
.sec_resposta-link:hover {
    text-decoration: underline;
}

.resposta-amb-imatge-centrada {
    text-align: center;
}

.frase-resposta {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
}

.frase.sec_resposta-mostrada {
    margin-top: 5px;
    padding-top: 15px;
    padding-left: 20px;
    border-left: 0px solid var(--color-gris-clar);
    background-color: var(--color-blau-clar);
    font-style: italic;
    position: relative;
    padding-bottom: 30px;
}

.frase-resposta img {
    max-width: 100%; /* La imatge mai serà més gran que el seu contenidor */
    height: auto;     /* Manté la proporció de la imatge */
    display: block;   /* Ajuda a evitar espais en blanc no desitjats */
    margin: 0 auto;   /* Centra la imatge dins del contenidor */
}

.frase-resposta .centrar-imatge {
    display: block;
    margin: 0 auto;
}

/* Força que les imatges del solucionari s'ajustin al fons blau cel al mòbil */
.sec_resposta-mostrada img {
    max-width: 100% !important;
    height: auto !important;
    display: block;
    margin: 10px auto;
}

.sec_tancar-resposta-link {
    position: absolute;
    bottom: 5px;
    right: 5px;
    font-style: normal;
    font-size: 0.8em;
    font-weight: bold;
    color: var(--color-principal);
    text-decoration: none;
    cursor: pointer;
    font-size: 1.25em;
}

.sec_tancar-resposta-link:hover {
    text-decoration: underline;
}

    
/* --- Estils per a la Paginació --- */
#pagination-controls {
    margin-top: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 3px;
    background-color: var(--color-gris-claret);
    padding: 10px;
    border-radius: 8px;
    border: 1px solid var(--color-gris-clar);
}

#pagination-center {
    display: flex;
    align-items: center;
    gap: 3px;
    flex-grow: 1;
    justify-content: center;
}

#pagination-right {
    display: flex;
    align-items: center;
    gap: 10px;
}
    
#pagination-controls button {
    padding: 6px 10px;    
    font-size: 0.9em;    
    background-color: var(--color-principal);
    color: var(--color-blanc);
    border: 1px solid var(--color-principal);
    border-radius: 50%;
    transition: background-color 0.3s, color 0.3s;
}

#pagination-controls button:hover:not(:disabled) {
    background-color: var(--color-principal-fosc);
}

#pagination-controls button:disabled {
    background-color: var(--color-gris-fons-disabled);
    color: var(--color-gris-fosc);
    border-color: var(--color-gris-fons-disabled);
    cursor: default;
}

#page-list a {
    display: block;
    padding: 6px 10px;
    text-decoration: none;
    color: var(--color-principal);
    font-size: 0.9em;
    border: none;
    border-radius: 50%;
    transition: background-color 0.3s;
}
#page-list a:hover {
    background-color: var(--color-blau-clar);
}

#page-list span.active {
    display: block;
    padding: 6px 10px;    
    font-size: 0.9em;
    background-color: var(--color-principal);
    color: var(--color-blanc);
    font-weight: bold;
    cursor: default;
    border-radius: 50%;
    border: 1px solid var(--color-principal);
}
    
#pagination-controls span {
    font-weight: bold;
}
#page-list {
    display: flex;
    align-items: center;
    list-style: none;
    padding: 0;
    margin: 0;
    gap: 3px;    
}

/* --- Estils per a la fletxa personalitzada del select --- */
.custom-select-wrapper {
    position: relative;
    display: inline-block;
    border: 1px solid var(--color-gris-mig);
    border-radius: 4px;
    background-color: var(--color-gris-fons-control);
    min-width: 70px;
}

.custom-select-wrapper select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding: 8px 30px 8px 10px;
    border: none;
    background-color: var(--color-transparent);
    cursor: pointer;
    width: 100%;
    box-sizing: border-box;
}

.custom-select-wrapper::after {
    content: '\25BC';
    color: var(--color-blanc);
    background-color: var(--color-principal);
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    width: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    border-radius: 0 4px 4px 0;
}

#sortButton {
    background-color: #007bff; /* Un blau com a exemple */
    color: #fff; /* Blanc */
    padding: 8px 12px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 2em;
}

#sortButton:hover {
    background-color: #0056b3; /* Un blau més fosc */
}


/* --- Estil per a la informació específica dels problemes --- */
.pregunta-id {
    color: var(--color-vermell);
    font-weight: bold;
    margin-bottom: 8px;
    font-size: 1.25em;
}

/* ==========================================================================
   SOLUCIÓ DESBORDAMENT MATHJAX I FORMULES AL MÒBIL
   ========================================================================== */

/* 1. Control de les fórmules matemàtiques de MathJax 3 */
mjx-container {
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    display: inline-block;
    vertical-align: middle;
}

/* Si la fórmula s'ha inserit com a bloc centrat separat del text */
mjx-container[display="true"] {
    display: block !important;
    padding: 8px 0;
}

/* 2. Blindatge de la caixa que conté la pregunta (fusiona o afegeix això) */
.frase {
    max-width: 100% !important; /* Evita que la caixa s'estiri més enllà de la pantalla del mòbil */
    overflow-x: hidden;         /* Talla qualsevol intent de desbordament del text de la base de dades */
}