/* =====================================================================
   Gestió de Serveis i Contractes — fulla d'estil de l'aplicació
   Es carrega després de Bootstrap 5.3 i n'ajusta els colors i els
   components perquè els formularis destaquin clarament sobre el fons.

   Colors i tokens seguint la guia d'estil compartida de les aplicacions
   internes de l'Ajuntament (ESTIL.md): tot color surt d'una variable
   definida aquí, mai fix a dins d'una regla, perquè el mode fosc
   (data-bs-theme="dark") només hagi de tocar aquest bloc.
   ===================================================================== */

:root {
    /* Color corporatiu i complementaris */
    --gc-primari:        #FF5757;   /* barra superior, marca, inicials */
    --gc-primari-boto:   #E8453F;   /* botons, accents i focus: prou fosc per llegir-hi blanc */
    --gc-primari-fosc:   #C9332E;
    --gc-primari-clar:   #FFECEB;   /* fons suaus i notes */
    --gc-fons:           #f1f1f1;
    --gc-superficie:     #ffffff;
    --gc-superficie-suau:#f7f7f8;   /* caixes interiors, files desplegables */
    --gc-capcalera:      #2f3237;   /* capçaleres de taula, en neutre */
    --gc-vora:           #d9d9dc;
    --gc-vora-forta:     #a8a8ad;
    --gc-text:           #26262a;
    --gc-text-fort:      #17171a;   /* títols i xifres que han de ressaltar més que --gc-text */
    --gc-text-suau:      #6b6b72;
    --gc-verd:           #1f9d55;
    --gc-taronja:        #e08a00;
    --gc-vermell:        #c81e1e;
    --gc-negre:          #26262a;
    --gc-gris:           #c9c9ce;
    --gc-blau:           #2563eb;

    /* Camps de formulari: fons tenyit perquè no es confonguin amb la
       targeta blanca on seuen. */
    --gc-camp-fons:         #ebebec;
    --gc-camp-fons-hover:   #e3e3e5;
    --gc-camp-fons-focus:   #ffffff;
    --gc-camp-vora:         #8e8e93;
    --gc-camp-fons-desact:  #dedee0;
    --gc-camp-vora-desact:  #b5b5ba;
    --gc-camp-text-desact:  #77777e;
    --gc-camp-fons-invalid: #fdf2f2;
    --gc-fletxa-select:     #C9332E;

    --gc-nota-text:       #7a2420;
    --gc-nota-avis-fons:  #fff7e6;
    --gc-nota-avis-text:  #7a4b00;
    --gc-btn-perill-text: #8f1d1d;
    --gc-btn-perill-vora: #b33232;
    --gc-btn-secundari-text: #55555c;

    /* Capçalera de l'aplicació i fons del login: degradat corporatiu. */
    --gc-capcalera-1: #E8453F;
    --gc-capcalera-2: #FF5757;
    --gc-capcalera-3: #FF7A6B;
    --gc-login-1: #C9332E;
    --gc-login-2: #FF5757;
    --gc-login-3: #FF8A7A;

    --gc-radi:  .6rem;
    --gc-ombra: 0 1px 2px rgba(0, 0, 0, .06), 0 4px 12px rgba(0, 0, 0, .05);

    --bs-primary:        #E8453F;
    --bs-primary-rgb:    232, 69, 63;
    --bs-link-color:     #C9332E;
    --bs-link-hover-color: #E8453F;
}

/* ------------------------------ Mode fosc ---------------------------- */
/* S'aplica amb l'atribut data-bs-theme="dark" a <html>, que gestiona
   assets/js/tema.js segons la preferència desada (clar/fosc/automàtic). */
:root[data-bs-theme="dark"] {
    --gc-primari:        #FF6B6B;
    --gc-primari-boto:   #F2594F;
    --gc-primari-fosc:   #FF8A80;
    --gc-primari-clar:   #3a2422;
    --gc-fons:           #121418;
    --gc-superficie:     #1c1f24;
    --gc-superficie-suau:#23262c;
    --gc-capcalera:      #0b0d10;
    --gc-vora:           #3d434d;
    --gc-vora-forta:     #545b66;
    --gc-text:           #e7e9ec;
    --gc-text-fort:      #ffffff;
    --gc-text-suau:      #9aa3af;
    --gc-verd:           #34c77a;
    --gc-taronja:        #f0a93a;
    --gc-vermell:        #ef5350;
    --gc-negre:          #e7e9ec;
    --gc-gris:           #6b7280;
    --gc-blau:           #5b8def;

    --gc-camp-fons:         #262a31;
    --gc-camp-fons-hover:   #2c3038;
    --gc-camp-fons-focus:   #1c1f24;
    --gc-camp-vora:         #3d434d;
    --gc-camp-fons-desact:  #1a1c20;
    --gc-camp-vora-desact:  #33373f;
    --gc-camp-text-desact:  #6b7280;
    --gc-camp-fons-invalid: #3a2422;
    --gc-fletxa-select:     #FF8A80;

    --gc-nota-text:       #ffd9d4;
    --gc-nota-avis-fons:  #3a2f12;
    --gc-nota-avis-text:  #f0c46a;
    --gc-btn-perill-text: #ff8a8a;
    --gc-btn-perill-vora: #b33232;
    --gc-btn-secundari-text: #c3c7cf;

    --gc-capcalera-1: #a83129;
    --gc-capcalera-2: #c23e35;
    --gc-capcalera-3: #d0564a;
    --gc-login-1: #7a231d;
    --gc-login-2: #a83129;
    --gc-login-3: #c23e35;

    --gc-ombra: 0 1px 2px rgba(0, 0, 0, .35), 0 6px 16px rgba(0, 0, 0, .35);

    --bs-primary:        #F2594F;
    --bs-primary-rgb:    242, 89, 79;
    --bs-link-color:     #FF8A80;
    --bs-link-hover-color: #FF6B6B;
}

/* El peu sempre a baix de tot, encara que la pàgina tingui poc contingut. */
body {
    background-color: var(--gc-fons);
    color: var(--gc-text);
    font-size: .95rem;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.gc-contingut { flex: 1 0 auto; }
.gc-peu { flex-shrink: 0; }

/* ----------------------------- Capçalera ---------------------------- */

.gc-capcalera {
    background: linear-gradient(90deg, var(--gc-capcalera-1), var(--gc-capcalera-2) 65%, var(--gc-capcalera-3));
    color: #fff;
    padding: .65rem 0;
    box-shadow: 0 2px 10px rgba(201, 51, 46, .28);
    position: sticky;
    top: 0;
    z-index: 1030;
}

.gc-marca {
    display: flex;
    align-items: center;
    gap: .65rem;
    color: #fff;
    text-decoration: none;
    font-size: 1.05rem;
}

.gc-marca:hover { color: #fff; }
.gc-marca-logo { height: 2.1rem; width: auto; display: block; }
.gc-marca-separador { width: 1px; height: 1.6rem; background: rgba(255, 255, 255, .35); }
.gc-marca small { display: block; font-size: .74rem; opacity: .8; font-weight: 400; }

.gc-nav { display: flex; gap: .25rem; }

.gc-nav-enllac {
    color: rgba(255, 255, 255, .85);
    text-decoration: none;
    padding: .45rem .9rem;
    border-radius: var(--gc-radi);
    font-weight: 500;
    /* Vora transparent sempre present, perquè l'enllaç actiu no canviï
       de mida en guanyar-la. */
    border: 1.5px solid transparent;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

.gc-nav-enllac:hover { background-color: rgba(255, 255, 255, .14); color: #fff; }

.gc-nav-enllac.actiu {
    background-color: rgba(255, 255, 255, .2);
    border-color: rgba(255, 255, 255, .8);
    color: #fff;
    font-weight: 600;
}

/* Botó blanc amb el nom en color corporatiu, ben visible sobre el
   degradat de la capçalera en qualsevol dels dos temes. */
.gc-usuari {
    display: flex;
    align-items: center;
    gap: .5rem;
    background: #fff;
    border: 1px solid rgba(255, 255, 255, .5);
    color: var(--gc-primari);
    border-radius: 2rem;
    padding: .3rem .8rem .3rem .35rem;
    font-size: .9rem;
    font-weight: 600;
}

.gc-usuari:hover, .gc-usuari:focus { background: #fff; color: var(--gc-primari-fosc); }

.gc-inicials {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    background: var(--gc-primari);
    color: #fff;
    font-weight: 700;
    font-size: .85rem;
}

/* Selector de tema (clar / fosc / automàtic) al menú d'usuari i al login. */
.gc-tema-opcions {
    display: flex;
    gap: .35rem;
    padding: .25rem .75rem .5rem;
}

.gc-tema-opcio {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .15rem;
    border: 1.5px solid var(--gc-vora);
    background: var(--gc-superficie-suau);
    color: var(--gc-text-suau);
    border-radius: .45rem;
    padding: .35rem .25rem;
    font-size: .68rem;
    font-weight: 600;
    cursor: pointer;
}

.gc-tema-opcio .bi { font-size: 1rem; }
.gc-tema-opcio:hover { border-color: var(--gc-primari-boto); color: var(--gc-primari-fosc); }
.gc-tema-opcio[aria-pressed="true"] {
    border-color: var(--gc-primari-boto);
    background: var(--gc-primari-clar);
    color: var(--gc-primari-fosc);
}

.gc-net-tema {
    position: absolute;
    top: 1rem;
    right: 1rem;
}

.gc-net-tema .gc-tema-opcio {
    background: rgba(255, 255, 255, .14);
    border-color: rgba(255, 255, 255, .4);
    color: #fff;
}

.gc-net-tema .gc-tema-opcio[aria-pressed="true"] { background: #fff; color: var(--gc-primari-fosc); }

.salta {
    position: absolute;
    top: .5rem;
    left: .5rem;
    z-index: 2000;
    background: var(--gc-superficie);
    color: var(--gc-text);
    padding: .5rem .9rem;
    border-radius: var(--gc-radi);
}

/* ----------------------------- Estructura --------------------------- */

.gc-contingut { padding: 1.75rem 0 3rem; }

.gc-peu {
    border-top: 1px solid var(--gc-vora);
    padding: 1rem 0;
    color: var(--gc-text-suau);
    font-size: .85rem;
    background: var(--gc-superficie);
}

.gc-titol-pagina {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.gc-titol-pagina h1, .gc-titol-simple {
    font-size: 1.55rem;
    font-weight: 700;
    margin-bottom: .15rem;
    color: var(--gc-text-fort);
}

.gc-titol-simple { margin-bottom: 1.25rem; }

.gc-subtitol {
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--gc-primari-fosc);
    margin-bottom: 1rem;
    padding-bottom: .4rem;
    border-bottom: 2px solid var(--gc-primari-clar);
}

/* Subtítol dins d'una secció que ja té el seu propi separador (per
   exemple, un subapartat com «Anualitats» dins de «Vigència i economia»). */
.gc-subtitol--net { border-bottom: 0; padding-bottom: 0; }

.gc-molla { font-size: .85rem; margin-bottom: .5rem; }

.gc-targeta {
    background: var(--gc-superficie);
    border: 1px solid var(--gc-vora);
    border-radius: var(--gc-radi);
    box-shadow: var(--gc-ombra);
    overflow: hidden;
}

.gc-targeta-pestanya { border-top-left-radius: 0; border-top-right-radius: 0; border-top: 0; }

.gc-caixa-interior {
    background: var(--gc-superficie-suau);
    border: 1px solid var(--gc-vora);
    border-radius: var(--gc-radi);
    padding: 1rem;
}

/* Selector amb cerca en viu (p. ex. proveïdor per nom o NIF). */
.gc-combo { position: relative; }

.gc-combo-opcions {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 20;
    margin-top: .25rem;
    max-height: 14rem;
    overflow-y: auto;
    background: var(--gc-superficie);
    border: 1px solid var(--gc-vora);
    border-radius: var(--gc-radi);
    box-shadow: var(--gc-ombra);
}

.gc-combo-opcio { padding: .45rem .7rem; cursor: pointer; font-size: .9rem; }
.gc-combo-opcio:hover { background: var(--gc-primari-clar); }
.gc-combo-opcio small { display: block; color: var(--gc-text-suau); }

/* Desplegable de selecció múltiple compacte (p. ex. el filtre d'estat):
   només mostra un resum d'una línia fins que es clica. */
.gc-multiselect { position: relative; }

.gc-multiselect-boto {
    width: 100%;
    text-align: left;
    cursor: pointer;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.gc-multiselect-opcions {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 20;
    margin-top: .25rem;
    max-height: 13rem;
    overflow-y: auto;
    background: var(--gc-superficie);
    border: 1px solid var(--gc-vora);
    border-radius: var(--gc-radi);
    box-shadow: var(--gc-ombra);
    padding: .4rem;
}

.gc-multiselect-opcio {
    display: flex;
    align-items: center;
    gap: .45rem;
    padding: .3rem .4rem;
    margin: 0;
    font-size: .85rem;
    font-weight: 400;
    border-radius: .35rem;
    cursor: pointer;
}

.gc-multiselect-opcio:hover { background: var(--gc-primari-clar); }

/* Quadre de cerca i llista de seleccionats dels avisos de venciment. */
.gc-llista-avis {
    max-height: 15rem;
    overflow-y: auto;
}

.gc-fila-avis {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    padding: .4rem .15rem;
    border-bottom: 1px solid var(--gc-vora);
}

.gc-fila-avis:last-of-type { border-bottom: 0; }
.gc-fila-avis small { font-size: .78rem; }

.gc-alerta { border-radius: var(--gc-radi); }

.gc-nota {
    background: var(--gc-primari-clar);
    border-left: 3px solid var(--gc-primari);
    border-radius: .35rem;
    padding: .6rem .85rem;
    font-size: .87rem;
    color: var(--gc-nota-text);
}

.gc-nota--avis {
    background: var(--gc-nota-avis-fons);
    border-left-color: var(--gc-taronja);
    color: var(--gc-nota-avis-text);
    font-weight: 500;
}

.gc-accions {
    display: flex;
    justify-content: flex-end;
    gap: .75rem;
    margin-top: 1.5rem;
}

/* ------------------------------ Filtres ----------------------------- */

.gc-filtres {
    background: var(--gc-superficie);
    border: 1px solid var(--gc-vora);
    border-radius: var(--gc-radi);
    box-shadow: var(--gc-ombra);
    padding: 1rem 1.25rem 1.25rem;
    margin-bottom: 1.25rem;
}

/* ---------------------- Formularis d'alt contrast ------------------- */

.form-label {
    font-weight: 600;
    font-size: .85rem;
    color: var(--gc-text-fort);
    margin-bottom: .3rem;
}

/* Els camps han de destacar clarament sobre el blanc de la targeta:
   fons tenyit + vora marcada, i blanc en rebre el focus. */
.form-control,
.form-select {
    background-color: var(--gc-camp-fons);
    border: 1.5px solid var(--gc-camp-vora);
    border-radius: .45rem;
    color: var(--gc-text);
    padding: .5rem .7rem;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, .07);
    transition: background-color .12s ease, border-color .12s ease, box-shadow .12s ease;
}

.form-control::placeholder { color: var(--gc-text-suau); opacity: 1; }

.form-control:hover:not(:disabled):not([readonly]),
.form-select:hover:not(:disabled) {
    border-color: var(--gc-primari);
    background-color: var(--gc-camp-fons-hover);
}

.form-control:focus,
.form-select:focus {
    border-color: var(--gc-primari);
    background-color: var(--gc-camp-fons-focus);
    box-shadow: 0 0 0 .22rem rgba(255, 87, 87, .3);
}

.form-control:disabled,
.form-control[readonly],
.form-select:disabled {
    background-color: var(--gc-camp-fons-desact);
    border-color: var(--gc-camp-vora-desact);
    color: var(--gc-camp-text-desact);
}

.form-control.is-invalid,
.form-select.is-invalid {
    border-color: var(--gc-vermell);
    background-color: var(--gc-camp-fons-invalid);
}

.form-control.is-invalid:focus,
.form-select.is-invalid:focus { box-shadow: 0 0 0 .22rem rgba(220, 38, 38, .2); }

/* Fletxa del desplegable en el to del camp, no en gris de sistema. */
.form-select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23C9332E' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}

:root[data-bs-theme="dark"] .form-select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23FF8A80' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}

.form-select[multiple] { background-image: none; padding-right: .7rem; }
.form-select[multiple] option { padding: .3rem .4rem; border-radius: .25rem; }

.input-group-text {
    background-color: var(--gc-camp-fons-hover);
    border: 1.5px solid var(--gc-camp-vora);
    color: var(--gc-text-fort);
    font-weight: 600;
}

/* Dins d'un grup, la vora compartida no s'ha de veure doble. */
.input-group > .form-control:not(:last-child),
.input-group > .form-select:not(:last-child) { border-right-width: 1.5px; }

/* Camps petits dins de taules editables: mateix contrast, menys alçada. */
.form-control-sm, .form-select-sm { padding: .3rem .5rem; }

.form-text { font-size: .8rem; color: var(--gc-text-suau); }

.gc-obligatori { color: var(--gc-vermell); font-weight: 700; }

.gc-interruptor .form-check-input {
    width: 2.6rem;
    height: 1.35rem;
    border: 1.5px solid var(--gc-vora-forta);
    cursor: pointer;
}

.form-check-input {
    border: 1.5px solid var(--gc-camp-vora);
    background-color: var(--gc-camp-fons);
    width: 1.15rem;
    height: 1.15rem;
    margin-top: .15rem;
}

.form-check-input:checked { background-color: var(--gc-primari); border-color: var(--gc-primari); }
.form-check-input:focus { box-shadow: 0 0 0 .2rem rgba(255, 87, 87, .3); border-color: var(--gc-primari); }
.gc-interruptor .form-check-label { font-weight: 500; padding-left: .35rem; }
.gc-etiqueta-fila { cursor: pointer; }

/* Botó alineat amb els camps quan l'etiqueta ocupa una línia a sobre. */
@media (min-width: 992px) {
    .gc-boto-cerca { margin-top: 1.85rem; }
}

.gc-mono { font-family: var(--bs-font-monospace); font-size: .85rem; }
.gc-llista-neta { list-style: none; padding-left: 0; }

.gc-formulari textarea { min-height: 4.5rem; }

/* ------------------------------- Taules ----------------------------- */

.gc-taula { --bs-table-bg: transparent; margin-bottom: 0; font-size: .88rem; color: var(--gc-text); }

.gc-taula > thead > tr > th {
    background: var(--gc-capcalera);
    color: #fff;
    font-weight: 600;
    font-size: .76rem;
    text-transform: uppercase;
    letter-spacing: .02em;
    border-bottom: 0;
    padding: .6rem .55rem;
    vertical-align: bottom;
    /* Els encapçalaments llargs es reparteixen en dues línies en
       comptes d'eixamplar la taula fins a treure-la de la pantalla. */
    white-space: normal;
    line-height: 1.25;
}

.gc-taula > tbody > tr > td,
.gc-taula > tbody > tr > th {
    padding: .55rem;
    border-bottom: 1px solid var(--gc-vora);
    font-weight: 400;
    vertical-align: middle;
}

/* El nom del servei o de l'expedient no ha de trencar la graella. */
.gc-taula > tbody > tr > th { min-width: 9rem; max-width: 18rem; overflow-wrap: break-word; }

.gc-taula > tbody > tr:hover > * { background-color: var(--gc-primari-clar); }

.gc-taula > tfoot > tr > th,
.gc-taula > tfoot > tr > td {
    border-top: 2px solid var(--gc-vora);
    padding: .6rem .75rem;
}

.gc-taula-interior > thead > tr > th {
    background: var(--gc-superficie-suau);
    color: var(--gc-text-fort);
    text-transform: none;
    letter-spacing: 0;
    font-size: .8rem;
}

.gc-taula-editable > tbody > tr:hover > * { background-color: transparent; }

.gc-caption {
    caption-side: bottom;
    padding: .65rem .75rem;
    color: var(--gc-text-suau);
    font-size: .82rem;
}

.gc-ordre { color: inherit; text-decoration: none; white-space: nowrap; }
.gc-ordre:hover { color: #fff; text-decoration: underline; }
.gc-ordre .bi { opacity: .6; font-size: .8em; }

.gc-enllac-fort { font-weight: 600; color: var(--gc-primari-fosc); text-decoration: none; }
.gc-enllac-fort:hover { text-decoration: underline; }

.gc-data { white-space: nowrap; font-variant-numeric: tabular-nums; }
.gc-import { white-space: nowrap; font-variant-numeric: tabular-nums; }
.gc-camp-import { text-align: right; }
.gc-detall-text { color: var(--gc-text-suau); font-size: .85rem; }

.gc-col-expandeix { width: 2.5rem; }
.gc-col-import    { width: 9rem; }
.gc-col-check     { width: 6rem; text-align: center; }
.gc-col-accio     { width: 4rem; }
.gc-col-petit     { width: 7rem; }

.gc-fila-inactiva > * { opacity: .65; }
.gc-any-actual > * { background-color: var(--gc-primari-clar) !important; font-weight: 600; }

.gc-buit {
    text-align: center;
    padding: 2.5rem 1rem !important;
    color: var(--gc-text-suau);
}

.gc-buit .bi { font-size: 2rem; display: block; margin-bottom: .5rem; opacity: .4; }
.gc-buit p { margin: 0; }

.gc-comptador {
    display: inline-block;
    min-width: 1.35rem;
    padding: 0 .35rem;
    margin-left: .35rem;
    border-radius: 1rem;
    background: var(--gc-superficie-suau);
    color: var(--gc-text-suau);
    font-size: .72rem;
    font-weight: 700;
    text-align: center;
}

/* --------------------- Semàfors i estats ---------------------------- */

.gc-punt {
    display: inline-block;
    width: .7rem;
    height: .7rem;
    border-radius: 50%;
    flex: 0 0 auto;
}

.gc-estat, .gc-mesos {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    white-space: nowrap;
}

.gc-mesos { justify-content: center; font-variant-numeric: tabular-nums; }
.gc-mesos-valor { font-weight: 600; }

.gc-estat--verd  .gc-punt, .gc-mesos--verd  .gc-punt { background: var(--gc-verd); }
.gc-estat--negre .gc-punt, .gc-mesos--negre .gc-punt { background: var(--gc-negre); }
.gc-estat--blau  .gc-punt { background: var(--gc-blau); }
.gc-estat--gris  .gc-punt { background: var(--gc-gris); }
.gc-mesos--taronja .gc-punt { background: var(--gc-taronja); }
.gc-mesos--vermell .gc-punt { background: var(--gc-vermell); }

.gc-mesos--vermell .gc-mesos-valor { color: var(--gc-vermell); }
.gc-mesos--negre   .gc-mesos-valor { color: var(--gc-negre); }
.gc-estat--gris { color: var(--gc-text-suau); }

/* ---------------------- Files desplegables -------------------------- */

.gc-expandeix {
    border: 1px solid var(--gc-vora);
    background: var(--gc-superficie);
    border-radius: .35rem;
    width: 1.8rem;
    height: 1.8rem;
    line-height: 1;
    color: var(--gc-primari-fosc);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform .15s ease, background-color .15s ease;
}

.gc-expandeix:hover { background: var(--gc-primari-clar); }
.gc-expandeix[aria-expanded="true"] { transform: rotate(90deg); background: var(--gc-primari-clar); }

.gc-fila-detall > td { padding: 0 !important; background: var(--gc-superficie-suau) !important; }

.gc-subtaula { border-left: 3px solid var(--gc-primari); }

.gc-subtaula-capcalera {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    padding: .65rem .9rem;
    background: var(--gc-superficie-suau);
    border-bottom: 1px solid var(--gc-vora);
}

/* ----------------------------- Indicadors --------------------------- */

.gc-indicador {
    display: flex;
    flex-direction: column;
    gap: .2rem;
    background: var(--gc-superficie);
    border: 1px solid var(--gc-vora);
    border-radius: var(--gc-radi);
    padding: .85rem 1rem;
    height: 100%;
    box-shadow: var(--gc-ombra);
}

.gc-indicador-etiqueta {
    font-size: .78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--gc-text-suau);
}

.gc-indicador-valor { font-size: 1.02rem; font-weight: 600; color: var(--gc-text-fort); }

/* Dada secundària dins d'un indicador (p. ex. la data base sota la
   data efectiva): mateixa targeta, però amb menys pes visual. */
.gc-indicador-valor--petit {
    font-size: .78rem;
    font-weight: 400;
    color: var(--gc-text-suau);
}
.gc-indicador-xifra { font-size: 1.9rem; font-weight: 700; color: var(--gc-primari-fosc); line-height: 1.1; }

a.gc-indicador-enllac { text-decoration: none; transition: border-color .15s ease, transform .15s ease; }
a.gc-indicador-enllac:hover { border-color: var(--gc-primari); transform: translateY(-1px); }

.gc-dades {
    display: grid;
    grid-template-columns: minmax(8rem, 12rem) 1fr;
    gap: .4rem 1rem;
    margin: 0;
}

.gc-dades dt { font-weight: 600; color: var(--gc-text-suau); font-size: .85rem; }
.gc-dades dd { margin: 0; }

/* ------------------------------ Pestanyes --------------------------- */

.gc-pestanyes { border-bottom: 1px solid var(--gc-vora); margin-top: .5rem; }
.gc-pestanyes .nav-link { color: var(--gc-text-suau); font-weight: 600; border-radius: var(--gc-radi) var(--gc-radi) 0 0; }
.gc-pestanyes .nav-link:hover { color: var(--gc-primari); }

.gc-pestanyes .nav-link.active {
    color: var(--gc-primari-fosc);
    background: var(--gc-superficie);
    border-color: var(--gc-vora) var(--gc-vora) var(--gc-superficie);
}

/* -------------------------- Inici de sessió ------------------------- */

.gc-fons-net {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--gc-login-1), var(--gc-login-2) 55%, var(--gc-login-3));
    padding: 1.5rem;
    position: relative;
}

.gc-net-contenidor { width: 100%; max-width: 27rem; }

.gc-entrada-caixa {
    background: var(--gc-superficie);
    border-radius: 1rem;
    padding: 2rem;
    box-shadow: 0 18px 40px rgba(120, 25, 22, .38);
}

.gc-entrada-capcalera { text-align: center; margin-bottom: 1.75rem; }

/* La caixa del login és blanca en tema clar i fosca en tema fosc: es
   mostra la versió de logotip que hi llegeix bé a cada cas. */
.gc-entrada-logo { height: 2.75rem; width: auto; display: none; }
.gc-entrada-logo[data-tema-logo="light"] { display: inline-block; }
:root[data-bs-theme="dark"] .gc-entrada-logo[data-tema-logo="light"] { display: none; }
:root[data-bs-theme="dark"] .gc-entrada-logo[data-tema-logo="dark"] { display: inline-block; }

.gc-entrada-capcalera h1 { font-size: 1.3rem; font-weight: 700; margin: .5rem 0 .15rem; color: var(--gc-text-fort); }
.gc-entrada-capcalera p { color: var(--gc-text-suau); margin: 0; font-size: .9rem; }
.gc-entrada-peu { text-align: center; color: rgba(255, 255, 255, .85); font-size: .82rem; margin: 1.25rem 0 0; }

/* ------------------------------- Errors ----------------------------- */

.gc-error { text-align: center; padding: 3rem 1rem; }
.gc-error-codi { font-size: 4rem; font-weight: 800; color: var(--gc-primari); line-height: 1; }
.gc-error-missatge { color: var(--gc-text-suau); margin: .75rem 0 1.5rem; }
.gc-fons-net .gc-error { background: var(--gc-superficie); border-radius: 1rem; }

/* ------------------------------- Botons ----------------------------- */

.btn { border-radius: .45rem; font-weight: 500; }

.btn-primary {
    background-color: var(--gc-primari-boto);
    border-color: var(--gc-primari-boto);
}

.btn-primary:hover, .btn-primary:focus {
    background-color: var(--gc-primari-fosc);
    border-color: var(--gc-primari-fosc);
}

.btn-outline-primary { color: var(--gc-primari-fosc); border-color: var(--gc-primari-boto); }
.btn-outline-primary:hover { background-color: var(--gc-primari-boto); border-color: var(--gc-primari-boto); }

/* Les accions destructives van en granat, per no confondre-les amb el
   color corporatiu, que aquí és d'ús general. */
.btn-outline-danger { color: var(--gc-btn-perill-text); border-color: var(--gc-btn-perill-vora); }
.btn-outline-danger:hover { background-color: var(--gc-btn-perill-text); border-color: var(--gc-btn-perill-text); color: #fff; }

.btn-outline-secondary { color: var(--gc-btn-secundari-text); border-color: var(--gc-vora-forta); }
.btn-outline-secondary:hover { background-color: var(--gc-btn-secundari-text); border-color: var(--gc-btn-secundari-text); color: #fff; }

/* ------------------------------ Impressió --------------------------- */

@media print {
    .gc-capcalera, .gc-peu, .gc-filtres, .gc-accions, .btn { display: none !important; }
    .gc-targeta { border: 1px solid #999; box-shadow: none; }
    body { background: #fff; color: #000; }
}