:root {
    --fp-despesa: #d13438;
    --fp-ingres: #107c41;

    /* Paleta dels gràfics. Els valors surten de la paleta de referència de la
       guia de visualització de dades i estan validats amb el seu script contra
       el fons blanc de les targetes (#ffffff): banda de lluminositat, terra de
       croma, separació per a daltonisme i contrast.

       Es declaren com a variables per si algun dia hi ha mode fosc: caldrà
       tornar a triar els passos per al fons fosc i validar-los de nou, no
       invertir-los sense més. */
    --viz-surface: #ffffff;
    --viz-grid: #e1e0d9;
    --viz-axis: #c3c2b7;
    --viz-ink-muted: #898781;
    --viz-ink-secondary: #52514e;

    /* Ingressos i despeses: blau i vermell. Llegeixen com a oposats i el parell
       passa tots els controls (ΔE 21,6 per a protanopia). El verd/vermell
       convencional es va descartar: només ΔE 6,9, que és justament el parell
       que confon més gent. */
    --viz-ingressos: #2a78d6;
    --viz-despeses: #e34948;

    /* Sèrie única (rànquing de subgrups): una sola ranura, mai una rampa de
       valor, que duplicaria la llargada de la barra en el color. */
    --viz-serie-1: #2a78d6;

    --viz-altres: #898781;
}

body {
    background-color: #f6f7f9;
}

/* Barra lateral de navegacio */
.fp-sidebar {
    min-height: 100vh;
    background-color: #1f2a37;
}

.fp-sidebar .nav-link {
    color: #cbd5e1;
    border-radius: .375rem;
    padding: .5rem .75rem;
    margin-bottom: .125rem;
}

.fp-sidebar .nav-link:hover {
    color: #fff;
    background-color: rgba(255, 255, 255, .08);
}

.fp-sidebar .nav-link.active {
    color: #fff;
    background-color: rgba(255, 255, 255, .16);
    font-weight: 500;
}

.fp-sidebar .fp-marca {
    color: #fff;
    font-weight: 600;
    letter-spacing: .02em;
}

/* Imports: sempre monoespaiat i alineat a la dreta */
.fp-import {
    font-variant-numeric: tabular-nums;
    text-align: right;
    white-space: nowrap;
}

.fp-import.negatiu {
    color: var(--fp-despesa);
}

.fp-import.positiu {
    color: var(--fp-ingres);
}

/* Pastilla de color d'un grup */
.fp-color {
    display: inline-block;
    width: .85rem;
    height: .85rem;
    border-radius: .2rem;
    vertical-align: -.1em;
}

.fp-login {
    max-width: 24rem;
    margin: 6vh auto;
}

/* Taules una mica mes compactes que el per defecte de Bootstrap */
.table-sm > :not(caption) > * > * {
    padding: .4rem .5rem;
}

/* --- Resum ------------------------------------------------------------- */

/* Xifres grans: figures proporcionals, no tabulars. Amb amplada fixa els
   digits queden solts a mides grans. */
.fp-xifra {
    font-size: 1.75rem;
    font-weight: 600;
    line-height: 1.1;
    font-variant-numeric: normal;
}

.fp-delta {
    font-size: .8125rem;
    white-space: nowrap;
}

.fp-delta .bi {
    font-size: .75rem;
}

/* Alçada del llenç reservant espai per a les etiquetes de l'eix, per no
   acabar amb una barra de desplaçament dins de la targeta. */
.fp-grafic {
    position: relative;
    height: 17rem;
}

.fp-grafic-donut {
    height: 14rem;
}

/* Rànquing de subgrups: barres fetes amb HTML. No calen ni llibreria ni
   pantalla emergent per llegir-ne els valors. */
.fp-rang {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: .15rem .75rem;
    align-items: center;
    text-decoration: none;
    color: inherit;
    padding: .35rem .25rem;
    border-radius: .375rem;
}

.fp-rang:hover {
    background-color: #f6f7f9;
    color: inherit;
}

.fp-rang-barra {
    grid-column: 1 / -1;
    height: .5rem;
    background-color: var(--viz-grid);
    border-radius: 4px;
    overflow: hidden;
}

.fp-rang-barra > span {
    display: block;
    height: 100%;
    background-color: var(--viz-serie-1);
    border-radius: 4px;
}

.fp-llegenda {
    list-style: none;
    padding: 0;
    margin: 0;
}

.fp-llegenda li {
    display: flex;
    align-items: baseline;
    gap: .5rem;
    padding: .25rem 0;
}

.fp-llegenda a {
    text-decoration: none;
    color: inherit;
}

.fp-llegenda a:hover {
    text-decoration: underline;
}