/* ============================================================
   AuGest — Design system (vedi claude/DESIGN.md)
   Tema chiaro caldo, oro come accento, Bootstrap 5 + override.
   ============================================================ */

:root {
    /* Sfondi */
    --clr-bg: #FAF7F0;
    --clr-surface: #FFFFFF;
    --clr-surface-alt: #F4EFE5;

    /* Bordi / divisori */
    --clr-divider: #E8E1D1;
    --clr-border: #D6CFBE;
    --clr-border-strong: #B5A98E;

    /* Testo */
    --clr-text: #1F1A14;
    --clr-text-muted: #5A5248;
    --clr-text-disabled: #9A9285;

    /* Brand */
    --clr-gold: #C9A24B;
    --clr-gold-dark: #9F7E32;
    --clr-bronze: #7A5C2E;

    /* Stati semantici */
    --clr-success: #3F7A4D;        --clr-success-bg: #E8F1E7;
    --clr-warning: #A87423;        --clr-warning-bg: #FBF1DA;
    --clr-error: #A04338;          --clr-error-bg: #F5DCD9;
    --clr-info: #3B5F8A;           --clr-info-bg: #E4ECF7;

    /* Modulo (default = trasversali = oro) */
    --clr-module: #C9A24B;
    --clr-module-surface: #F4EFE5;
    --clr-module-border: #E8E1D1;

    /* Bootstrap override (variabili globali) */
    --bs-primary: #C9A24B;
    --bs-primary-rgb: 201,162,75;
    --bs-body-bg: #FAF7F0;
    --bs-body-color: #1F1A14;
    --bs-border-color: #D6CFBE;
    --bs-border-radius: 0.375rem;
    --bs-link-color: #9F7E32;
    --bs-link-hover-color: #7A5C2E;
}

[data-module="compro-oro"]    { --clr-module: #3B5F8A; --clr-module-surface: #E4ECF7; --clr-module-border: #C6D4E7; }
[data-module="banco-metalli"] { --clr-module: #6B6F76; --clr-module-surface: #ECEDEF; --clr-module-border: #D2D4D8; }
[data-module="oreficeria"]    { --clr-module: #9C5B33; --clr-module-surface: #F2E5DC; --clr-module-border: #E0CBB9; }
[data-module="gioielleria"]   { --clr-module: #8E4A5C; --clr-module-surface: #F1E2E5; --clr-module-border: #E2C9CF; }

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    background-color: var(--clr-bg);
    color: var(--clr-text);
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-size: 15px;
    -webkit-font-smoothing: antialiased;
}

.code, .font-monospace { font-family: 'JetBrains Mono', monospace; font-variant-numeric: tabular-nums; }
.numeric { font-family: 'JetBrains Mono', monospace; font-variant-numeric: tabular-nums; text-align: right; }

/* Material Symbols inline */
.material-symbols-outlined {
    font-size: 1.1em;
    vertical-align: middle;
    line-height: 1;
}

/* ============================================================
   Layout: header + sidebar + main
   ============================================================ */
.augest-app { min-height: 100vh; }

.augest-header {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: 56px;
    z-index: 50;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0 1rem;
    background: var(--clr-surface);
    border-bottom: 1px solid var(--clr-border);
    box-shadow: 0 1px 2px rgba(31,26,20,0.04);
}
.augest-header__menu {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px; height: 36px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 0.375rem;
    color: var(--clr-text);
    cursor: pointer;
}
.augest-header__menu:hover { background: var(--clr-surface-alt); }
.augest-header__novita { position: relative; text-decoration: none; }
.augest-header__conteggio {
    position: absolute;
    top: 1px; right: -2px;
    min-width: 18px; height: 18px;
    padding: 0 4px;
    border-radius: 9px;
    background: var(--clr-error);
    color: #fff;
    font-size: 0.6875rem;
    font-weight: 600;
    line-height: 18px;
    text-align: center;
}
.augest-header__brand {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--clr-gold);
    letter-spacing: 0.02em;
    text-decoration: none;
    margin-left: 0.25rem;
}
.augest-header__spacer { flex: 1; }
.augest-header__sede, .augest-header__user { display: inline-flex; }
.augest-header__userbtn {
    color: var(--clr-text);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    border: 1px solid transparent;
}
.augest-header__userbtn:hover { color: var(--clr-text); background: var(--clr-surface-alt); }

.augest-sidebar {
    position: fixed;
    top: 56px; bottom: 0; left: 0;
    width: 232px;
    z-index: 40;
    background: var(--clr-surface-alt);
    border-right: 1px solid var(--clr-divider);
    overflow-y: auto;
    transition: transform 0.2s ease;
}
.augest-sidebar__search {
    position: sticky;
    top: 0;
    z-index: 2;
    padding: 0.65rem 0.75rem;
    background: var(--clr-surface-alt);
    border-bottom: 1px solid var(--clr-divider);
}
.augest-sidebar__search .material-symbols-outlined {
    position: absolute;
    left: 1.35rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.1rem;
    color: var(--clr-text-disabled);
    pointer-events: none;
}
.augest-sidebar__search-input {
    width: 100%;
    padding: 0.4rem 0.6rem 0.4rem 2.1rem;
    font-size: 0.875rem;
    color: var(--clr-text);
    background: var(--clr-surface);
    border: 1px solid var(--clr-border);
    border-radius: 0.375rem;
}
.augest-sidebar__search-input::placeholder { color: var(--clr-text-disabled); }
.augest-sidebar__search-input:focus {
    outline: none;
    border-color: var(--clr-gold);
    box-shadow: 0 0 0 0.2rem rgba(201,162,75,0.25);
}
.augest-sidebar__empty {
    margin: 0;
    padding: 0.75rem 1rem 0.25rem;
    font-size: 0.8rem;
    color: var(--clr-text-muted);
}
.augest-sidebar__link.is-filtered-out,
.augest-sidebar__group.is-filtered-out { display: none; }
.augest-sidebar__nav { display: flex; flex-direction: column; padding: 0.5rem 0; }
.augest-sidebar__group { padding-top: 0.5rem; }
/* L'intestazione è il comando che apre e chiude la sezione: <button> azzerato
   fino a restare identico all'etichetta di prima, più la freccia a destra. */
.augest-sidebar__group-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    width: 100%;
    padding: 1rem 1rem 0.5rem;
    font-family: inherit;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    text-align: left;
    color: var(--clr-module);
    background: none;
    border: 0;
    cursor: pointer;
}
.augest-sidebar__group-label:hover .augest-sidebar__group-arrow { opacity: 1; }
.augest-sidebar__group-label:focus-visible {
    outline: 2px solid var(--clr-gold);
    outline-offset: -2px;
    border-radius: 0.375rem;
}
.augest-sidebar__group-name { flex: 1 1 auto; }
.augest-sidebar__group-arrow {
    flex: 0 0 auto;
    opacity: 0.6;
    transform: rotate(180deg);
    transition: transform 0.2s ease, opacity 0.2s ease;
}
.augest-sidebar__group.is-collapsed .augest-sidebar__group-arrow { transform: rotate(0deg); }
.augest-sidebar__group.is-collapsed .augest-sidebar__group-items { display: none; }
/* Con una ricerca in corso i gruppi chiusi mostrano comunque le voci che
   corrispondono, altrimenti la ricerca smetterebbe di trovarle. */
.augest-sidebar.is-searching .augest-sidebar__group.is-collapsed .augest-sidebar__group-items { display: block; }
.augest-sidebar__group--trasversali .augest-sidebar__group-label,
.augest-sidebar__group--backoffice .augest-sidebar__group-label,
.augest-sidebar__group--consulente .augest-sidebar__group-label { color: var(--clr-text-muted); }
/* I gruppi di modulo portano sempre il proprio colore, anche fuori dalle loro pagine. */
.augest-sidebar__group--compro-oro    { --clr-module: #3B5F8A; }
.augest-sidebar__group--banco-metalli { --clr-module: #6B6F76; }
.augest-sidebar__group--oreficeria    { --clr-module: #9C5B33; }
.augest-sidebar__group--gioielleria   { --clr-module: #8E4A5C; }
.augest-sidebar__group-label .material-symbols-outlined { font-size: 1rem; vertical-align: -2px; }
.augest-sidebar__link {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    color: var(--clr-text);
    text-decoration: none;
    border-left: 3px solid transparent;
}
.augest-sidebar__link:hover { background: var(--clr-divider); color: var(--clr-text); }
.augest-sidebar__link.is-active {
    background: var(--clr-surface);
    font-weight: 600;
    color: var(--clr-module);
    border-left-color: var(--clr-module);
}
.augest-sidebar__link .material-symbols-outlined { font-size: 1.15rem; }

.augest-main {
    margin-top: 56px;
    margin-left: 232px;
    min-height: calc(100vh - 56px);
    background: var(--clr-bg);
}
.augest-main__inner {
    max-width: 1280px;
    padding: 1.5rem 1.5rem 2rem;
}

/* Area dei Compro Oro esterni (voce A23): niente sidebar, contenuto centrato. */
.augest-main--esterno { margin-left: 0; }
.augest-main--esterno .augest-main__inner { margin: 0 auto; max-width: 1080px; }

@media (width < 992px) {
    .augest-sidebar { transform: translateX(-100%); }
    .augest-sidebar.is-open { transform: translateX(0); box-shadow: 0 8px 24px rgba(31,26,20,0.12); }
    .augest-main { margin-left: 0; }
    .augest-main__inner { padding: 1rem 1rem 1.5rem; }
}

/* ============================================================
   Page header
   ============================================================ */
.page-header {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--clr-divider);
}
.page-header__icon { font-size: 2rem !important; color: var(--clr-module); line-height: 1; flex: 0 0 auto; }
.page-header__body { flex: 1 1 auto; }
.page-header__crumb { font-size: 0.8rem; color: var(--clr-text-muted); margin: 0 0 0.15rem; }
.page-header__title {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.875rem;
    font-weight: 700;
    color: var(--clr-text);
    margin: 0;
}
.page-header__title::after {
    content: '';
    display: block;
    width: 56px; height: 3px;
    margin-top: 0.5rem;
    background: var(--clr-module);
}
.page-header__actions { flex: 0 0 auto; align-self: center; }

/* ============================================================
   Card
   ============================================================ */
.augest-card {
    background: var(--clr-surface);
    border: 1px solid var(--clr-border);
    border-radius: 0.5rem;
    overflow: hidden;
}
.augest-card--evidenziata { border-top: 3px solid var(--clr-module); }
.augest-card__header {
    padding: 0.75rem 1rem;
    background: var(--clr-surface-alt);
    border-bottom: 1px solid var(--clr-divider);
    font-family: 'Inter', sans-serif;
    font-size: 0.9rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--clr-text-muted);
}
.augest-card__body { padding: 1rem; }

/* Card interamente cliccabile: la freccia in testata segnala il collegamento,
   altrimenti invisibile — la card non si distingue in nulla da una statica. */
.augest-card--link .augest-card__header {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}
.augest-card__link-icon {
    margin-left: auto;
    font-size: 1.1rem;
    color: var(--clr-module);
    transition: transform 0.15s ease;
}
a:hover > .augest-card--link {
    border-color: var(--clr-module);
}
a:hover > .augest-card--link .augest-card__link-icon { transform: translateX(3px); }

/* ============================================================
   Tabelle
   ============================================================ */
.augest-table {
    width: 100%;
    margin-bottom: 0;
    border-collapse: separate;
    border-spacing: 0;
}
.augest-table thead th {
    background: var(--clr-surface-alt);
    border-bottom: 2px solid var(--clr-border-strong);
    padding: 0.6rem 0.75rem;
    font-family: 'Inter', sans-serif;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--clr-text-muted);
}
.augest-table tbody td {
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--clr-divider);
    font-size: 0.875rem;
    color: var(--clr-text);
    vertical-align: middle;
}
.augest-table tbody tr:hover td { background: var(--clr-bg); }

/* La quotazione del Compro Oro esterno (area del banco, voce A25): il prezzo del puro
   nella testata della card, e sotto la tabella per titolo a tutta larghezza, compatta.
   Stesso stile per le card del metallo da fondere (voce A26): i grammi nella testata. */
/* Testata su una riga sola, sempre: il prezzo non va mai a capo e non si stringe; se lo
   spazio manca si accorcia il nome del metallo (coi puntini), poi il prezzo rimpicciolisce
   con la larghezza della card (container query). */
.augest-quotazione { container-type: inline-size; }
.augest-quotazione__testata {
    display: flex;
    flex-wrap: nowrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
}
.augest-quotazione__metallo {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.augest-quotazione__puro {
    flex-shrink: 0;
    white-space: nowrap;
    font-size: clamp(0.9rem, 6.5cqi, 1.15rem);
    font-weight: 700;
    text-transform: none; /* «€/g», non «€/G» del maiuscolo della testata */
}
.augest-quotazione__titoli thead th { padding: 0.35rem 0.75rem; }
.augest-quotazione__titoli tbody td { padding: 0.3rem 0.75rem; font-size: 0.82rem; }

/* Gli elenchi della colonna stretta della pagina Appuntamenti (voce A25): una voce per
   appuntamento, coi bottoni sotto e sempre in vista. */
.augest-lista-appuntamenti { list-style: none; margin: 0; padding: 0; }
.augest-lista-appuntamenti > li {
    padding: 0.6rem 1rem;
    border-bottom: 1px solid var(--clr-divider);
    font-size: 0.875rem;
}
.augest-lista-appuntamenti > li:last-child { border-bottom: 0; }
.augest-lista-appuntamenti__merce { margin-top: 0.15rem; }
.augest-lista-appuntamenti__merce .text-nowrap { white-space: normal !important; }
.augest-lista-appuntamenti__azioni { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.4rem; }

/* Tabella lunga chiusa in un'altezza fissa: scorre al suo interno invece di
   allungare la pagina all'infinito. Si applica al contenitore della tabella
   (di norma il .table-responsive) e il numero di righe da mostrare si passa
   con --righe. È un'altezza, non un conteggio: dove le righe portano una
   seconda linea di testo se ne vedono un po' meno, e va bene così.
   L'intestazione resta ancorata in alto — ha già un fondo opaco — altrimenti
   scorrendo si perde il nome delle colonne. */
.augest-table-scroll {
    --righe: 10;
    --altezza-riga: 2.35rem;   /* riga a una sola linea di testo */
    --altezza-intestazione: 2.5rem;
    max-height: calc(var(--righe) * var(--altezza-riga) + var(--altezza-intestazione));
    overflow-y: auto;
}
.augest-table-scroll .augest-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
}
.augest-table tbody td.code, .augest-table thead th.code { font-family: 'JetBrains Mono', monospace; color: var(--clr-text-muted); }
.augest-table tbody td.numeric, .augest-table thead th.numeric { font-family: 'JetBrains Mono', monospace; text-align: right; font-variant-numeric: tabular-nums; }

/* Coppia riga + sotto-riga: serve quando un valore scompone quello della riga sopra e
   deve stare incolonnato sotto di esso, cosa che dentro una cella non si ottiene (es.
   «di cui da Compro Oro» nella composizione dell'utile in dashboard). Le due righe si
   devono leggere come un blocco unico, quindi il filo divisorio corre solo sotto la
   seconda e lo spazio fra loro si stringe; l'hover le illumina insieme, altrimenti una
   coppia mezza evidenziata sembra un errore di rendering. */
.augest-table tbody tr.riga-con-sottovoce td { border-bottom: 0; padding-bottom: 0.15rem; }
.augest-table tbody tr.riga-sottovoce td { padding-top: 0; font-size: 0.8rem; color: var(--clr-text-muted); }
.augest-table tbody tr.riga-con-sottovoce:hover td,
.augest-table tbody tr.riga-con-sottovoce:hover + tr.riga-sottovoce td,
.augest-table tbody tr.riga-sottovoce:hover td,
.augest-table tbody tr.riga-con-sottovoce:has(+ tr.riga-sottovoce:hover) td { background: var(--clr-bg); }

/* Riga di chiusura che riassume le precedenti invece di sommarsi a loro (il metadato
   Artigianato in dashboard): la stacca un filo più marcato. */
.augest-table tbody tr.riga-metadato td { border-top: 2px solid var(--clr-border); }

/* ============================================================
   Badge stati
   ============================================================ */
.augest-badge {
    display: inline-block;
    padding: 0.2rem 0.5rem;
    border-radius: 0.25rem;
    font-family: 'Inter', sans-serif;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    line-height: 1.4;
}
.augest-badge--success { background: var(--clr-success-bg); color: var(--clr-success); }
.augest-badge--avviso  { background: var(--clr-warning-bg); color: var(--clr-warning); }
.augest-badge--errore  { background: var(--clr-error-bg);   color: var(--clr-error); }
.augest-badge--info    { background: var(--clr-info-bg);    color: var(--clr-info); }
.augest-badge--neutro  { background: var(--clr-surface-alt);color: var(--clr-text-muted); }
.augest-badge--premium { background: rgba(201,162,75,0.15); color: var(--clr-bronze); }

/* Collegamento dentro un badge: prende il colore del badge invece di quello dei
   link, che su questi sfondi tinta perderebbe contrasto. La sottolineatura resta,
   ed è l'unica cosa che lo distingue dal resto del testo. */
.augest-badge a { color: inherit; text-decoration: underline; }
.augest-badge a:hover { color: inherit; text-decoration: none; }

/* Badge contestuale di modulo (DESIGN §3.6): sfondo tinta, bordo tinta, testo
   nel colore del modulo. Usato per la sezione degli articoli del magazzino unico. */
.augest-badge--mod-compro-oro    { background: #E4ECF7; border: 1px solid #C6D4E7; color: #3B5F8A; }
.augest-badge--mod-banco-metalli { background: #ECEDEF; border: 1px solid #D2D4D8; color: #6B6F76; }
.augest-badge--mod-oreficeria    { background: #F2E5DC; border: 1px solid #E0CBB9; color: #9C5B33; }
.augest-badge--mod-gioielleria   { background: #F1E2E5; border: 1px solid #E2C9CF; color: #8E4A5C; }

/* ============================================================
   Interruttore (toggle)
   ============================================================
   Interruttore acceso/spento che è anche il comando: un <button type="submit">
   dentro il proprio form, quindi funziona senza JavaScript e senza un secondo
   bottone di conferma accanto. Lo stato è portato da aria-checked, che è anche
   ciò che il CSS legge — niente classi di stato da tenere allineate a mano.
   Palette: oro pieno da acceso, sabbia da spento (DESIGN §2). */
.augest-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    font-family: 'Inter', sans-serif;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--clr-text-muted);
    line-height: 1.4;
}
.augest-toggle__track {
    position: relative;
    flex: 0 0 auto;
    width: 2.5rem;
    height: 1.375rem;
    border: 1px solid var(--clr-border-strong);
    border-radius: 999px;
    background: var(--clr-surface-alt);
    transition: background 0.15s ease, border-color 0.15s ease;
}
.augest-toggle__track::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 0.1875rem;
    width: 1rem;
    height: 1rem;
    margin-top: -0.5rem;
    border-radius: 50%;
    background: #FFFFFF;
    border: 1px solid var(--clr-border);
    transition: transform 0.15s ease;
}
.augest-toggle[aria-checked="true"] .augest-toggle__track {
    background: var(--clr-gold);
    border-color: var(--clr-gold);
}
.augest-toggle[aria-checked="true"] .augest-toggle__track::after {
    transform: translateX(1.125rem);
    border-color: var(--clr-gold-dark);
}
.augest-toggle[aria-checked="true"] { color: var(--clr-text); }
.augest-toggle:hover .augest-toggle__track { border-color: var(--clr-gold-dark); }
.augest-toggle:focus-visible { outline: none; }
.augest-toggle:focus-visible .augest-toggle__track {
    border-color: var(--clr-gold);
    box-shadow: 0 0 0 0.2rem rgba(201, 162, 75, 0.25);
}

/* ============================================================
   Alert
   ============================================================ */
.augest-alert {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.75rem 1rem;
    border-radius: 0.375rem;
    border-left: 4px solid currentColor;
    margin-bottom: 0.75rem;
    font-size: 0.9rem;
}
.augest-alert--success { background: var(--clr-success-bg); color: var(--clr-success); }
.augest-alert--avviso  { background: var(--clr-warning-bg); color: var(--clr-warning); }
.augest-alert--errore  { background: var(--clr-error-bg);   color: var(--clr-error); }
.augest-alert--info    { background: var(--clr-info-bg);    color: var(--clr-info); }
/* Gli avvisi mostrati o nascosti dal JS (es. data-solo-tipo nel form della fattura, bug B6)
   restano nascosti anche senza il `[hidden]` di Bootstrap: `display: flex` qui sopra vincerebbe. */
.augest-alert[hidden] { display: none; }
/* Avviso che porta a una card della stessa pagina (vendita in perdita in dashboard):
   si capisce che è cliccabile, e la card raggiunta si accende per un attimo
   (assets/scorri-a-card.js). */
.augest-alert--link { cursor: pointer; }
.augest-alert--link:hover { filter: brightness(0.97); }
.augest-ancora { scroll-margin-top: 1rem; }
.augest-ancora--evidenziata .augest-card { animation: augest-ancora-evidenzia 2.2s ease-out; }
@keyframes augest-ancora-evidenzia {
    0%, 45% { box-shadow: 0 0 0 3px var(--clr-warning); }
    100%    { box-shadow: 0 0 0 0 transparent; }
}

/* Codice di attivazione del dispositivo di cassa: dodici caratteri da digitare
   sull'AT15 leggendoli dallo schermo, quindi grandi, in mono, spaziati (DESIGN §4:
   i codici sono in JetBrains Mono). Compare una volta sola, nel flash. */
.augest-codice-attivazione {
    display: inline-block;
    padding: 0.5rem 1rem;
    border: 1px dashed var(--clr-gold);
    border-radius: 0.375rem;
    background: var(--clr-surface);
    font-family: 'JetBrains Mono', monospace;
    font-size: 1.75rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    color: var(--clr-text);
    user-select: all;
}

/* ============================================================
   Pulsanti
   ============================================================ */
.btn-augest-primary {
    background: var(--clr-gold);
    color: var(--clr-text);
    border: 1px solid var(--clr-gold);
    border-radius: 0.375rem;
    padding: 0.5rem 1rem;
    font-family: 'Inter', sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: none;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}
.btn-augest-primary:hover, .btn-augest-primary:focus {
    background: var(--clr-gold-dark);
    color: #FFFFFF;
    border-color: var(--clr-gold-dark);
}
.btn-augest-primary:focus { box-shadow: 0 0 0 0.2rem rgba(201,162,75,0.25); }

.btn-outline-augest {
    background: transparent;
    color: var(--clr-text);
    border: 1px solid var(--clr-border-strong);
    border-radius: 0.375rem;
    padding: 0.5rem 1rem;
    font-size: 0.85rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}
.btn-outline-augest:hover { background: var(--clr-surface-alt); color: var(--clr-text); border-color: var(--clr-border-strong); }

.btn-outline-pericolo {
    background: transparent;
    color: var(--clr-error);
    border: 1px solid var(--clr-error);
    border-radius: 0.375rem;
    padding: 0.35rem 0.6rem;
    font-size: 0.78rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}
.btn-outline-pericolo:hover { background: var(--clr-error-bg); color: var(--clr-error); }
/* In testata, accanto a «Modifica»: stesse misure di .btn-outline-augest (il pericolo
   compatto resta per le tabelle). */
.btn-outline-pericolo--testata {
    padding: 0.5rem 1rem;
    font-size: 0.85rem;
    gap: 0.4rem;
}

/* ============================================================
   Override Bootstrap (essenziali)
   ============================================================ */
.btn-primary {
    background-color: var(--clr-gold);
    border-color: var(--clr-gold);
    color: var(--clr-text);
}
.btn-primary:hover, .btn-primary:focus {
    background-color: var(--clr-gold-dark);
    border-color: var(--clr-gold-dark);
    color: #FFFFFF;
}

.form-control, .form-select {
    border: 1px solid var(--clr-border);
    border-radius: 0.375rem;
    color: var(--clr-text);
    font-size: 0.9rem;
}
.form-control:focus, .form-select:focus {
    border-color: var(--clr-gold);
    box-shadow: 0 0 0 0.2rem rgba(201,162,75,0.25);
}
/* [data-valuta]: importi in euro. Sono campi di testo (il formato «1.234,50» non
   sta in un input numerico, vedi assets/valuta-input.js) ma restano campi numerici
   a tutti gli effetti, quindi stessa resa monospaziata allineata a destra. */
.form-control[type="number"], .form-control[data-valuta], .form-control.numeric {
    font-family: 'JetBrains Mono', monospace;
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.form-label { font-size: 0.8rem; font-weight: 500; margin-bottom: 0.35rem; color: var(--clr-text); }
.form-text { color: var(--clr-text-muted); }
.invalid-feedback { color: var(--clr-error); }

/* Conti del pezzo nel form articolo (assets/margine-netto.js): tre righe di
   testo di supporto, numeri tabulari; il margine è verde, sotto costo terracotta. */
.margine-conti { font-size: 0.875rem; color: var(--clr-text-muted); font-variant-numeric: tabular-nums; line-height: 1.5; }
.margine-conti__riga { display: block; }
.margine-conti__riga:empty { display: none; }
.margine-conti__riga--ok { color: var(--clr-success); font-weight: 500; }
.margine-conti__riga--sotto-costo { color: var(--clr-error); font-weight: 500; }

/* Ricerca del cliente privato dalla scheda articolo (assets/cerca-cliente.js): l'elenco
   dei risultati si apre sotto la casella, sopra il resto del form, come un dropdown. */
.augest-cerca-cliente__risultati { top: 100%; left: 0; z-index: 20; max-height: 16rem; overflow-y: auto; border: 1px solid var(--clr-border); border-radius: 0.375rem; box-shadow: 0 8px 24px rgba(31,26,20,0.12); background: var(--clr-surface); }

/* Bottone PDF del documento fiscale (assets/documento-pdf.js): il recupero fallito è in terracotta. */
.documento-pdf { display: inline-block; }
.documento-pdf__fallito { color: var(--clr-error); font-weight: 500; }
.is-invalid { border-color: var(--clr-error) !important; box-shadow: 0 0 0 0.2rem rgba(160,67,56,0.25) !important; }

/* Stato «in correzione» (assets/validazione-corretta.js): il campo respinto dal
   server è stato modificato dall'operatore ma non ancora rivalidato. Non è più un
   errore accertato — vira dal rosso all'ambra, campo e messaggio insieme, così si
   distingue a colpo d'occhio ciò che resta da sistemare da ciò che è già stato
   toccato. Tornando al valore respinto si torna al rosso. */
.is-invalid.is-corretto {
    border-color: var(--clr-warning) !important;
    box-shadow: 0 0 0 0.2rem rgba(168,116,35,0.25) !important;
}
/* L'icona di validazione di Bootstrap resta agganciata a .is-invalid: va ridipinta
   con lo stesso ambra, altrimenti il campo giallo mostrerebbe un'esclamazione rossa.
   Sul <select> l'immagine va ricomposta con la freccia (var di Bootstrap), che
   altrimenti sparirebbe insieme al background-image sostituito.
   `--bs-form-select-bg-img` è definita da bootstrap.min.css, servito da CDN in
   base.html.twig: l'IDE la segnala come irrisolta perché non è in un file del
   progetto, ma a runtime c'è (il select mostra freccia + icona). */
.form-control.is-invalid.is-corretto {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23A87423'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23A87423' stroke='none'/%3e%3c/svg%3e");
}
.form-select.is-invalid.is-corretto {
    background-image: var(--bs-form-select-bg-img), url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23A87423'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23A87423' stroke='none'/%3e%3c/svg%3e");
}
.form-check-input.is-invalid.is-corretto ~ .form-check-label,
.invalid-feedback.is-corretto { color: var(--clr-warning); }
/* La spunta invalida resta riempita del rosso di Bootstrap anche col bordo virato:
   `.form-check-input.is-invalid:checked` è più specifico dell'override di brand. */
.form-check-input.is-invalid.is-corretto:checked { background-color: var(--clr-warning); }

/* Campo di una riga a griglia (registro PS: lotti, pagamenti). Sotto il widget c'è
   sempre una fascia di altezza fissa per il messaggio di validazione, vuota quando il
   campo è valido: il campo occupa lo stesso spazio prima e dopo un invio rifiutato,
   quindi nessun errore sposta o disallinea i campi vicini. Su una riga da sette
   colonne il messaggio, crescendo dentro la propria colonna, spingeva in alto il
   proprio campo rispetto agli altri.
   La fascia tiene due righe di messaggio: le rare eccedenze sbordano (overflow
   visibile) senza spostare nulla, che è il punto dell'intera scelta. */
.augest-campo__errori {
    height: 2rem;
    padding-top: 0.15rem;
    overflow: visible;
}
.augest-campo__errori .invalid-feedback {
    font-size: 0.75rem;
    line-height: 1.2;
    margin: 0;
}

.form-check-input:checked { background-color: var(--clr-gold); border-color: var(--clr-gold); }
.form-check-input:focus { border-color: var(--clr-gold); box-shadow: 0 0 0 0.2rem rgba(201,162,75,0.25); }

.dropdown-menu {
    border: 1px solid var(--clr-border);
    box-shadow: 0 8px 24px rgba(31,26,20,0.12);
    border-radius: 0.375rem;
}
.dropdown-item.active, .dropdown-item:active {
    background-color: rgba(201,162,75,0.18);
    color: var(--clr-text);
}
/* Menu «Colonne» delle tabelle del consulente: con molte colonne scorre, non esce dallo schermo. */
.colonne-menu { width: 22rem; max-width: calc(100vw - 2rem); max-height: 70vh; overflow-y: auto; }

.dropdown-header { color: var(--clr-text-muted); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; }

.modal-content { border: 1px solid var(--clr-border); border-radius: 0.5rem; box-shadow: 0 8px 24px rgba(31,26,20,0.12); }
.modal-header { background: var(--clr-surface-alt); border-bottom: 1px solid var(--clr-divider); }
/* Backdrop con tinta di brand: evita lo sfondo nero pieno che nascondeva la pagina.
   .show con opacity:1 impedisce la doppia trasparenza che su alcuni browser annerisce. */
.modal-backdrop { background-color: rgba(31, 26, 20, 0.5); }
.modal-backdrop.show { opacity: 1; }
/* Backdrop completamente trasparente quando il modal lo richiede (es. selezione
   avanzata giacenze): la classe sul body è attiva solo mentre quel modal è aperto. */
body.augest-modal-backdrop-trasparente .modal-backdrop { background-color: transparent; }

.input-group-text {
    background: var(--clr-surface-alt);
    color: var(--clr-text-muted);
    border: 1px solid var(--clr-border);
}

/* Galleria foto lotto nella scheda operazione: anteprime con eliminazione. */
.augest-foto-cella { position: relative; width: 56px; height: 56px; }
.augest-foto-cella__thumb {
    width: 56px; height: 56px; object-fit: cover; display: block;
    border-radius: 0.375rem; border: 1px solid var(--clr-border);
}
.augest-foto-cella__del {
    position: absolute; top: -6px; right: -6px;
    width: 20px; height: 20px; padding: 0;
    border: 0; border-radius: 50%;
    background: var(--clr-error); color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer; line-height: 1; box-shadow: 0 1px 3px rgba(31, 26, 20, 0.3);
}
.augest-foto-cella__del .material-symbols-outlined { font-size: 14px; }

/* Miniatura ingrandibile: serve a ritrovare l'oggetto con un colpo d'occhio dove non
   c'è spazio per una foto leggibile — le tabelle di riepilogo della registrazione PS e i
   pannelli di gruppo dello spacchettamento. Un tocco la ingrandisce, un altro la rimette
   com'era; il comportamento sta in `compro_oro/_js_foto_zoom.html.twig`.
   Il lato si cambia con `--mini-foto-lato` sull'antenato: la miniatura di una riga di
   tabella e quella di un pannello non possono avere la stessa taglia. */
.augest-mini-foto__btn {
    padding: 0;
    border: 0;
    background: none;
    line-height: 0;
    cursor: zoom-in;
}
.augest-mini-foto__btn[aria-pressed="true"] { cursor: zoom-out; }
.augest-mini-foto__btn:focus-visible { outline: 2px solid var(--clr-gold); outline-offset: 2px; }
.augest-mini-foto {
    width: var(--mini-foto-lato, 1.75rem);
    height: var(--mini-foto-lato, 1.75rem);
    object-fit: cover;
    border-radius: 0.25rem;
    border: 1px solid var(--clr-border);
    vertical-align: middle;
    transition: transform 0.15s ease;
}
/* Lo zoom è una `transform`: non occupa spazio, quindi la riga non si allarga e le
   colonne restano allineate. L'origine a sinistra tiene la foto dov'era invece di
   farla espandere anche verso la colonna precedente. */
.augest-mini-foto__btn[aria-pressed="true"] .augest-mini-foto {
    transform: scale(3);
    transform-origin: left center;
    position: relative;
    z-index: 5;
    box-shadow: 0 4px 12px rgba(31, 26, 20, 0.25);
}
/* I contenitori che ritagliano ciò che esce dai loro bordi — la tabella che scorre in
   orizzontale, la card coi suoi angoli arrotondati — mostrerebbero solo la porzione di
   foto che ci sta dentro: il ritaglio si toglie finché una foto è ingrandita, e torna
   appena si richiude. */
.table-responsive.has-foto-zoom,
.augest-card.has-foto-zoom { overflow: visible; }


/* Help dei form come icona (i) accanto alla label, con tooltip Bootstrap. */
.augest-label-row { display: inline-flex; align-items: center; gap: 0.35rem; margin-bottom: 0.5rem; }
.augest-label-row .form-label { margin-bottom: 0; }
/* Checkbox/radio singola con help: l'icona (i) subito dopo la label, sulla stessa riga. */
.augest-check-row { display: flex; flex-wrap: wrap; align-items: center; column-gap: 0.35rem; }
.augest-check-row > .form-check { margin-bottom: 0; }
.augest-check-row > .invalid-feedback { flex-basis: 100%; }
.augest-help {
    flex: 0 0 auto;
    font-size: 1.2rem;
    line-height: 1;
    color: var(--clr-text-muted);
    cursor: help;
    border-radius: 50%;
    transition: color 0.12s ease;
}
.augest-help:hover { color: var(--clr-module); }

/* Prezzo del lotto Compro Oro proposto dal massimo forzato (override) della caratura
   (voce M25): icona (i) dentro il campo, a destra, col prezzo della formula nel tooltip. */
.augest-prezzo-lotto { position: relative; }
.augest-prezzo-lotto__formula {
    position: absolute;
    top: 50%;
    right: 0.5rem;
    transform: translateY(-50%);
    font-size: 1.1rem;
    line-height: 1;
    color: var(--clr-module);
    cursor: help;
}
.augest-prezzo-lotto--formula > .form-control { padding-right: 2rem; }

/* ============================================================
   Login
   ============================================================ */
.augest-login {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    background:
        linear-gradient(135deg, rgba(201,162,75,0.05), rgba(31,26,20,0.04)),
        var(--clr-bg);
}
.augest-login__card {
    width: 100%;
    max-width: 420px;
    background: var(--clr-surface);
    border: 1px solid var(--clr-border);
    border-top: 3px solid var(--clr-gold);
    border-radius: 0.5rem;
    padding: 2rem;
    box-shadow: 0 8px 24px rgba(31,26,20,0.08);
}
.augest-login__brand { text-align: center; margin-bottom: 2rem; }
.augest-login__mark {
    display: block;
    font-family: 'Cormorant Garamond', serif;
    font-size: 2.25rem;
    font-weight: 700;
    color: var(--clr-gold);
    letter-spacing: 0.02em;
    line-height: 1;
}
.augest-login__claim {
    display: block;
    margin-top: 0.4rem;
    font-size: 0.85rem;
    color: var(--clr-text-muted);
}

/* ============================================================
   Pagina d'errore (templates/bundles/TwigBundle/Exception)
   Stessa card centrata del login: fuori dal layout del backoffice,
   perché l'errore può nascere prima che menu e sede siano pronti.
   ============================================================ */
.augest-errore {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
    background: var(--clr-bg);
}
.augest-errore__card {
    width: 100%;
    max-width: 480px;
    background: var(--clr-surface);
    border: 1px solid var(--clr-border);
    border-top: 3px solid var(--clr-gold);
    border-radius: 0.5rem;
    padding: 2rem;
    box-shadow: 0 8px 24px rgba(31,26,20,0.08);
    text-align: center;
}
.augest-errore__mark {
    display: block;
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--clr-gold);
    letter-spacing: 0.02em;
    line-height: 1;
    margin-bottom: 1.5rem;
}
.augest-errore__icona { font-size: 2.5rem; color: var(--clr-text-muted); }
.augest-errore__titolo {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.875rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    margin: 0.5rem 0 0.75rem;
}
.augest-errore__spiegazione { font-size: 0.95rem; line-height: 1.5; margin-bottom: 1rem; }
.augest-errore__riferimento { font-size: 0.8rem; color: var(--clr-text-muted); margin-bottom: 1.5rem; }
.augest-errore__azioni { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; }
.augest-errore__azioni .material-symbols-outlined { font-size: 1.1rem; vertical-align: -3px; }

/* ============================================================
   Permessi card (form ruoli)
   ============================================================ */
.augest-permessi-card {
    border: 1px solid var(--clr-border);
    border-top: 3px solid var(--clr-module);
    border-radius: 0.5rem;
    background: var(--clr-surface);
    height: 100%;
    overflow: hidden;
}
.augest-permessi-card__header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    /* Lo spazio a sinistra lo dà il bottone, così l'area cliccabile arriva al bordo. */
    padding: 0 0.85rem 0 0;
    background: var(--clr-module-surface);
    border-bottom: 1px solid var(--clr-module-border);
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--clr-module);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
/* L'intestazione apre e chiude la card: <button> azzerato fino a restare identico
   al titolo di prima. Occupa tutta la striscia tranne l'interruttore del modulo. */
.augest-permessi-card__toggle {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 0.5rem 0.6rem 0.85rem;
    font: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    text-align: left;
    color: inherit;
    background: none;
    border: 0;
    cursor: pointer;
}
.augest-permessi-card__toggle:focus-visible {
    outline: 2px solid var(--clr-gold);
    outline-offset: -2px;
}
.augest-permessi-card__titolo { flex: 1 1 auto; }
/* A card chiusa è l'unica cosa che dice quanto è concesso nel modulo. */
.augest-permessi-card__conteggio {
    flex: 0 0 auto;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0;
    font-variant-numeric: tabular-nums;
    color: var(--clr-module);
    background: var(--clr-surface);
    border: 1px solid var(--clr-module-border);
    border-radius: 999px;
    padding: 0.05rem 0.45rem;
}
.augest-permessi-card__conteggio.is-vuoto {
    color: var(--clr-text-muted);
    border-color: var(--clr-border);
}
.augest-permessi-card__arrow {
    flex: 0 0 auto;
    opacity: 0.6;
    transform: rotate(180deg);
    transition: transform 0.2s ease, opacity 0.2s ease;
}
.augest-permessi-card__toggle:hover .augest-permessi-card__arrow { opacity: 1; }
.augest-permessi-card.is-collapsed .augest-permessi-card__arrow { transform: rotate(0deg); }
.augest-permessi-card.is-collapsed .augest-permessi-card__body { display: none; }
/* `height: 100%` allinea le card aperte sulla stessa riga; a card chiusa va tolto,
   altrimenti si allungherebbe a vuoto fino all'altezza della card aperta accanto. */
.augest-permessi-card.is-collapsed { height: auto; }
/* A card chiusa il bordo inferiore dell'intestazione è il bordo della card. */
.augest-permessi-card.is-collapsed .augest-permessi-card__header { border-bottom: 0; }
.augest-permessi-card__body { padding: 0.75rem 0.85rem; }
.augest-permessi-card__body .form-check { margin-bottom: 0.5rem; }
.augest-permessi-card__body .form-check-label { font-size: 0.85rem; }

/* Un riquadro per azione (lettura, creazione, modifica, eliminazione, altre
   operazioni): il filo di separazione va solo fra un gruppo e il successivo. */
.augest-permessi-gruppo + .augest-permessi-gruppo {
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--clr-divider);
}
.augest-permessi-gruppo__header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
/* Stessa divisione di ruoli della card: l'etichetta apre e chiude, l'interruttore
   «tutte» le sta accanto e resta fuori dal bottone. */
.augest-permessi-gruppo__toggle {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.2rem 0;
    font: inherit;
    text-align: left;
    color: inherit;
    background: none;
    border: 0;
    cursor: pointer;
}
.augest-permessi-gruppo__toggle:focus-visible {
    outline: 2px solid var(--clr-gold);
    outline-offset: 1px;
    border-radius: 0.25rem;
}
.augest-permessi-gruppo__label {
    flex: 1 1 auto;
    margin: 0;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--clr-text-muted);
}
.augest-permessi-gruppo__conteggio {
    flex: 0 0 auto;
    font-size: 0.7rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--clr-module);
}
.augest-permessi-gruppo__conteggio.is-vuoto { color: var(--clr-text-disabled); }
.augest-permessi-gruppo__arrow {
    flex: 0 0 auto;
    font-size: 1.1rem;
    opacity: 0.55;
    transform: rotate(180deg);
    transition: transform 0.2s ease, opacity 0.2s ease;
}
.augest-permessi-gruppo__toggle:hover .augest-permessi-gruppo__arrow { opacity: 1; }
.augest-permessi-gruppo.is-collapsed .augest-permessi-gruppo__arrow { transform: rotate(0deg); }
.augest-permessi-gruppo.is-collapsed .augest-permessi-gruppo__items { display: none; }
.augest-permessi-gruppo__items { padding-top: 0.5rem; }
/* Interruttore di gruppo e di modulo: si distingue dalle caselle dei permessi
   perché porta il colore del modulo anche da spento. */
.augest-permessi-toggle {
    flex: 0 0 auto;
    margin: 0;
    cursor: pointer;
    border-color: var(--clr-module-border);
}
.augest-permessi-toggle:indeterminate {
    background-color: var(--clr-module);
    border-color: var(--clr-module);
}

/* ============================================================
   Profilo: definition list
   ============================================================ */
.augest-defs { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 0.4rem 1rem; }
.augest-defs dt { font-size: 0.75rem; color: var(--clr-text-muted); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; }
.augest-defs dd { margin: 0; font-size: 0.9rem; overflow-wrap: anywhere; }

.augest-list { list-style: none; padding: 0; margin: 0; }
.augest-list li { padding: 0.5rem 0; border-bottom: 1px solid var(--clr-divider); }
.augest-list li:last-child { border-bottom: 0; }

/* ============================================================
   Form generale
   ============================================================ */
.augest-form .form-check-label { color: var(--clr-text); }
.augest-collection__item {
    background: var(--clr-bg);
    border: 1px solid var(--clr-divider);
    border-radius: 0.375rem;
    padding: 0.5rem;
}

.augest-search { max-width: 520px; }

/* ============================================================
   Pagina pubblica (homepage): ispirata al bigliettino da visita del negozio
   ============================================================ */
.vetrina {
    --vetrina-oro: #D9A145;
    --vetrina-chiaro: #EEEAE3;
    position: relative;
    min-height: 100svh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 3rem 1rem;
    background:
        radial-gradient(ellipse at 50% 35%, rgba(217, 161, 69, 0.07), transparent 60%),
        #0B0A09;
    color: var(--vetrina-chiaro);
}
.vetrina__angolo {
    position: absolute;
    pointer-events: none;
    background:
        radial-gradient(circle at 30% 40%, rgba(255, 244, 200, 0.8) 0 0.8px, transparent 1.3px) 0 0 / 7px 9px,
        radial-gradient(circle at 70% 20%, rgba(255, 235, 170, 0.6) 0 0.7px, transparent 1.2px) 3px 2px / 11px 5px,
        radial-gradient(circle at 50% 80%, rgba(80, 52, 8, 0.55) 0 1px, transparent 1.6px) 1px 4px / 5px 13px,
        radial-gradient(circle at 20% 60%, rgba(255, 250, 220, 0.5) 0 0.6px, transparent 1.1px) 5px 1px / 17px 7px,
        linear-gradient(135deg, #7A5714 0%, #C99A3A 30%, #E4C066 50%, #B5862C 70%, #8C6519 100%);
}
.vetrina__angolo--alto {
    top: 0;
    right: 0;
    width: clamp(140px, 26vw, 420px);
    height: clamp(110px, 20vw, 300px);
    clip-path: polygon(35% 0, 100% 0, 100% 100%);
}
.vetrina__angolo--basso {
    bottom: 0;
    left: 0;
    width: clamp(90px, 14vw, 220px);
    height: clamp(70px, 11vw, 170px);
    clip-path: polygon(0 0, 100% 100%, 0 100%);
}
.vetrina__stella {
    position: absolute;
    width: 26px;
    height: 26px;
    pointer-events: none;
    background: radial-gradient(circle, #FFF 0 8%, #FFF3D0 18%, rgba(217, 161, 69, 0.6) 45%, transparent 70%);
    clip-path: polygon(50% 0, 55% 45%, 100% 50%, 55% 55%, 50% 100%, 45% 55%, 0 50%, 45% 45%);
    animation: vetrina-brilla 4s ease-in-out infinite;
}
.vetrina__stella:nth-of-type(3) { top: 22%; left: 10%; width: 40px; height: 40px; }
.vetrina__stella:nth-of-type(4) { top: 64%; left: 4%; animation-delay: 1.3s; }
.vetrina__stella:nth-of-type(5) { top: 26%; right: 12%; animation-delay: 2.1s; }
.vetrina__stella:nth-of-type(6) { top: 78%; right: 8%; width: 18px; height: 18px; animation-delay: 0.7s; }
.vetrina__stella:nth-of-type(7) { top: 8%; left: 38%; width: 16px; height: 16px; animation-delay: 2.8s; }
@keyframes vetrina-brilla {
    0%, 100% { opacity: 0.35; transform: scale(0.8); }
    50% { opacity: 1; transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
    .vetrina__stella { animation: none; opacity: 0.8; }
}
.vetrina__contenuto {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 920px;
    text-align: center;
    font-family: 'Cormorant Garamond', Georgia, serif;
}
.vetrina__logo { margin: 0 0 clamp(1.5rem, 4vw, 2.5rem); }
.vetrina__logo img {
    display: block;
    width: min(340px, 70vw);
    height: auto;
    margin: 0 auto;
    filter: drop-shadow(0 0 24px rgba(217, 161, 69, 0.25));
}
.vetrina__oro { color: var(--vetrina-oro); }
.vetrina__servizi {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(1rem, 4vw, 2.5rem);
}
.vetrina__servizio {
    display: flex;
    flex-direction: column;
    margin: 0;
    font-weight: 600;
    font-size: clamp(2rem, 7vw, 4.25rem);
    line-height: 1;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.vetrina__servizio:first-child { align-items: flex-end; }
.vetrina__servizio:last-child { align-items: flex-start; }
.vetrina__servizio:first-child .vetrina__oro { font-size: 1.2em; }
.vetrina__divisore {
    align-self: stretch;
    width: 2px;
    background: linear-gradient(180deg, transparent, var(--vetrina-oro) 20%, var(--vetrina-oro) 80%, transparent);
}
.vetrina__slogan {
    margin: clamp(1.5rem, 4vw, 2.25rem) 0 0;
    padding: 0.6rem 0;
    border-top: 1px solid rgba(217, 161, 69, 0.45);
    border-bottom: 1px solid rgba(217, 161, 69, 0.45);
    font-weight: 600;
    font-size: clamp(0.85rem, 2.2vw, 1.3rem);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.vetrina__slogan > span { white-space: nowrap; }
.vetrina__contatti {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin: clamp(1.25rem, 3vw, 1.75rem) 0 0;
    font-style: normal;
    font-weight: 600;
    font-size: clamp(1.15rem, 3vw, 1.85rem);
    color: var(--vetrina-oro);
}
.vetrina__recapiti {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.25rem 1.5rem;
}
.vetrina__contatti a {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: inherit;
    text-decoration: none;
}
.vetrina__contatti a:hover,
.vetrina__contatti a:focus-visible { color: var(--vetrina-chiaro); }
.vetrina__contatti svg { width: 1em; height: 1em; }

/* ============================================================
   Backoffice: card di modulo (landing /backoffice)
   ============================================================ */
.modulo-card {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    height: 100%;
    padding: 1.25rem;
    background: var(--clr-surface);
    border: 1px solid var(--clr-border);
    border-top: 3px solid var(--clr-module);
    border-radius: 0.5rem;
    color: var(--clr-text);
    text-decoration: none;
    transition: box-shadow 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.modulo-card:hover {
    text-decoration: none;
    color: var(--clr-text);
    border-color: var(--clr-module-border);
    box-shadow: 0 1px 3px rgba(31,26,20,0.06), 0 2px 8px rgba(31,26,20,0.04);
}
.modulo-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 0.5rem;
    background: var(--clr-module-surface);
    border: 1px solid var(--clr-module-border);
    color: var(--clr-module);
}
.modulo-card__icon .material-symbols-outlined { font-size: 1.75rem; }
.modulo-card__title {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--clr-text);
    margin: 0;
    letter-spacing: 0.01em;
}
.modulo-card__desc {
    font-family: 'Inter', sans-serif;
    font-size: 0.875rem;
    color: var(--clr-text-muted);
    margin: 0;
    flex: 1 1 auto;
    line-height: 1.45;
}
.modulo-card__cta {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-family: 'Inter', sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--clr-module);
    margin-top: 0.25rem;
}
.modulo-card__cta .material-symbols-outlined { font-size: 1.1rem; }
.modulo-card--disabled {
    cursor: not-allowed;
    background: var(--clr-surface-alt);
    opacity: 0.75;
}
.modulo-card--disabled:hover {
    box-shadow: none;
    border-color: var(--clr-border);
}
.modulo-card--disabled .modulo-card__title,
.modulo-card--disabled .modulo-card__desc { color: var(--clr-text-muted); }
.modulo-card--disabled .modulo-card__cta { color: var(--clr-text-muted); }

/* ============================================================
   Tessera sanitaria — pannello di scansione codice fiscale
   ============================================================ */
.ts-scan__lead {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin: 0 0 0.85rem;
    font-size: 0.85rem;
    color: var(--clr-text-muted);
    line-height: 1.45;
}
.ts-scan__lead .material-symbols-outlined {
    color: var(--clr-info);
    flex: 0 0 auto;
    font-size: 1.2rem;
}
/* Istruzioni del documento scelto: cosa fotografare e in che ordine. Le
   scrive assets/cliente-foto-documenti.js, una per tipo di documento, e
   compaiono solo dopo la scelta — prima non ci sarebbe niente da dire. */
.ts-scan__guida {
    margin: 0 0 0.85rem;
    padding: 0.5rem 0.75rem;
    border-left: 3px solid var(--clr-info);
    background: #FDFCF9;
    border-radius: 0 0.375rem 0.375rem 0;
    font-size: 0.82rem;
    line-height: 1.45;
    color: var(--clr-text-muted);
}
.ts-scan__controls {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
}
.ts-scan__gun-group {
    flex: 1 1 320px;
    max-width: 460px;
}
.ts-scan__gun-group .input-group-text {
    background: var(--clr-surface-alt);
    color: var(--clr-text-muted);
    border-color: var(--clr-border);
}
.ts-scan__gun-group input {
    font-family: 'JetBrains Mono', monospace;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.ts-scan__camera {
    flex: 0 0 auto;
    white-space: nowrap;
}
.ts-scan__status {
    margin: 0.75rem 0 0;
    min-height: 1.2em;
    font-size: 0.82rem;
    color: var(--clr-text-muted);
}
.ts-scan__status--ok      { color: var(--clr-success); font-weight: 500; }
.ts-scan__status--avviso  { color: var(--clr-warning); font-weight: 500; }
.ts-scan__status--info    { color: var(--clr-info); }

/* ============================================================
   Overlay fotocamera (plumbing riusabile: camera-scanner.js)
   ============================================================ */
body.is-scanning { overflow: hidden; }
.camera-scan {
    position: fixed;
    inset: 0;
    z-index: 1050;
    background: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.camera-scan__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* Anteprima speculare (webcam rivolta all'operatore / camera frontale): solo
   la vista è riflessa, il fotogramma catturato resta nell'orientamento reale. */
.camera-scan__video--specchio {
    transform: scaleX(-1);
}
/* Riquadro di inquadratura: barcode orizzontale della tessera sanitaria. */
.camera-scan__frame {
    position: relative;
    z-index: 1;
    width: min(82vw, 460px);
    height: min(30vw, 150px);
    border: 2px solid var(--clr-gold);
    border-radius: 0.5rem;
    box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0.55);
}
.camera-scan__bar {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem calc(1rem + env(safe-area-inset-bottom, 0px));
    background: linear-gradient(to top, rgba(0, 0, 0, 0.72), rgba(0, 0, 0, 0));
    color: #FFFFFF;
}
.camera-scan__texts {
    flex: 1 1 auto;
    min-width: 0;
}
/* Pulsante di scatto (opzionale, opts.scatto): congela il fotogramma e forza
   una lettura insistita — utile per la MRZ quando la scansione continua non
   aggancia il codice. */
.camera-scan__shutter {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    border: 3px solid #FFFFFF;
    border-radius: 50%;
    background: rgba(201, 162, 75, 0.85);
    color: #1F1A14;
    cursor: pointer;
    transition: background 0.15s ease;
}
.camera-scan__shutter .material-symbols-outlined { font-size: 1.6rem; }
.camera-scan__shutter:hover { background: var(--clr-gold); }
.camera-scan__shutter:disabled { opacity: 0.55; cursor: default; }
.camera-scan__title {
    margin: 0;
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.15rem;
    font-weight: 600;
}
.camera-scan__hint {
    margin: 0.15rem 0 0;
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.82);
}
.camera-scan__status {
    margin: 0.35rem 0 0;
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--clr-gold);
}
/* Selettore della fotocamera: compare solo se la postazione espone più di una
   sorgente video (webcam USB + camere virtuali tipo Meta Quest Link o OBS, che
   il browser può scegliere come predefinita pur non essendo avviabili).
   La scelta viene ricordata per la postazione — vedi camera-scanner.js. */
.camera-scan__picker {
    margin-top: 0.5rem;
    max-width: 100%;
    padding: 0.3rem 0.5rem;
    border: 1px solid rgba(255, 255, 255, 0.45);
    border-radius: 0.35rem;
    background: rgba(0, 0, 0, 0.55);
    color: #FFFFFF;
    font-size: 0.82rem;
    cursor: pointer;
}
.camera-scan__picker option { color: #1F1A14; background: #FFFFFF; }

/* Via d'uscita opzionale (opts.azioneSecondaria): resta a disposizione mentre la
   camera è aperta, per quando la lettura non aggancia — es. «Digita il codice». */
.camera-scan__alt {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    margin-top: 0.5rem;
    padding: 0.3rem 0.7rem;
    border: 1px solid rgba(255, 255, 255, 0.45);
    border-radius: 0.35rem;
    background: rgba(0, 0, 0, 0.55);
    color: #FFFFFF;
    font-size: 0.82rem;
    cursor: pointer;
}
.camera-scan__alt:hover { background: rgba(0, 0, 0, 0.75); }
.camera-scan__alt .material-symbols-outlined { font-size: 1.05rem; }

.camera-scan__close {
    position: absolute;
    top: calc(0.75rem + env(safe-area-inset-top, 0px));
    right: 0.75rem;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: none;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.5);
    color: #FFFFFF;
    cursor: pointer;
}
.camera-scan__close:hover { background: rgba(0, 0, 0, 0.7); }

/* Toggle del flash (torch): mostrato solo se la camera lo supporta. */
.camera-scan__torch {
    position: absolute;
    top: calc(0.75rem + env(safe-area-inset-top, 0px));
    left: 0.75rem;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: none;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.5);
    color: #FFFFFF;
    cursor: pointer;
}
.camera-scan__torch:hover { background: rgba(0, 0, 0, 0.7); }
.camera-scan__torch--on {
    background: var(--clr-gold);
    color: #1F1A14;
}
.camera-scan__torch--on:hover { background: var(--clr-gold); }

/* Variante "card": riquadro a proporzioni carta ID-1 — riusa il plumbing di
   camera-scanner.js. GRANDE anche su desktop: la leggibilità di barcode e MRZ
   dipende dai pixel del sensore che la carta occupa (misurato: col vecchio cap
   a 420px la MRZ stava a ~11 px/carattere, sotto la soglia OCR di ~20). Il
   termine in vh evita che su schermi bassi il riquadro sfori in altezza. */
.camera-scan__frame--card {
    width: min(88vw, calc(78vh * 1.585), 980px);
    height: auto;
    aspect-ratio: 85.6 / 54;
}

/* ============================================================
   Slot foto documento (passo 1 del nuovo cliente): riquadro con
   etichetta, anteprima e azioni scatta/carica/rimuovi.
   ============================================================ */
.foto-slot {
    height: 100%;
    padding: 0.75rem;
    border: 1px dashed var(--clr-border, #B5A98E);
    border-radius: 0.5rem;
    background: #FDFCF9;
}
.foto-slot__label {
    margin: 0 0 0.5rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: #5A5248;
}
.foto-slot__anteprima {
    display: block;
    max-width: 100%;
    max-height: 220px;
    margin-bottom: 0.5rem;
    border: 1px solid #D6CFBE;
    border-radius: 0.375rem;
}
/* Esito del riconoscimento di QUESTO documento. Ogni foto parte per conto suo
   e torna quando torna: con una sola riga per tutto il pannello l'operatore non
   sapeva a quale documento si riferisse ciò che leggeva, né quali letture
   fossero ancora in corso. Lo spinner è `.spinner-border` di Bootstrap — la keyframe
   `spin` è fra quelle ammesse dal design system — e prende il colore dal testo
   accanto, quindi segue da sé lo stato. */
.foto-slot__stato {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0.5rem 0 0;
    /* Riservato anche da vuoto: senza, le card si disallineano appena una
       riceve il suo esito. */
    min-height: 1.2em;
    font-size: 0.78rem;
    line-height: 1.3;
    color: var(--clr-text-muted);
}
.foto-slot__stato .spinner-border {
    flex: none;
    width: 0.85em;
    height: 0.85em;
    border-width: 0.15em;
}
/* Slot che aspetta il suo turno (data-slot-richiede): i comandi sono chiusi e
   la riga di stato dice perché. Si smorza il riquadro senza nasconderlo —
   l'operatore deve vedere che quel documento va comunque fotografato, dopo. */
.foto-slot--bloccato {
    opacity: 0.6;
}
.foto-slot__stato--ok     { color: var(--clr-success); font-weight: 500; }
.foto-slot__stato--avviso { color: var(--clr-warning); font-weight: 500; }
.foto-slot__stato--info   { color: var(--clr-info); }

/* ============================================================
   Campi che devono essere univoci (assets/campo-univoco.js): avviso sotto il
   campo quando il valore appartiene già a un'altra scheda, col collegamento a
   quella scheda — perché quasi sempre la cosa giusta da fare è aprirla, non
   insistere. Colore d'errore: non è un suggerimento, è un dato che non si potrà
   salvare.
   ============================================================ */
.campo-univoco__avviso {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.8rem;
    line-height: 1.35;
    color: var(--clr-error);
}
.campo-univoco__avviso a {
    font-weight: 600;
    color: inherit;
}

/* ============================================================
   Codice fiscale che non torna con l'anagrafica (voce M22): sotto il campo
   quando il codice indica una data o un luogo di nascita diversi da quelli
   scritti a mano (assets/cliente-foto-documenti.js), e nella scheda del
   cliente accanto al badge «Codice fiscale da verificare». Colore d'avviso:
   il dato si salva lo stesso, ma qualcuno dei due è sbagliato.
   ============================================================ */
.campo-cf__avviso {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.8rem;
    line-height: 1.35;
    color: var(--clr-warning);
}
.campo-cf__avviso button {
    padding: 0;
    border: 0;
    background: none;
    font-weight: 600;
    color: inherit;
    text-decoration: underline;
}

/* ============================================================
   Lettura del chip della CIE (voce M36): riga con «Leggi il chip» e la chiave
   d'accesso (CAN o MRZ), esito in un augest-alert, foto del chip. Il segno
   «dal chip» accanto ai campi che il chip ha riempito cade appena l'operatore
   ci scrive (assets/cliente-foto-documenti.js).
   ============================================================ */
.chip-lettura__riga {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1rem;
}
.chip-lettura__chiave {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8rem;
    color: var(--clr-text-muted);
}
.chip-lettura__chiave[hidden] { display: none; }
.chip-lettura__chiave .material-symbols-outlined { font-size: 1.1rem; }
.chip-lettura__can {
    width: 6.5rem;
    font-family: 'JetBrains Mono', monospace;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.12em;
}
.chip-lettura__aiuto {
    margin: 0.35rem 0 0.5rem;
    font-size: 0.78rem;
    color: var(--clr-text-muted);
}
.chip-lettura__foto {
    display: flex;
    align-items: flex-end;
    gap: 0.75rem;
    margin: 0 0 0.5rem;
}
.chip-lettura__foto img {
    width: 96px;
    height: auto;
    border: 1px solid var(--clr-border);
    border-radius: 0.375rem;
    background: var(--clr-surface-alt);
}
.chip-lettura__foto figcaption {
    font-size: 0.78rem;
    color: var(--clr-text-muted);
}
.chip-lettura__foto[hidden] { display: none; }
/* Il segno accanto ai campi riempiti dal chip. */
.campo-chip__segno {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    margin-top: 0.25rem;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--clr-success);
}
.campo-chip__segno .material-symbols-outlined { font-size: 0.95rem; }
/* «Firma dello Stato non verificabile» (documento estero): grigio, non un errore. */
.augest-alert--neutro { background: var(--clr-surface-alt); color: var(--clr-text-muted); }
/* La pagina che «aspetta una carta» (voce M36, piano § 7.1-bis): riquadro
   tratteggiato con l'invito ad avvicinare la CIE, esito con la foto del chip
   (templates/compro_oro/_attesa_cie.html.twig, assets/attesa-cie.js). */
.attesa-cie {
    padding: 0.6rem 0.9rem;
    border: 1px dashed var(--clr-border-strong);
    border-radius: 0.5rem;
    background: var(--clr-surface);
}
.attesa-cie[hidden] { display: none; }
.attesa-cie__riga {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1rem;
}
.attesa-cie__icona { color: var(--clr-gold-dark); }
.attesa-cie__testo {
    flex: 1 1 16rem;
    font-size: 0.875rem;
    color: var(--clr-text-muted);
}
.attesa-cie__simula {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8rem;
    color: var(--clr-text-muted);
}
.attesa-cie__simula [hidden] { display: none; }
.attesa-cie__esito {
    align-items: flex-start;
    gap: 0.9rem;
    margin: 0.6rem 0 0;
}
.attesa-cie__esito[hidden] { display: none; }
.attesa-cie__corpo {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}
.attesa-cie__corpo p { color: var(--clr-text); }
.attesa-cie__foto { margin: 0; }
.attesa-cie__foto[hidden] { display: none; }
.attesa-cie__foto img {
    width: 96px;
    height: auto;
    border: 1px solid var(--clr-border);
    border-radius: 0.375rem;
    background: var(--clr-surface-alt);
}
/* La foto letta dal chip nella scheda del documento. */
.documento-chip__foto {
    max-width: 160px;
    height: auto;
    border: 1px solid var(--clr-border);
    border-radius: 0.375rem;
}

/* ============================================================
   Variante inline del pannello di scansione documento, usata nel
   form del registro (dove non è una card a sé).
   ============================================================ */
.ts-scan--inline {
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--clr-divider);
}

/* ============================================================
   Filtri in tempo reale (assets/filtri-live.js): mentre il server
   ricalcola l'elenco i risultati di prima restano in pagina ma si
   smorzano. Il ritardo sulla transizione è la parte che conta —
   una risposta rapida non deve far lampeggiare la tabella — e i
   vecchi risultati non spariscono: la pagina che salta a ogni
   lettera battuta è peggio di un elenco che aspetta.
   ============================================================ */
[data-filtri-blocco] {
    transition: opacity 0.15s ease;
}
[data-filtri-blocco][aria-busy='true'] {
    opacity: 0.55;
    transition-delay: 0.15s;
}

/* Tessera di accesso NFC al posto del codice (voce A14): il riquadro «Leggi la tessera»
   nella sfida 2FA, nello step-up e nello schermo di blocco (security/_tessera_lettura). */
.augest-tessera { margin-top: 0.75rem; }
.augest-tessera[hidden] { display: none; }
.augest-tessera__azioni { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; }
.augest-tessera__stato { margin: 0.5rem 0 0; font-size: 0.8rem; text-align: center; color: var(--clr-text-muted); }
.augest-tessera__stato[hidden] { display: none; }
.augest-tessera__stato.is-errore { color: var(--clr-error); }
.augest-tessera__stato.is-ok { color: var(--clr-success); }
.augest-tessera__invito { display: flex; align-items: center; gap: 0.4rem; font-size: 0.8rem; color: var(--clr-text-muted); margin: 0.4rem 0 0; }
.augest-tessera__invito .material-symbols-outlined { font-size: 1.1em; color: var(--clr-gold-dark); }

/* Richiesta di assistenza (`_partials/assistenza.html.twig`): l'anteprima della pagina
   fotografata, che scorre dentro la finestra invece di allungarla. */
.assistenza-anteprima {
    max-height: 45vh;
    overflow-y: auto;
    border: 1px solid var(--clr-border);
    border-radius: 0.375rem;
    background: var(--clr-surface-alt);
}
.assistenza-foto {
    display: block;
    max-width: 100%;
    height: auto;
    border: 1px solid var(--clr-border);
    border-radius: 0.375rem;
}

/* Novità per gli operatori (pagina «Novità» e card della dashboard, piano claude/PLAN-novita.md) */
.novita-giorno {
    font-size: 0.8125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--clr-text-muted);
    margin: 1.5rem 0 0.5rem;
}
.novita-voce {
    padding: 0.75rem 1rem;
    border: 1px solid var(--clr-divider);
    border-left: 3px solid transparent;
    border-radius: 0.375rem;
    margin-bottom: 0.5rem;
}
.novita-voce--nuova {
    background: var(--clr-surface-alt);
    border-left-color: var(--clr-gold);
}
.novita-voce--compatta { padding: 0.5rem 0.75rem; }
.novita-voce__titolo { font-size: 1rem; font-weight: 600; margin: 0 0 0.25rem; }
.novita-voce--compatta .novita-voce__titolo { font-size: 0.9375rem; margin: 0; }
.novita-voce__testo { margin: 0; max-width: 48rem; }
.novita-voce__immagine {
    display: block;
    max-width: min(100%, 480px);
    height: auto;
    margin-top: 0.5rem;
    border: 1px solid var(--clr-divider);
    border-radius: 0.375rem;
}

/* Logo del soggetto IVA (modulo e miniatura nell'elenco). */
.soggetto-iva-logo {
    display: block;
    max-width: min(100%, 240px);
    max-height: 160px;
    width: auto;
    height: auto;
    border: 1px solid var(--clr-divider);
    border-radius: 0.375rem;
}
.soggetto-iva-logo--mini {
    display: inline-block;
    max-height: 32px;
    vertical-align: middle;
}


/* Calendario settimanale degli appuntamenti del banco (voce A23,
   templates/banco_metalli/appuntamento/_calendario.html.twig): sette colonne dal lunedì,
   le fasce di ricevimento in trasparenza nel colore del modulo, le voci all'altezza del loro
   orario (posizioni in percentuale da CalendarioSettimana). Sotto i 992 px scorre in
   orizzontale invece di schiacciarsi. */
.augest-calendario { background: var(--clr-surface); border: 1px solid var(--clr-border); border-radius: 0.5rem; }
.augest-calendario__barra { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; padding: 0.6rem 0.75rem; background: var(--clr-surface-alt); border-bottom: 1px solid var(--clr-divider); border-radius: 0.5rem 0.5rem 0 0; }
.augest-calendario__periodo { font-weight: 600; font-variant-numeric: tabular-nums; }
.augest-calendario__legenda { display: flex; flex-wrap: wrap; gap: 0.25rem 0.9rem; margin-left: auto; font-size: 0.75rem; color: var(--clr-text-muted); }
.augest-calendario__legenda > span { display: inline-flex; align-items: center; gap: 0.3rem; }
.augest-calendario__campione { display: inline-block; width: 0.85rem; height: 0.85rem; border-radius: 0.2rem; border: 1px solid var(--clr-border); }
.augest-calendario__campione--fascia { background: var(--clr-module-surface); border-color: var(--clr-module-border); }
.augest-calendario__campione--libero { background: var(--clr-surface); border: 1px dashed var(--clr-module); }
.augest-calendario__campione--in_attesa { background: var(--clr-warning-bg); border-color: var(--clr-warning); }
.augest-calendario__campione--confermato { background: var(--clr-success-bg); border-color: var(--clr-success); }
.augest-calendario__campione--ricevuto { background: var(--clr-info-bg); border-color: var(--clr-info); }
.augest-calendario__campione--fuso { background: rgba(201,162,75,0.18); border-color: var(--clr-gold-dark); }
.augest-calendario__campione--pagato { background: var(--clr-surface-alt); border-color: var(--clr-border-strong); }
.augest-calendario__scorri { overflow-x: auto; }
.augest-calendario__griglia { display: grid; grid-template-columns: 3.25rem repeat(7, minmax(6.5rem, 1fr)); grid-template-rows: auto 34rem; min-width: 52rem; }
.augest-calendario__testa { padding: 0.4rem 0.5rem; text-align: center; border-bottom: 1px solid var(--clr-border); border-left: 1px solid var(--clr-divider); line-height: 1.2; }
.augest-calendario__testa--ore { border-left: 0; }
.augest-calendario__testa.is-oggi { color: var(--clr-module); font-weight: 600; box-shadow: inset 0 -3px 0 var(--clr-module); }
.augest-calendario__giorno { display: block; font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--clr-text-muted); }
.augest-calendario__data { font-family: 'JetBrains Mono', monospace; font-size: 0.82rem; }
.augest-calendario__ore, .augest-calendario__colonna { position: relative; }
.augest-calendario__ora { position: absolute; right: 0.35rem; transform: translateY(-50%); font-family: 'JetBrains Mono', monospace; font-size: 0.68rem; color: var(--clr-text-disabled); }
.augest-calendario__ora:first-child { transform: none; }
.augest-calendario__colonna { border-left: 1px solid var(--clr-divider); }
.augest-calendario__colonna.is-passato { background: repeating-linear-gradient(135deg, transparent 0 6px, rgba(31,26,20,0.025) 6px 12px); }
.augest-calendario__riga { position: absolute; left: 0; right: 0; border-top: 1px solid var(--clr-divider); }
.augest-calendario__fascia { position: absolute; left: 0; right: 0; background: var(--clr-module-surface); border-top: 1px solid var(--clr-module-border); border-bottom: 1px solid var(--clr-module-border); opacity: 0.85; }
.augest-calendario__chiuso { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.25rem; text-align: center; font-size: 0.8rem; color: var(--clr-text-muted); background: repeating-linear-gradient(135deg, var(--clr-surface-alt) 0 8px, var(--clr-surface) 8px 16px); }
.augest-calendario__voce { position: absolute; left: 0.2rem; right: 0.2rem; display: flex; gap: 0.3rem; align-items: flex-start; overflow: hidden; padding: 0.1rem 0.3rem; border-radius: 0.25rem; border: 1px solid var(--clr-border); border-left-width: 3px; font-size: 0.72rem; line-height: 1.25; text-align: left; z-index: 1; }
.augest-calendario__voce--in_attesa { background: var(--clr-warning-bg); border-color: var(--clr-warning); color: var(--clr-warning); }
.augest-calendario__voce--confermato { background: var(--clr-success-bg); border-color: var(--clr-success); color: var(--clr-success); }
.augest-calendario__voce--ricevuto { background: var(--clr-info-bg); border-color: var(--clr-info); color: var(--clr-info); }
.augest-calendario__voce--fuso { background: rgba(201,162,75,0.18); border-color: var(--clr-gold-dark); color: var(--clr-gold-dark); }
.augest-calendario__voce--pagato { background: var(--clr-surface-alt); border-color: var(--clr-border-strong); color: var(--clr-text-muted); }
.augest-calendario__voce--link { text-decoration: none; cursor: pointer; }
.augest-calendario__voce--link:hover, .augest-calendario__voce--link:focus-visible { filter: brightness(0.96); box-shadow: 0 0 0 0.15rem rgba(201,162,75,0.25); outline: none; z-index: 2; }
.augest-calendario__voce--libero { background: var(--clr-surface); border: 1px dashed var(--clr-module); color: var(--clr-module); cursor: pointer; }
.augest-calendario__voce--libero:hover, .augest-calendario__voce--libero:focus-visible { background: var(--clr-module-surface); border-style: solid; outline: none; box-shadow: 0 0 0 0.15rem rgba(201,162,75,0.25); }
.augest-calendario__orario { font-family: 'JetBrains Mono', monospace; font-weight: 500; }
.augest-calendario__testo { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--clr-text); }

/* Controllo della merce all'appuntamento di un Compro Oro esterno (voce A25):
   righe a griglia come i lotti della registrazione PS, totale in fondo. */
.augest-controllo-riga { padding: 0.75rem 0; border-bottom: 1px solid var(--clr-divider); }
.augest-controllo-riga:first-child { padding-top: 0; }
.augest-controllo-riga__testa { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-bottom: 0.4rem; }
.augest-controllo-riga__numero { font-weight: 600; color: var(--clr-module); min-width: 4rem; }
.augest-controllo-riga__esito { display: block; padding: 0.375rem 0; min-height: calc(1.5em + 0.75rem + 2px); line-height: 1.5; color: var(--clr-text-muted); }
.augest-controllo-riga__valore { color: var(--clr-text); font-weight: 600; }
.augest-controllo-totale { display: flex; justify-content: flex-end; align-items: baseline; gap: 1rem; margin-top: 1rem; padding: 0.75rem 1rem; border-radius: var(--bs-border-radius); background: var(--clr-surface-alt); border: 1px solid var(--clr-border); }
.augest-controllo-totale strong { font-size: 1.35rem; }

/* I campi data e ora aprono il calendario a un clic in qualunque punto (assets/apri-selettore.js):
   il cursore lo dice. Spenti o in sola lettura no. */
input:is([type="date"], [type="datetime-local"], [type="time"], [type="month"], [type="week"], [data-apri-selettore]):not(:disabled):not([readonly]) { cursor: pointer; }