/* ==================================================================
   Gestionale cantieri — sistema di design
   Blu elettrico, superfici chiare, tema scuro incluso.
   ================================================================== */

/* ------------------------------------------------------------------
   1. Token
   ------------------------------------------------------------------ */
:root {
    /* Blu elettrico */
    --blu-50:   #eef4ff;
    --blu-100:  #dce8ff;
    --blu-200:  #bcd3ff;
    --blu-300:  #8fb5ff;
    --blu-400:  #5b90ff;
    --blu-500:  #2e6dff;
    --blu-600:  #0b5cff;   /* primario */
    --blu-700:  #0546d1;
    --blu-800:  #0837a3;
    --blu-900:  #0d2f7d;
    --ciano:    #00d3f2;   /* accento elettrico */

    /* Semantici */
    --primario:        var(--blu-600);
    --primario-forte:  var(--blu-700);
    --primario-tenue:  var(--blu-50);
    --primario-bordo:  var(--blu-200);

    --verde:      #0d9f6e;
    --verde-tenue:#e6f7f1;
    --ambra:      #b7791f;
    --ambra-tenue:#fdf4e3;
    --rosso:      #dc2b3d;
    --rosso-tenue:#fdeaec;
    --viola:      #6d4aff;

    /* Superfici e testo */
    --sfondo:      #f4f7fc;
    --superficie:  #ffffff;
    --superficie-2:#f8fafd;
    --bordo:       #e3e8f2;
    --bordo-forte: #cfd7e6;

    --testo:    #0e1526;
    --testo-2:  #56607a;
    --testo-3:  #8b95ab;

    /* Elevazione */
    --ombra-1: 0 1px 2px rgba(14, 21, 38, .05), 0 1px 3px rgba(14, 21, 38, .04);
    --ombra-2: 0 4px 14px rgba(14, 21, 38, .07);
    --ombra-3: 0 16px 40px rgba(14, 21, 38, .13);
    --alone:   0 0 0 3px rgba(11, 92, 255, .18);

    /* Forma */
    --r-1: .5rem;
    --r-2: .75rem;
    --r-3: 1rem;
    --r-pill: 50rem;

    /* Struttura */
    --sidebar: 250px;
    --transizione: 160ms cubic-bezier(.4, 0, .2, 1);

    color-scheme: light;
}

[data-bs-theme="dark"] {
    --primario:        var(--blu-500);
    --primario-forte:  var(--blu-400);
    --primario-tenue:  rgba(46, 109, 255, .14);
    --primario-bordo:  rgba(46, 109, 255, .38);

    --verde-tenue: rgba(13, 159, 110, .16);
    --ambra-tenue: rgba(183, 121, 31, .18);
    --rosso-tenue: rgba(220, 43, 61, .16);

    --sfondo:      #0a0f1c;
    --superficie:  #121a2b;
    --superficie-2:#182238;
    --bordo:       #24304a;
    --bordo-forte: #33405e;

    --testo:    #e8edf7;
    --testo-2:  #9aa6be;
    --testo-3:  #6e7a92;

    --ombra-1: 0 1px 2px rgba(0, 0, 0, .35);
    --ombra-2: 0 4px 14px rgba(0, 0, 0, .4);
    --ombra-3: 0 16px 40px rgba(0, 0, 0, .5);

    color-scheme: dark;
}

/* ------------------------------------------------------------------
   2. Base
   ------------------------------------------------------------------ */
* { -webkit-tap-highlight-color: transparent; }

body {
    background: var(--sfondo);
    color: var(--testo);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text", "Segoe UI",
                 Inter, Roboto, "Helvetica Neue", sans-serif;
    font-size: .9rem;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    letter-spacing: -.005em;
}

a { text-decoration: none; color: var(--primario); }
a:hover { color: var(--primario-forte); }

h1, h2, h3, h4, h5, h6, .fs-1, .fs-2, .fs-3, .fs-4, .fs-5, .fs-6 {
    letter-spacing: -.02em;
    font-weight: 650;
}

hr { border-color: var(--bordo); opacity: 1; }

/* Cifre allineate in colonna */
td, th, .fr-stat__valore, .fr-rata, .fr-badge-conta, .form-control[type="number"] {
    font-variant-numeric: tabular-nums;
}

:focus-visible {
    outline: none;
    box-shadow: var(--alone);
    border-radius: var(--r-1);
}

::selection { background: var(--blu-200); color: var(--blu-900); }

/* Barre di scorrimento discrete */
* { scrollbar-width: thin; scrollbar-color: var(--bordo-forte) transparent; }
*::-webkit-scrollbar { width: 9px; height: 9px; }
*::-webkit-scrollbar-thumb {
    background: var(--bordo-forte);
    border-radius: var(--r-pill);
    border: 2px solid transparent;
    background-clip: content-box;
}
*::-webkit-scrollbar-track { background: transparent; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ------------------------------------------------------------------
   3. Sidebar
   ------------------------------------------------------------------ */
.fr-sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    width: var(--sidebar);
    background: linear-gradient(180deg, #0b1224 0%, #0e1730 60%, #101b3a 100%);
    color: #fff;
    display: flex;
    flex-direction: column;
    z-index: 1045;
    border-right: 1px solid rgba(255, 255, 255, .07);
}

.fr-sidebar::after {
    /* filo elettrico sul bordo destro */
    content: "";
    position: absolute;
    inset: 0 0 0 auto;
    width: 1px;
    background: linear-gradient(180deg, transparent, var(--blu-500) 35%, var(--ciano) 65%, transparent);
    opacity: .55;
}

.fr-sidebar__logo {
    padding: 1.15rem 1.1rem;
    display: flex;
    align-items: center;
    gap: .65rem;
}

.fr-sidebar__marchio {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    border-radius: var(--r-1);
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, var(--blu-500), var(--blu-600) 55%, var(--ciano));
    box-shadow: 0 4px 14px rgba(11, 92, 255, .45);
    color: #fff;
    font-size: 1.05rem;
}

.fr-sidebar__nome { font-weight: 680; font-size: .95rem; line-height: 1.15; letter-spacing: -.02em; }
.fr-sidebar__nome small { display: block; font-weight: 400; font-size: .7rem; color: rgba(255, 255, 255, .55); letter-spacing: 0; }

.fr-sidebar__nav { flex: 1; overflow-y: auto; padding: .35rem .6rem 1rem; }

.fr-sidebar__gruppo {
    padding: .9rem .5rem .35rem;
    font-size: .66rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .09em;
    color: rgba(255, 255, 255, .38);
}

.fr-sidebar__nav a {
    position: relative;
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .5rem .65rem;
    margin-bottom: 1px;
    border-radius: var(--r-1);
    color: rgba(255, 255, 255, .74);
    font-size: .855rem;
    font-weight: 500;
    transition: background var(--transizione), color var(--transizione);
}

.fr-sidebar__nav a i { width: 1.15rem; font-size: 1rem; text-align: center; opacity: .85; }

.fr-sidebar__nav a:hover { background: rgba(255, 255, 255, .07); color: #fff; }

.fr-sidebar__nav a.attivo {
    background: linear-gradient(90deg, rgba(11, 92, 255, .32), rgba(11, 92, 255, .12));
    color: #fff;
    font-weight: 620;
    box-shadow: inset 0 0 0 1px rgba(91, 144, 255, .3);
}

.fr-sidebar__nav a.attivo::before {
    content: "";
    position: absolute;
    left: -.6rem;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 1.15rem;
    border-radius: 0 3px 3px 0;
    background: linear-gradient(180deg, var(--blu-400), var(--ciano));
    box-shadow: 0 0 10px var(--blu-400);
}

.fr-sidebar__nav a.attivo i { opacity: 1; color: var(--blu-300); }

.fr-sidebar__utente {
    border-top: 1px solid rgba(255, 255, 255, .08);
    padding: .8rem 1.1rem;
    display: flex;
    align-items: center;
    gap: .65rem;
    color: #fff;
    transition: background var(--transizione);
}

a.fr-sidebar__utente:hover { background: rgba(255, 255, 255, .07); color: #fff; }

.fr-sidebar__avatar {
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    border-radius: var(--r-pill);
    display: grid;
    place-items: center;
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .16);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .02em;
}

.fr-sidebar__utente .nome { font-size: .82rem; font-weight: 600; line-height: 1.2; }
.fr-sidebar__utente .ruolo { font-size: .7rem; color: rgba(255, 255, 255, .5); }

.fr-velo {
    position: fixed;
    inset: 0;
    background: rgba(10, 15, 28, .5);
    backdrop-filter: blur(2px);
    z-index: 1040;
    display: none;
}

.fr-velo.visibile { display: block; }

/* ------------------------------------------------------------------
   4. Area principale
   ------------------------------------------------------------------ */
.fr-main { margin-left: var(--sidebar); min-height: 100vh; }

.fr-topbar {
    position: sticky;
    top: 0;
    z-index: 1030;
    display: flex;
    align-items: center;
    gap: .85rem;
    padding: .7rem 1.4rem;
    background: color-mix(in srgb, var(--superficie) 82%, transparent);
    backdrop-filter: saturate(180%) blur(14px);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    border-bottom: 1px solid var(--bordo);
}

.fr-topbar h1 {
    font-size: 1.08rem;
    font-weight: 680;
    margin: 0;
    color: var(--testo);
}

.fr-contenuto { padding: 1.4rem; max-width: 1680px; }

/* ------------------------------------------------------------------
   5. Card
   ------------------------------------------------------------------ */
.fr-card {
    background: var(--superficie);
    border: 1px solid var(--bordo);
    border-radius: var(--r-2);
    box-shadow: var(--ombra-1);
    overflow: hidden;
}

.fr-card__testa {
    padding: .8rem 1.05rem;
    border-bottom: 1px solid var(--bordo);
    font-weight: 620;
    font-size: .88rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .6rem;
    background: var(--superficie-2);
}

.fr-card__testa i { color: var(--primario); }

.fr-card__corpo { padding: 1.05rem; }

.fr-sezione-titolo {
    font-weight: 680;
    font-size: .82rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--testo-2);
    margin-bottom: .9rem;
    display: flex;
    align-items: center;
    gap: .5rem;
}

.fr-sezione-titolo::before {
    content: "";
    width: 3px;
    height: .95rem;
    border-radius: 2px;
    background: linear-gradient(180deg, var(--blu-500), var(--ciano));
}

/* ------------------------------------------------------------------
   6. Riquadri statistici
   ------------------------------------------------------------------ */
.fr-stat {
    position: relative;
    background: var(--superficie);
    border: 1px solid var(--bordo);
    border-radius: var(--r-2);
    padding: .9rem 1rem;
    box-shadow: var(--ombra-1);
    transition: transform var(--transizione), box-shadow var(--transizione), border-color var(--transizione);
    overflow: hidden;
}

a.fr-stat:hover {
    transform: translateY(-2px);
    box-shadow: var(--ombra-2);
    border-color: var(--primario-bordo);
    color: inherit;
}

.fr-stat.selezionato {
    border-color: var(--primario);
    box-shadow: var(--alone);
}

.fr-stat.selezionato::after {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: linear-gradient(90deg, var(--blu-600), var(--ciano));
}

.fr-stat__valore {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -.03em;
}

.fr-stat__etichetta {
    color: var(--testo-2);
    font-size: .755rem;
    font-weight: 500;
    margin-top: .1rem;
}

/* ------------------------------------------------------------------
   7. Sottomenu del cantiere
   ------------------------------------------------------------------ */
.fr-sottomenu {
    display: flex;
    flex-wrap: wrap;
    gap: .2rem;
    background: var(--superficie);
    border: 1px solid var(--bordo);
    border-radius: var(--r-2);
    padding: .35rem;
    margin-bottom: 1.05rem;
    box-shadow: var(--ombra-1);
}

.fr-sottomenu a {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .4rem .75rem;
    border-radius: var(--r-1);
    color: var(--testo-2);
    font-size: .815rem;
    font-weight: 550;
    white-space: nowrap;
    transition: background var(--transizione), color var(--transizione);
}

.fr-sottomenu a i { font-size: .95rem; opacity: .75; }

.fr-sottomenu a:hover { background: var(--primario-tenue); color: var(--primario-forte); }

.fr-sottomenu a.attivo {
    background: linear-gradient(135deg, var(--blu-600), var(--blu-500));
    color: #fff;
    font-weight: 620;
    box-shadow: 0 3px 10px rgba(11, 92, 255, .32);
}

.fr-sottomenu a.attivo i { opacity: 1; }

.fr-sottomenu a.non-pronta { opacity: .45; }
.fr-sottomenu a.non-pronta:hover { opacity: .7; }

/* ------------------------------------------------------------------
   8. Checklist documenti
   ------------------------------------------------------------------ */
.fr-doc-gruppo {
    margin-bottom: 1rem;
    border: 1px solid var(--bordo);
    border-radius: var(--r-2);
    overflow: hidden;
    box-shadow: var(--ombra-1);
}

.fr-doc-gruppo__testa {
    background: var(--superficie-2);
    padding: .7rem .95rem;
    display: flex;
    align-items: center;
    gap: .6rem;
    cursor: pointer;
    font-weight: 620;
    font-size: .875rem;
    transition: background var(--transizione);
}

.fr-doc-gruppo__testa:hover { background: var(--primario-tenue); }

.fr-doc-gruppo__testa > .bi-chevron-down {
    transition: transform var(--transizione);
    color: var(--testo-3);
}

.fr-doc-gruppo__testa[aria-expanded="false"] > .bi-chevron-down { transform: rotate(-90deg); }

.fr-doc-riga {
    display: grid;
    grid-template-columns: 1fr 170px auto;
    gap: .75rem;
    align-items: center;
    padding: .6rem .95rem;
    border-top: 1px solid var(--bordo);
    background: var(--superficie);
    transition: background var(--transizione);
}

.fr-doc-riga:hover { background: var(--superficie-2); }

.fr-doc-riga__nome { display: flex; align-items: center; gap: .5rem; font-size: .87rem; }

.fr-doc-riga.mancante { background: linear-gradient(90deg, var(--rosso-tenue), transparent 60%); }
.fr-doc-riga.mancante .fr-doc-riga__nome { color: var(--rosso); font-weight: 620; }

.fr-doc-riga__data { color: var(--testo-3); font-size: .79rem; }

.fr-doc-riga__azioni { display: flex; align-items: center; gap: .3rem; }

.fr-badge-conta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.6rem;
    height: 1.6rem;
    padding: 0 .4rem;
    border-radius: var(--r-pill);
    background: var(--superficie-2);
    border: 1px solid var(--bordo);
    color: var(--testo-3);
    font-size: .73rem;
    font-weight: 650;
    transition: all var(--transizione);
}

.fr-badge-conta.pieno {
    background: linear-gradient(135deg, var(--blu-600), var(--blu-500));
    border-color: transparent;
    color: #fff;
    box-shadow: 0 2px 8px rgba(11, 92, 255, .3);
}

a.fr-badge-conta:hover { transform: scale(1.08); }

.fr-doc-file {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
    padding: .4rem .95rem .4rem 2.4rem;
    border-top: 1px solid var(--bordo);
    background: var(--superficie-2);
    font-size: .81rem;
}

.fr-doc-file > .bi { color: var(--primario); }

/* ------------------------------------------------------------------
   9. Rate di pagamento
   ------------------------------------------------------------------ */
.fr-rate { display: inline-flex; gap: .2rem; flex-wrap: wrap; }

.fr-rata {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.1rem;
    padding: .15rem .4rem;
    border-radius: var(--r-1);
    font-size: .715rem;
    font-weight: 700;
    color: var(--testo-2);
    background: var(--superficie-2);
    border: 1px solid var(--bordo-forte);
    transition: all var(--transizione);
}

.fr-rata.incassato {
    background: linear-gradient(135deg, #0d9f6e, #12b981);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 2px 6px rgba(13, 159, 110, .32);
}

.fr-rata.insoluto {
    background: linear-gradient(135deg, #dc2b3d, #ef4453);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 2px 6px rgba(220, 43, 61, .32);
}

.fr-rata-btn { cursor: pointer; }
.fr-rata-btn:hover { transform: translateY(-1px); filter: brightness(1.06); }

/* ------------------------------------------------------------------
   10. Componenti Bootstrap ricalibrati
   ------------------------------------------------------------------ */

/* --- Bottoni --- */
.btn {
    --bs-btn-border-radius: var(--r-1);
    font-weight: 550;
    font-size: .855rem;
    transition: all var(--transizione);
}

.btn-sm { --bs-btn-border-radius: var(--r-1); font-size: .8rem; }

.btn-blu {
    background: linear-gradient(135deg, var(--blu-600), var(--blu-500));
    border: 1px solid transparent;
    color: #fff;
    box-shadow: 0 2px 8px rgba(11, 92, 255, .3);
}

.btn-blu:hover, .btn-blu:focus {
    background: linear-gradient(135deg, var(--blu-700), var(--blu-600));
    color: #fff;
    box-shadow: 0 4px 14px rgba(11, 92, 255, .42);
    transform: translateY(-1px);
}

.btn-blu:active { transform: translateY(0); }

.btn-outline-secondary {
    --bs-btn-color: var(--testo-2);
    --bs-btn-border-color: var(--bordo-forte);
    --bs-btn-hover-color: var(--primario-forte);
    --bs-btn-hover-bg: var(--primario-tenue);
    --bs-btn-hover-border-color: var(--primario-bordo);
    --bs-btn-active-bg: var(--primario-tenue);
    --bs-btn-active-color: var(--primario-forte);
    --bs-btn-active-border-color: var(--primario-bordo);
}

.btn-outline-primary {
    --bs-btn-color: var(--primario);
    --bs-btn-border-color: var(--primario-bordo);
    --bs-btn-hover-bg: var(--primario);
    --bs-btn-hover-border-color: var(--primario);
}

/* --- Campi --- */
.form-control, .form-select {
    border-radius: var(--r-1);
    border-color: var(--bordo-forte);
    background-color: var(--superficie);
    color: var(--testo);
    font-size: .86rem;
    transition: border-color var(--transizione), box-shadow var(--transizione);
}

.form-control:focus, .form-select:focus {
    border-color: var(--primario);
    box-shadow: var(--alone);
    background-color: var(--superficie);
    color: var(--testo);
}

.form-control:disabled, .form-select:disabled, .form-control[readonly] {
    background-color: var(--superficie-2);
    color: var(--testo-2);
    opacity: 1;
}

.form-label {
    font-size: .765rem;
    font-weight: 600;
    color: var(--testo-2);
    margin-bottom: .3rem;
    text-transform: uppercase;
    letter-spacing: .035em;
}

.form-text { font-size: .765rem; color: var(--testo-3); }

.form-check-input:checked { background-color: var(--primario); border-color: var(--primario); }
.form-check-input:focus { border-color: var(--primario); box-shadow: var(--alone); }

/* --- Badge morbidi --- */
.badge {
    font-weight: 620;
    font-size: .715rem;
    padding: .3rem .55rem;
    border-radius: var(--r-pill);
    letter-spacing: .01em;
}

.badge.text-bg-success   { background: var(--verde-tenue)    !important; color: var(--verde)    !important; }
.badge.text-bg-danger    { background: var(--rosso-tenue)    !important; color: var(--rosso)    !important; }
.badge.text-bg-warning   { background: var(--ambra-tenue)    !important; color: var(--ambra)    !important; }
.badge.text-bg-info      { background: var(--primario-tenue) !important; color: var(--primario-forte) !important; }
.badge.text-bg-primary   { background: var(--primario-tenue) !important; color: var(--primario-forte) !important; }
.badge.text-bg-secondary { background: var(--superficie-2)   !important; color: var(--testo-2)   !important; box-shadow: inset 0 0 0 1px var(--bordo); }
.badge.text-bg-light     { background: var(--superficie-2)   !important; color: var(--testo-2)   !important; }

/* --- Tabelle --- */
.table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--testo);
    --bs-table-border-color: var(--bordo);
    margin-bottom: 0;
    font-size: .855rem;
}

.table > thead th {
    background: var(--superficie-2);
    color: var(--testo-2);
    font-size: .715rem;
    font-weight: 680;
    text-transform: uppercase;
    letter-spacing: .055em;
    border-bottom: 1px solid var(--bordo);
    white-space: nowrap;
    padding: .6rem .7rem;
}

.table > :not(caption) > * > * { padding: .62rem .7rem; }

.table-hover > tbody > tr { transition: background var(--transizione); }
.table-hover > tbody > tr:hover > * { --bs-table-accent-bg: transparent; background-color: var(--primario-tenue); }

.table-light { --bs-table-bg: var(--superficie-2); }

/* --- Alert --- */
.alert {
    border-radius: var(--r-2);
    border: 1px solid transparent;
    font-size: .855rem;
    padding: .7rem .95rem;
}

.alert-success   { background: var(--verde-tenue);    border-color: color-mix(in srgb, var(--verde) 25%, transparent); color: var(--verde); }
.alert-danger    { background: var(--rosso-tenue);    border-color: color-mix(in srgb, var(--rosso) 25%, transparent); color: var(--rosso); }
.alert-warning   { background: var(--ambra-tenue);    border-color: color-mix(in srgb, var(--ambra) 25%, transparent); color: var(--ambra); }
.alert-info      { background: var(--primario-tenue); border-color: var(--primario-bordo); color: var(--primario-forte); }
.alert-secondary { background: var(--superficie-2);   border-color: var(--bordo); color: var(--testo-2); }

/* --- Progresso --- */
.progress {
    background: var(--superficie-2);
    border-radius: var(--r-pill);
    box-shadow: inset 0 0 0 1px var(--bordo);
}

.progress-bar { background: linear-gradient(90deg, var(--blu-600), var(--ciano)); border-radius: var(--r-pill); }
.progress-bar.bg-success { background: linear-gradient(90deg, #0d9f6e, #34d399) !important; }
.progress-bar.bg-danger  { background: linear-gradient(90deg, #dc2b3d, #f87171) !important; }

/* --- Modali --- */
.modal-content {
    border: 1px solid var(--bordo);
    border-radius: var(--r-3);
    box-shadow: var(--ombra-3);
    background: var(--superficie);
}

.modal-header, .modal-footer { border-color: var(--bordo); }
.modal-title { font-size: .98rem; font-weight: 650; }

/* --- Tooltip --- */
.tooltip-inner {
    background: #0e1526;
    border-radius: var(--r-1);
    font-size: .765rem;
    padding: .4rem .6rem;
    max-width: 280px;
}

.tooltip.bs-tooltip-top .tooltip-arrow::before    { border-top-color: #0e1526; }
.tooltip.bs-tooltip-bottom .tooltip-arrow::before { border-bottom-color: #0e1526; }

/* ------------------------------------------------------------------
   11. Tabella del computo metrico
   ------------------------------------------------------------------ */
.fr-tabella-computo td.descrizione {
    max-width: 440px;
    font-size: .8rem;
    line-height: 1.4;
    color: var(--testo-2);
}

.fr-tabella-computo .categoria td {
    background: linear-gradient(90deg, var(--blu-600), var(--blu-500)) !important;
    color: #fff !important;
    font-weight: 680;
    text-transform: uppercase;
    font-size: .755rem;
    letter-spacing: .06em;
}

.fr-tabella-computo .sottocategoria td {
    background: var(--primario-tenue) !important;
    color: var(--primario-forte) !important;
    font-weight: 650;
    font-size: .79rem;
}

.fr-tabella-computo tbody tr:hover .categoria td,
.fr-tabella-computo tbody tr.categoria:hover td { filter: none; }

.fr-input-perc { width: 5.4rem; text-align: right; }

/* ------------------------------------------------------------------
   12. Utilità
   ------------------------------------------------------------------ */
.testo-primario { color: var(--primario) !important; }
.testo-tenue    { color: var(--testo-2) !important; }

.fr-vuoto {
    color: var(--testo-3);
    text-align: center;
    padding: 2.4rem 1rem;
    font-size: .87rem;
}

.fr-vuoto .bi { color: var(--bordo-forte); }

.fr-obbligatorio { color: var(--rosso); }

.fr-marchio-login {
    display: inline-flex;
    align-items: center;
    gap: .7rem;
    padding: .85rem 1.3rem;
    border-radius: var(--r-2);
    background: linear-gradient(135deg, var(--blu-700), var(--blu-500) 55%, var(--ciano));
    color: #fff;
    box-shadow: 0 12px 32px rgba(11, 92, 255, .35);
}

/* Sfondo della schermata di accesso */
.fr-accesso {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background:
        radial-gradient(1100px 520px at 12% -8%, rgba(11, 92, 255, .16), transparent 62%),
        radial-gradient(900px 460px at 92% 108%, rgba(0, 211, 242, .14), transparent 62%),
        var(--sfondo);
}

/* ------------------------------------------------------------------
   13. Adattamento a schermi stretti
   ------------------------------------------------------------------ */
@media (max-width: 1199.98px) {
    .fr-doc-riga { grid-template-columns: 1fr auto; }
    .fr-doc-riga__data { grid-column: 1 / -1; order: 3; }
}

@media (max-width: 991.98px) {
    .fr-sidebar {
        transform: translateX(-100%);
        transition: transform var(--transizione);
        box-shadow: var(--ombra-3);
    }
    .fr-sidebar.aperta { transform: none; }
    .fr-main { margin-left: 0; }
    .fr-contenuto { padding: 1rem; }
    .fr-topbar { padding: .65rem 1rem; }
}