/* ============================================================
   PROD — Modulo Certificazioni (fascicoli ISO 9001)

   File a se' e non un'aggiunta ai sei monoliti, sullo stesso criterio di
   riconciliazione-module.css e documenti-module.css: il modulo deve poter
   essere smontato cancellando un file, e i sei della catena sono file caldi
   che una modifica costringe a risigillare.

   Namespace `cert-`, e nessuna classe presa in prestito da altri moduli: le
   `.imp-*` e le `.doc-*` vivono nei fogli di Impostazioni e Documenti, e alcune
   leggono token dichiarati sul guscio di quei moduli — fuori da li' non
   avrebbero valore. Dove la forma e' la stessa il pattern e' copiato, non
   importato.

   Solo token canonici di style-core.css: ruotano gia' col tema, e il tema
   chiaro funziona senza una riga in piu'.
   ============================================================ */

/* PROD non ha un box-sizing globale: senza questo un'altezza dichiarata e' solo
   quella del contenuto, e ogni riga da 46px ne misura 58 col padding. Elencate
   una per una, non con *, per non cambiare regola sotto a markup che non e'
   nostro. */
.cert-pagina,
.cert-azioni,
.cert-cerca,
.cert-seg,
.cert-seg__voce,
.cert-card,
.cert-riga,
.cert-pannello,
.cert-numero,
.cert-metrica,
.cert-campo,
.cert-icona,
.cert-nota {
    box-sizing: border-box;
}

/* I token locali stanno sul guscio della pagina E sul modale, perche' il modale
   vive appeso al body e fuori da .cert-pagina non erediterebbe niente. */
.cert-pagina,
.cert-modale {
    --cert-riga-h: 46px;
    --cert-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
    /* L'arancio dell'accento su fondo chiaro sta a 2,4 di contrasto: come testo
       non si legge. Sul tema chiaro si scrive con la sua variante scura, che
       resta lo stesso colore ma leggibile. Una riga qui, invece del colore
       cablato in ogni regola che nomina l'accento. */
    --cert-accento-testo: var(--accent);
    --cert-avviso-testo: var(--warning);
}

:root[data-tema="chiaro"] .cert-pagina,
:root[data-tema="chiaro"] .cert-modale {
    --cert-accento-testo: var(--accent-strong);
    /* Stessa ragione: l'ambra su fondo chiaro sta a 2,9, e un avviso che non si
       legge non avvisa. */
    --cert-avviso-testo: color-mix(in srgb, var(--warning) 82%, black);
}

/* Larghezza piena e i margini della pagina addosso, come .doc-page: prima
   c'era un max-width di 1280px con margin auto, e su uno schermo largo il
   modulo diventava una colonna in mezzo a due fasce vuote — l'unico di PROD a
   comportarsi cosi'. #contenitore-dati non ha padding suo: i margini laterali
   li mette la pagina. */
.cert-pagina {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 20px 24px 40px;
    color: var(--text-strong);
    font-family: var(--font-ui);
}

/* ── Ricerca ─────────────────────────────────────────────── */

.cert-cerca {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: 1 1 240px;
    max-width: 360px;
    min-width: 0;
    padding: 0 12px;
    height: 36px;
    border: 1px solid var(--panel-border);
    border-radius: var(--radius-pill);
    background: var(--panel-soft);
    color: var(--text-tertiary);
}

.cert-cerca:focus-within {
    border-color: var(--accent);
    box-shadow: var(--focus-ring);
}

.cert-cerca input {
    flex: 1 1 auto;
    min-width: 0;
    border: 0;
    background: transparent;
    color: var(--text-strong);
    font: inherit;
    font-size: 0.86rem;
    outline: none;
}

/* Il segmentato della lingua. Due voci, e la scelta si vede: la attiva prende
   l'accento pieno perche' e' l'unica cosa in questa barra che cambia tutto
   quello che c'e' sotto. */
.cert-seg {
    display: inline-flex;
    gap: 2px;
    padding: 3px;
    border: 1px solid var(--panel-border);
    border-radius: var(--radius-pill);
    background: var(--panel-mid);
}

.cert-seg__voce {
    padding: 4px 12px;
    border: 0;
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--text-secondary);
    font: inherit;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    cursor: pointer;
}

.cert-seg__voce:hover {
    color: var(--text-strong);
}

.cert-seg__voce.is-attiva {
    background: var(--accent);
    color: var(--accent-contrast);
}

/* ── La pagina di partenza ───────────────────────────────── */

/* La pagina di partenza di una pastiglia: la riga di azioni, la striscia
   delle scadenze, le card dei registri, i fascicoli. Una colonna col suo
   passo, cosi' la distanza fra i pezzi non dipende da quali pezzi ci sono —
   Progetti non ha registri, Azienda non ha fascicoli — e nessun pezzo porta
   un margine suo che si sommi al passo. */
.cert-partenza {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.cert-partenza > .cert-azioni {
    margin-bottom: 0;
}

/* I fascicoli dopo i registri: due griglie con le stesse colonne, e un passo
   in piu' fra le due perche' si legga dove finiscono i registri e cominciano
   i fascicoli. */
.cert-partenza > .cert-griglia + .cert-fascicoli {
    margin-top: 10px;
}

/* La riga di azioni: ricerca a sinistra, azioni e interruttore della lingua
   a destra. E' l'unica riga sopra le card, ed e' anche l'unico posto in cui
   il modulo scrive qualcosa di suo prima del contenuto. */
.cert-azioni {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 8px;
    align-items: center;
    margin-bottom: 12px;
}

.cert-azioni__destra {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

.cert-griglia {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 14px;
}

.cert-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 14px 16px;
    border: 1px solid var(--card-border);
    border-radius: var(--radius-card);
    background: var(--card-surface);
    box-shadow: var(--elev-1);
    transition: transform 0.2s var(--ease-enter), border-color 0.22s;
}

.cert-card:hover {
    transform: translateY(-2px);
    border-color: var(--accent-wash);
}

.cert-card__testa {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.cert-card__titolo {
    margin: 0;
    font-size: 0.98rem;
    font-weight: 700;
    line-height: 1.3;
}

.cert-card__meta {
    font-size: 0.8rem;
    color: var(--text-secondary);
    line-height: 1.5;
}

.cert-card__azioni {
    display: flex;
    gap: 6px;
    margin-top: 4px;
}

/* «Responsabile: Nome» sulla card di un registro: una riga che si clicca e
   apre la tendina delle persone. Ha la misura del meta che le sta sopra, e
   il chevron dice che si apre. */
.cert-card__resp {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    align-self: flex-start;
    padding: 2px 0;
    border: 0;
    background: transparent;
    color: var(--text-secondary);
    font: inherit;
    font-size: 0.8rem;
    line-height: 1.5;
    cursor: pointer;
}

.cert-card__resp strong {
    color: var(--text-strong);
    font-weight: 600;
}

.cert-card__resp:hover strong {
    color: var(--cert-accento-testo);
}

.cert-card__resp .fa-chevron-down {
    font-size: 0.65rem;
    color: var(--text-tertiary);
}

/* ── Pastiglie di stato ──────────────────────────────────────
   L'accento pieno resta all'unico stato che chiede un'azione: dentro un solo
   colore caldo quattro stati diventano indistinguibili. Cio' che e' fermo e a
   posto prende un contorno neutro. */

.cert-pill {
    display: inline-block;
    padding: 3px 10px;
    border: 1px solid transparent;
    border-radius: var(--radius-pill);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.cert-pill--neutro {
    background: var(--surface-hover-soft);
    border-color: var(--panel-border);
    color: var(--text-tertiary);
}

.cert-pill--attivo {
    border-color: var(--panel-border-mid);
    color: var(--text-strong);
}

.cert-pill--attesa {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--accent-contrast);
}

.cert-pill--chiuso {
    background: color-mix(in srgb, var(--success) 16%, transparent);
    border-color: var(--success);
    color: var(--success);
}

.cert-pill--annullato {
    background: color-mix(in srgb, var(--error) 14%, transparent);
    border-color: var(--error);
    color: var(--error);
}

/* ── Testata del fascicolo aperto ────────────────────────── */

.cert-dossier-testa {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 14px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--panel-border);
}

.cert-dossier-testa__chi {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

/* Il «torna all'elenco» e' un bottone dentro una colonna flex, e una colonna
   flex allarga i figli quanto se stessa: senza questa riga il bottone misurava
   432px e si leggeva come un campo di ricerca vuoto sopra il titolo. Si stringe
   sul suo testo, che e' quanto un bottone deve essere largo. */
.cert-dossier-testa__chi > button {
    align-self: flex-start;
}

.cert-dossier-testa__titolo {
    margin: 0;
    font-family: var(--font-titolo);
    font-size: 1.2rem;
    font-weight: 700;
}

.cert-dossier-testa__meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 0.82rem;
    color: var(--text-secondary);
}

.cert-dossier-testa__azioni {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

/* Qui la ricerca sta accanto a quattro bottoni e al titolo del fascicolo, che e'
   lungo: coi 360px dell'elenco la riga non ci sta e l'interruttore della lingua
   finiva da solo su una seconda riga, a sinistra, come se ci fosse caduto.
   Misurato a 1440px: 286px di ricerca fanno 1412 di riga contro 1392 di spazio. */
.cert-dossier-testa__azioni .cert-cerca {
    flex: 0 1 200px;
}

/* E se il titolo e' comunque troppo lungo e la riga va a capo lo stesso,
   l'interruttore ci va a filo destro invece che a filo sinistro: un a capo si
   legge come una scelta solo se cade dove cadono le altre azioni. */
.cert-dossier-testa__azioni .cert-seg {
    margin-left: auto;
}

/* ── Prontezza ───────────────────────────────────────────── */

.cert-metriche {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px;
}

.cert-metrica {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 14px;
    border: 1px solid var(--panel-border);
    border-radius: var(--radius-card);
    background: var(--panel-mid);
}

.cert-metrica__l {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-tertiary);
}

.cert-metrica__n {
    font-family: var(--font-titolo);
    font-size: 1.5rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.cert-metrica__n--ok {
    font-size: 0.86rem;
    color: var(--success);
}

.cert-metrica__n--no {
    font-size: 0.86rem;
    color: var(--error);
}

.cert-metrica__sotto {
    font-size: 0.76rem;
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
}

.cert-barra {
    height: 5px;
    margin-top: 2px;
    border-radius: var(--radius-pill);
    background: var(--surface-hover-soft);
    overflow: hidden;
}

.cert-barra__pieno {
    height: 100%;
    border-radius: var(--radius-pill);
    background: var(--accent);
    transition: width 0.4s ease;
}

/* L'elenco di cio' che manca: chiuso di serie perche' su un fascicolo appena
   nato sarebbe lungo quanto la pagina, ma sempre presente e sempre contato. */
.cert-mancanti {
    padding: 10px 14px;
    border: 1px solid var(--panel-border);
    border-radius: var(--radius-card);
    background: var(--panel-soft);
    font-size: 0.84rem;
}

.cert-mancanti summary {
    cursor: pointer;
    font-weight: 700;
    color: var(--cert-avviso-testo);
}

.cert-mancanti ul {
    margin: 10px 0 0;
    padding-left: 20px;
    color: var(--text-secondary);
    line-height: 1.7;
}

/* ── La striscia dei numeri ────────────────────────────────
   Numeri e non nomi: diciotto bersagli di due caratteri stanno su una riga a
   qualsiasi larghezza, sono uguali nelle due lingue, e sono il modo in cui un
   documento ISO si cita davvero. */

.cert-numeri {
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    gap: 4px;
    overflow-x: auto;
    padding: 6px 0;
    background: var(--bg-base);
    scrollbar-width: none;
}

.cert-numeri::-webkit-scrollbar {
    display: none;
}

.cert-numero {
    flex: none;
    min-width: 30px;
    padding: 4px 6px;
    border: 1px solid var(--panel-border);
    border-radius: 7px;
    background: var(--panel-mid);
    color: var(--text-secondary);
    font: inherit;
    font-size: 0.72rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
}

.cert-numero:hover {
    border-color: var(--accent);
    color: var(--text-strong);
}

.cert-numero.is-esclusa {
    opacity: 0.45;
}

/* ── Le sezioni: riga cliccabile e pannello ───────────────── */

.cert-sezioni {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--panel-border);
    border-radius: var(--radius-card);
    background: var(--panel-mid);
    overflow: hidden;
}

.cert-gruppo.is-esclusa {
    opacity: 0.66;
}

.cert-riga {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: var(--cert-riga-h);
    padding: 6px 16px;
    border-top: 1px solid var(--card-border);
    cursor: pointer;
}

.cert-gruppo:first-child .cert-riga {
    border-top: 0;
}

.cert-riga:hover,
.cert-riga.is-aperta {
    background: var(--surface-hover-soft);
}

.cert-riga:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

.cert-riga__testo {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex: 1 1 auto;
    min-width: 0;
}

.cert-riga__numero {
    flex: none;
    font-family: var(--cert-mono);
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--text-tertiary);
}

.cert-riga__label {
    flex: none;
    font-size: 0.84rem;
    font-weight: 600;
}

/* Il riassunto della sezione sta qui e non in una riga sua: una riga di sola
   lettura costa 46px per un'informazione che non si puo' toccare. */
.cert-riga__aiuto {
    overflow: hidden;
    font-size: 0.76rem;
    color: var(--text-secondary);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cert-riga__controllo {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: none;
}

.cert-riga__freccia {
    font-size: 11px;
    color: var(--text-tertiary);
    transition: transform 0.16s var(--ease-enter);
}

.cert-riga.is-aperta .cert-riga__freccia {
    transform: rotate(180deg);
}

.cert-pannello {
    padding: 6px 16px 18px;
    border-top: 1px solid var(--card-border);
    background: var(--panel-bg);
}

.cert-pannello[hidden] {
    display: none;
}

/* ── Le tabelle ──────────────────────────────────────────────
   Una tabella vera dentro un contenitore: gli schemi arrivano a diciotto
   colonne, e nessuna griglia le impagina meglio di come le impagina una
   tabella.

   DUE COMPORTAMENTI, e a separarli e' una domanda sola: qualcuno ha detto
   quanto e' larga ogni colonna? L'albo e le attrezzature mostrano le colonne
   del loro foglio di carta, con le larghezze del foglio — ci stanno tutte, e la
   tabella non scorre mai. Gli altri due registri hanno diciassette e quindici
   colonne e nessun foglio che dica quali contano; le tabelle dei fascicoli non
   hanno larghezze affatto. Li' si scorre, come prima, e il corpo della pagina
   continua a non scorrere mai in orizzontale.

   La scelta sta scritta in docs/decisioni/DECISE.md, sotto «ISO 9001». */

.cert-tabella-wrap {
    overflow-x: auto;
    border: 1px solid var(--panel-border);
    border-radius: var(--radius-card);
    background: var(--panel-bg);
}

.cert-tabella {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8rem;
}

.cert-tabella th {
    position: sticky;
    top: 0;
    z-index: 1;
    padding: 8px 10px;
    background: var(--panel-soft);
    color: var(--text-tertiary);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-align: left;
    text-transform: uppercase;
    white-space: nowrap;
}

.cert-tabella td {
    padding: 8px 10px;
    border-top: 1px solid var(--card-border);
    color: var(--text-strong);
    vertical-align: top;
}

/* ── La tabella che ci sta tutta ─────────────────────────────
   Le larghezze arrivano dal <colgroup>, che le prende dal foglio di carta. Con
   `fixed` il browser smette di misurare il contenuto e obbedisce a quelle: e'
   l'unico modo perche' le proporzioni del documento valgano anche qui. */

.cert-tabella-wrap--intera {
    overflow-x: hidden;
}

.cert-tabella--fissa {
    table-layout: fixed;
}

/* Il `nowrap` delle intestazioni va tolto qui, ed e' il motivo per cui la
   tabella scorreva anche quando le colonne ci sarebbero state: ogni titolo
   imponeva da solo la larghezza minima della sua colonna, e «Capacità di
   produzione» ne chiedeva centosessanta pixel per sei parole di giudizio. Qui
   va a capo. In basso, cosi' titoli di una e di due righe finiscono allineati
   sul filo che li separa dai dati. */
/* Un filo di spazio in meno ai lati della cella e fra le lettere del titolo:
   sono i pochi pixel che fanno stare «NON CONFORMITÀ» su una riga invece che
   spezzata a meta' parola, e a occhio non si vedono. */
.cert-tabella--fissa th,
.cert-tabella--fissa td {
    padding-left: 8px;
    padding-right: 8px;
}

.cert-tabella--fissa th {
    white-space: normal;
    vertical-align: bottom;
    letter-spacing: 0.03em;
    /* «COLLABORAZIONE» e «DOCUMENTAZIONE» sono parole sole, e in una colonna
       dell'8% del foglio non ci stanno: senza questo uscivano dalla cella e il
       contenitore le tagliava a meta'. Col trattino automatico vanno a capo
       dove la lingua vuole; se il browser non sa sillabare, spezza e basta —
       che e' comunque meglio di un titolo mozzato. */
    hyphens: auto;
    overflow-wrap: break-word;
}

/* Un codice lungo senza spazi — una matricola, un modello — sfonderebbe la
   colonna che gli e' stata assegnata invece di adattarsi. */
.cert-tabella--fissa td {
    overflow-wrap: anywhere;
}

/* `.cert-cella-lunga` porta un `min-width: 150px` che qui e' veleno: una
   larghezza minima piu' larga della colonna vince sul `fixed` e sposta tutte le
   altre, cioe' rimette lo scorrimento da cui si e' partiti. Il taglio a due
   righe invece resta, ed e' l'unica cosa che serviva. */
.cert-tabella--fissa .cert-cella-lunga {
    min-width: 0;
    max-width: none;
}

/* ── Dove sta una cella ──────────────────────────────────────
   L'allineamento lo dichiara la colonna, in certificazioni-fogli.mjs, e da li'
   lo prendono il PDF, la stampa e la tabella: un giudizio sta al centro della
   sua colonna in tutte e tre. Queste due classi sono l'ultimo tratto di quel
   percorso, e non decidono niente da sole. */

/* Il nome della tabella davanti, e non e' una decorazione: `.cert-tabella th`
   porta un `text-align: left` che pesa quanto una classe piu' un elemento, e
   una classe sola perdeva contro di lui. I titoli restavano a sinistra mentre i
   loro valori si centravano — cioe' esattamente il disallineamento che queste
   classi esistono per togliere. */
.cert-tabella .cert-c--sx { text-align: left; }
.cert-tabella .cert-c--c { text-align: center; }
.cert-tabella .cert-c--primario { font-weight: 600; }

/* Le pastiglie dei giudizi, dentro una tabella che ha larghezze fisse. Il loro
   `white-space: nowrap` serve dovunque tranne qui: in una colonna larga il 6%
   del foglio, «Insufficiente» usciva dalla cella e finiva sopra quella accanto.
   Qui la pastiglia cede — va a capo dentro se stessa invece di sfondare — e
   stringe il fianco di due pixel. A schermo intero non cambia niente: la
   differenza si vede solo quando la finestra si stringe, ed e' li' che serviva. */
.cert-tabella--fissa .cert-pill {
    max-width: 100%;
    padding: 3px 8px;
    white-space: normal;
    overflow-wrap: anywhere;
}

/* ── Le unita' dello stesso macchinario ──────────────────────
   Tre avvitatori uguali sono 2a, 2b, 2c sotto un capogruppo che dice il
   macchinario e quante sono. Aperto di partenza: lo schermo mostra le stesse
   righe del documento che si scarica. */

.cert-riga-gruppo td {
    background: var(--panel-soft);
    color: var(--text-secondary);
    font-weight: 600;
}

.cert-riga-gruppo__conta {
    color: var(--text-tertiary);
    font-weight: 400;
}

.cert-gruppo-freccia {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    cursor: pointer;
}

.cert-gruppo-freccia i {
    font-size: 10px;
    color: var(--text-tertiary);
    transition: transform 0.16s var(--ease-enter);
}

/* Chiusa la freccia punta a destra: e' il verso in cui si legge «c'e' dell'altro
   di la'», ed e' lo stesso gesto delle sezioni del fascicolo. */
.cert-riga-gruppo.is-chiusa .cert-gruppo-freccia i {
    transform: rotate(-90deg);
}

/* La riga di un registro si apre al clic, per chi puo' compilarla: e' la strada
   verso i campi che la tabella non mostra piu' — matricola, ubicazione,
   periodicita', note. Il fondo che cambia al passaggio del mouse c'era gia' e
   adesso vuol dire qualcosa; qui si aggiunge solo il cursore, che e' cio' che
   dice «si puo' premere» prima di provarci. */
.cert-riga-apribile {
    cursor: pointer;
}

/* Un filo verticale dice «questa riga sta sotto quella sopra». Non un rientro:
   la colonna del numero e' centrata, e spostarne il contenuto di venti pixel si
   legge come una cella storta, non come una gerarchia. Il filo sta sul bordo
   della cella e non tocca l'incolonnamento. */
.cert-riga-unita > td:first-child {
    box-shadow: inset 2px 0 0 color-mix(in srgb, var(--accent) 40%, transparent);
}

/* Due righe e non di piu'. La larghezza minima non e' un capriccio: senza,
   la colonna delle note si stringe a ottanta pixel e due righe non dicono
   niente. Il testo intero sta nel title, e in stampa esce per esteso. */
.cert-cella-lunga {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-width: 150px;
    max-width: 260px;
}

.cert-tabella tbody tr:hover td {
    background: var(--surface-hover-soft);
}

/* La colonna ferma deve restare OPACA anche sotto il mouse. `--surface-hover-soft`
   e' semitrasparente: applicato qui SOSTITUIVA il fondo pieno della cella sticky,
   e le colonne che le passano sotto tornavano leggibili — «Periodica» stampato
   sopra i bottoni, e i trattini delle righe mai valutate accanto alla graffetta.
   Sovrapposto a un fondo pieno invece che al posto suo, il passaggio del mouse
   si vede e la colonna resta cieca. */
.cert-tabella tbody tr:hover .cert-tabella__azioni {
    background:
        linear-gradient(var(--surface-hover-soft), var(--surface-hover-soft)),
        var(--panel-bg);
}

/* Ancorata a destra mentre la tabella scorre sotto. L'albo fornitori ha
   quattordici colonne, e senza questo il bottone «Valuta» del fornitore mai
   valutato — che e' l'unica cosa che quella riga chiede di fare — stava fuori
   schermo dopo tredici colonne di trattini.

   `position: sticky` dentro una cella vuole un fondo pieno, altrimenti le
   colonne le passano sotto e si leggono due testi sovrapposti. */
.cert-tabella__azioni {
    position: sticky;
    right: 0;
    white-space: nowrap;
    background: var(--panel-bg);
    /* Il bordo dice dove finisce la tabella che scorre e dove comincia la
       colonna ferma: senza, il testo che le passa sotto sembra tagliato a meta'
       invece che coperto. */
    border-left: 1px solid var(--panel-border);
}

th.cert-tabella__azioni { background: var(--panel-soft); }

/* I bottoni in fila stanno in un DIV dentro la cella, non nella cella stessa.
   Un `td` con `display: flex` smette di essere una cella di tabella: il browser
   gli mette intorno una cella anonima, il bordo della riga viene disegnato
   attorno al contenuto invece che alla riga, e il filo fra due righe si spezza
   in quella colonna. Sul <th> vuoto era anche peggio — non partecipava alla
   larghezza della colonna, si riduceva a zero, e le intestazioni che scorrono
   sotto si leggevano attraverso. */
.cert-tabella__azioni-box {
    display: flex;
    gap: 2px;
    align-items: center;
}

.cert-graffetta {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 0 6px;
    color: var(--text-tertiary);
    font-size: 0.72rem;
    font-variant-numeric: tabular-nums;
}

.cert-check {
    width: 16px;
    height: 16px;
    accent-color: var(--accent);
    cursor: pointer;
}

.cert-check:disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

.cert-icona {
    display: inline-grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: var(--text-tertiary);
    font-size: 0.8rem;
    cursor: pointer;
}

/* L'unico bottone-icona che cancella. Il colore arriva sul passaggio del mouse
   e non a riposo: una fila di cestini rossi in una tabella lunga sposta
   l'attenzione sul gesto piu' distruttivo di tutti. */
/* La graffetta con quanti allegati ci sono: il numero sta DENTRO il bottone
   perche' fuori sarebbe una colonna in piu' su ogni riga, per un'informazione
   che riguarda tre righe su diciotto. */
/* `.cert-icona` e' una griglia, e due figli in una griglia si impilano in due
   RIGHE: il numero finiva sotto la graffetta invece che accanto, e la riga della
   tabella cresceva per farci stare. */
.cert-icona--conta {
    width: auto;
    grid-auto-flow: column;
    gap: 4px;
    padding: 0 7px;
    color: var(--accent);
}

.cert-icona--conta span {
    font-size: 0.72rem;
    font-weight: 700;
}

.cert-allegati {
    margin: 0 0 16px;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 2px;
}

.cert-allegati li {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: var(--cert-riga-h);
    padding: 0 4px 0 10px;
    border-radius: 8px;
    background: var(--panel-soft);
}

.cert-allegati__nome {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    border: 0;
    background: none;
    padding: 0;
    color: var(--text-strong);
    font: inherit;
    text-align: left;
    cursor: pointer;
    overflow-wrap: anywhere;
}

.cert-allegati__nome:hover {
    color: var(--accent);
}

.cert-allegati__quando {
    color: var(--text-tertiary);
    font-size: 0.76rem;
    white-space: nowrap;
}

.cert-icona--pericolo:hover {
    color: var(--error);
}

.cert-icona:hover {
    background: var(--surface-hover-soft);
    color: var(--text-strong);
}

.cert-icona--danger:hover {
    color: var(--error);
}

/* ── Note e stati ────────────────────────────────────────── */

.cert-nota {
    margin: 10px 0;
    padding: 9px 12px;
    border-left: 3px solid var(--panel-border-mid);
    border-radius: 0 8px 8px 0;
    background: var(--panel-soft);
    color: var(--text-secondary);
    font-size: 0.8rem;
    line-height: 1.55;
    max-width: 78ch;
}

/* La legenda dei punteggi sotto l'albo e la media viva nel modale: una nota
   che segue la larghezza della tabella, non le 78 colonne di un paragrafo. */
.cert-nota--legenda {
    max-width: none;
}

.cert-vuoto {
    padding: 56px 20px;
    color: var(--text-secondary);
    text-align: center;
}

.cert-vuoto--piccolo {
    padding: 28px 16px;
}

.cert-vuoto i {
    display: block;
    margin-bottom: 14px;
    color: var(--text-tertiary);
    font-size: 2rem;
}

.cert-vuoto p {
    margin: 0 0 6px;
    color: var(--text-strong);
    font-size: 0.94rem;
    font-weight: 600;
}

.cert-vuoto span {
    font-size: 0.84rem;
}

/* ── I modali ────────────────────────────────────────────────
   La larghezza si sceglie in base a cosa il modale contiene, non copiando un
   numero: lo schema piu' largo ha dodici campi, e dodici campi non sono una
   tabella — sono un modulo su due colonne. `min-width: 0` sui figli e
   `width: 100%` sui campi perche' in flexbox un input ha una larghezza
   intrinseca generosa e senza quei due il secondo campo esce dal bordo. */

.cert-modale {
    width: min(520px, calc(100vw - 24px));
}

/* Millecinquanta e non ottocentottanta: la scheda di taratura ha nove campi
   su tre colonne e una tabella di misure a quattro colonne con teste di
   quattro parole, e a 880 le teste andavano su tre righe. Chiesto il 14
   settembre 2026: «fallo anche piu' grande, e' troppo piccolo». */
.cert-modale--largo {
    width: min(1050px, calc(100vw - 24px));
}

.cert-campi {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
    margin-top: 16px;
}

.cert-campo {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
}

.cert-campo--largo {
    grid-column: 1 / -1;
}

.cert-campo__label {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-tertiary);
}

.cert-campo .input-field-modern {
    width: 100%;
}

/* Il titolo di un riquadro del Mod. NC-RC dentro la maschera: largo tutta la
   riga, staccato da un filo sopra, col titolo piu' grande e la nota fra
   parentesi sotto — la stessa forma del foglio. I campi della stessa sezione
   scendono dopo, e le cinque sezioni si vedono a colpo d'occhio invece di
   perdersi in ventidue campi uguali. */
.cert-campo--riquadro {
    grid-column: 1 / -1;
    margin-top: 10px;
    padding-top: 14px;
    border-top: 1px solid var(--panel-border);
}

.cert-campo--riquadro .cert-campo__label {
    font-family: var(--font-titolo);
    font-size: 0.82rem;
    letter-spacing: 0.08em;
    color: var(--text-strong);
}

.cert-riquadro__nota {
    margin-top: -2px;
    margin-bottom: 2px;
    color: var(--text-tertiary);
    font-size: 0.74rem;
    line-height: 1.4;
}

/* Le tre caselle del trattamento e il si'/no dell'azione correttiva sono una
   tendina corta: larga quanto il foglio sarebbe una riga vuota con tre parole. */
.cert-campo--riquadro select.input-field-modern {
    max-width: 320px;
}

/* La prima sezione non ha bisogno del filo: sopra c'e' gia' la testata. */
.cert-campo--riquadro:first-child {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}

.cert-scelta-sezioni {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 6px;
    margin-top: 14px;
    max-height: 40vh;
    overflow-y: auto;
    padding: 10px;
    border: 1px solid var(--panel-border);
    border-radius: var(--radius-card);
    background: var(--panel-mid);
}

.cert-scelta {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    font-size: 0.8rem;
    cursor: pointer;
}

.cert-scelta span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cert-scelta input {
    flex: none;
    accent-color: var(--accent);
}

/* ── Telefono ────────────────────────────────────────────── */

@media (max-width: 760px) {
    .cert-pagina {
        gap: 14px;
        padding: 14px 14px 24px;
    }

    .cert-azioni,
    .cert-dossier-testa {
        align-items: stretch;
        flex-direction: column;
    }

    .cert-cerca {
        max-width: none;
    }

    /* Sul telefono la riga e' una colonna: i 200px che sul desktop servono a
       far stare la ricerca accanto ai quattro bottoni qui tagliano il
       segnaposto a meta' parola. */
    .cert-dossier-testa__azioni .cert-cerca {
        flex: 1 1 auto;
    }

    .cert-riga {
        align-items: flex-start;
        flex-direction: column;
        gap: 4px;
        padding: 10px 14px;
    }

    .cert-riga__testo {
        align-items: flex-start;
        flex-direction: column;
        gap: 2px;
        width: 100%;
    }

    .cert-riga__aiuto {
        white-space: normal;
    }

    .cert-riga__controllo {
        align-self: flex-end;
        margin-top: -22px;
    }

    .cert-pannello {
        padding: 6px 10px 14px;
    }

    .cert-campi {
        grid-template-columns: 1fr;
    }

    .cert-scadenzario__lista li {
        align-items: flex-start;
        flex-direction: column;
        gap: 2px;
    }
}

/* ── I registri di sistema ───────────────────────────────────
   Il quadro di «Azienda»: una card per registro, e sopra la striscia di cio'
   che scade. Riusa .cert-card e .cert-griglia — un registro e' una card come
   un fascicolo — e aggiunge solo cio' che un fascicolo non ha: il numero della
   clausola, il conteggio delle righe e il buco da chiudere. */

.cert-card--registro .cert-card__titolo {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Il numero della clausola e' la chiave con cui il revisore cerca: chiede
   «7.1.5», non «gli strumenti». Monospaziato perche' e' un codice, e in un
   elenco di quattro card le cifre devono incolonnarsi. */
.cert-clausola {
    flex-shrink: 0;
    padding: 2px 8px;
    border: 1px solid var(--panel-border);
    border-radius: var(--radius-pill);
    color: var(--text-tertiary);
    font-family: var(--cert-mono);
    font-size: 0.72rem;
}

.cert-registro__numeri {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 4px;
    color: var(--text-secondary);
    font-size: 0.82rem;
}

.cert-registro__numeri b {
    color: var(--text-strong);
    font-size: 1.05rem;
}

.cert-registro__buchi,
.cert-registro__buchi b {
    color: var(--cert-avviso-testo);
}

.cert-scadenzario {
    padding: 12px 14px;
    border: 1px solid var(--panel-border);
    border-left: 3px solid var(--cert-avviso-testo);
    border-radius: 10px;
    background: var(--panel-soft);
}

.cert-scadenzario__testa {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--cert-avviso-testo);
    font-size: 0.86rem;
}

.cert-scadenzario__lista {
    margin: 8px 0 0;
    padding: 0;
    list-style: none;
}

.cert-scadenzario__lista li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 0;
    font-size: 0.84rem;
}

/* Il nome della cosa che scade e' un bottone e non un testo: da li' si apre il
   registro, ed e' l'unico gesto che quella riga chiede. */
.cert-scadenzario__voce {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--text-strong);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.cert-scadenzario__voce:hover {
    color: var(--cert-accento-testo);
    text-decoration: underline;
}

/* Di che scadenza si tratta, prima del nome: «Verifica di taratura ·
   ATT-14(a) Stazione di saldatura». Piu' tenue del nome, che e' la cosa. */
.cert-scadenzario__tipo {
    color: var(--text-tertiary);
}

.cert-scadenzario__tipo::after {
    content: ' · ';
}

/* La riga su cui si atterra dalla striscia delle scadenze: si accende e si
   spegne da sola, il tempo di vederla. */
.cert-tabella tr.cert-riga--accesa > td {
    background: color-mix(in srgb, var(--accent) 16%, transparent);
}

.cert-scadenzario__quando {
    flex-shrink: 0;
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
}

/* Il fornitore che nell'albo non ha nessuna valutazione. Non si nasconde e non
   si colora di rosso: e' una riga da compilare, non un errore — e nasconderla
   vorrebbe dire che l'albo mente proprio sulla domanda che gli si fa. */
.cert-riga--senza td {
    color: var(--text-tertiary);
}

/* La riga che spiega dove nascono i fornitori, sotto la tendina del rientro:
   e' un'informazione, non un comando, quindi sta come nota e non come riga. */
.cert-nota {
    margin: 12px 0 0;
    color: var(--text-tertiary);
    font-size: 0.78rem;
    line-height: 1.45;
}

.cert-campo__aiuto {
    margin-top: 4px;
    color: var(--text-tertiary);
    font-size: 0.74rem;
    line-height: 1.4;
}

/* I file scelti e non ancora caricati, sotto il campo: uno per riga col peso,
   cosi' un PDF da 40 MB o il file sbagliato si vedono prima del Carica. */
.cert-file-scelti {
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin: 6px 0 0;
    padding: 0;
    list-style: none;
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.cert-file-scelti li {
    display: flex;
    align-items: baseline;
    gap: 8px;
    min-width: 0;
}

.cert-file-scelti li > i { color: var(--text-tertiary); }

.cert-file-scelti__peso {
    margin-left: auto;
    flex-shrink: 0;
    font-family: var(--cert-mono);
    font-size: 0.72rem;
    color: var(--text-tertiary);
}

.cert-punteggio {
    font-family: var(--cert-mono);
    font-size: 1.4rem;
}

/* ── Menu azioni delle righe di registro ─────────────────────────────────────
   Cinque icone in fila su una riga di tabella si toccano e si sbaglia
   bersaglio: le azioni stanno dietro un «tre puntini». Il popup e' `fixed` e
   posizionato da menu-azioni.js perche' .cert-tabella-wrap scorre e un
   `absolute` verrebbe tagliato dal suo bordo. */
.cert-azioni-menu {
    position: relative;
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}

/* Nascosto dov'e' scritto: menu-azioni.js ne porta una copia in fondo al body
   e la mostra li'. Dentro la cella non potrebbe stare — la colonna delle azioni
   e' sticky, quindi le righe sotto le si disegnano sopra. */
.cert-azioni-popup {
    display: none;
    flex-direction: column;
    gap: 2px;
    /* Largo quanto la voce piu' lunga, non quanto la colonna: «Qualifica il
       fornitore» usciva dal bordo e si leggeva «Qualifica il f». */
    width: max-content;
    min-width: 180px;
    max-width: 320px;
    padding: 4px;
    background: var(--panel-bg);
    border: 1px solid var(--panel-border);
    border-radius: var(--radius-card);
    box-shadow: var(--elev-3);
}

.cert-azioni-popup.menu-azioni-portale {
    display: flex;
    position: absolute;
    z-index: 10001;
}

.cert-menu-item {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    padding: 8px 11px;
    border: none;
    border-radius: var(--radius-card);
    background: none;
    color: var(--text-secondary);
    font-family: inherit;
    font-size: 0.75rem;
    font-weight: 600;
    text-align: left;
    white-space: nowrap;
    cursor: pointer;
    box-sizing: border-box;
    transition: background 0.12s;
}

.cert-menu-item i {
    width: 14px;
    text-align: center;
    flex-shrink: 0;
    color: var(--text-tertiary);
}

.cert-menu-item:hover { background: var(--surface-hover-soft); }

.cert-menu-item--pericolo,
.cert-menu-item--pericolo i { color: var(--error); }

.cert-menu-item--pericolo:hover {
    background: color-mix(in srgb, var(--error) 12%, transparent);
}

/* ── L'albo in blocco: la colonna delle caselle e la sua barra ──
   Stessi token della selezione nell'elenco dei documenti: e' lo stesso gesto in
   due schermate, e due gesti uguali che si vestono diversi si imparano due
   volte. */

.cert-tabella__spunta {
    width: 34px;
    padding-right: 0;
    text-align: center;
}

th.cert-tabella__spunta { background: var(--panel-soft); }

/* Quadrata e non tonda, perche' seleziona invece di accendere. */
.cert-spunta {
    width: 18px;
    height: 18px;
    border: 1px solid var(--panel-border-mid);
    border-radius: 5px;
    background: var(--card-surface);
    color: var(--accent-contrast);
    font-size: 0.6rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.cert-spunta.is-on {
    background: var(--accent);
    border-color: var(--accent);
}

/* L'host resta nel markup anche quando la barra non c'e': cosi' comparendo e
   sparendo non fa saltare in su e in giu' la tabella che sta sotto. */
.cert-albo-selezione-host:empty { display: none; }

.cert-albo-selezione {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding: 10px 14px;
    margin-bottom: 10px;
    border: 1px solid var(--panel-border);
    border-radius: 12px;
    background: var(--panel-mid);
}

.cert-albo-selezione__annulla {
    border: 0;
    background: transparent;
    color: var(--text-tertiary);
    font: inherit;
    font-size: 0.78rem;
    cursor: pointer;
}

.cert-albo-selezione__annulla:hover { color: var(--text-strong); }

/* ── Sistema i codici ────────────────────────────────────────
   La vista dove i codici dei beni si rimettono in ordine. E' una lista larga e
   non la tabella del registro: il Mod. 7.1-3 ha sette colonne e scorre in
   orizzontale, e su una tabella che scorre trascinare una riga e' scomodo. */

.cert-riordino {
    display: flex;
    flex-direction: column;
    gap: 14px;
    /* Spazio in fondo per la barra, che resta appiccicata sotto: senza, l'ultima
       famiglia ci finisce coperta e non ci si riesce a trascinare sopra. */
    padding-bottom: 76px;
}

.cert-riordino__testa {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.cert-riordino__titolo {
    margin: 0;
    font-family: var(--font-titolo);
    font-size: 1.05rem;
    color: var(--text-strong);
}

.cert-riordino__aiuto {
    margin: 4px 0 0;
    max-width: 62ch;
    font-size: 0.82rem;
    color: var(--text-tertiary);
}

.cert-riordino__azioni { display: flex; gap: 8px; flex-wrap: wrap; }

.cert-riordino__avvisi {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.cert-avviso {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 8px 12px;
    border: 1px solid var(--panel-border);
    border-radius: 10px;
    background: var(--panel-soft);
    font-size: 0.82rem;
    color: var(--text-secondary);
}

.cert-avviso--rosso {
    border-color: var(--error);
    color: var(--error);
}

/* Giallo: dice una cosa che vale la pena sapere e non impedisce niente. Il
   bordo di sinistra basta a distinguerlo dal rosso senza aggiungere un colore
   di sfondo che ruberebbe l'occhio a chi cerca il vero impedimento. */
.cert-avviso--giallo {
    border-color: var(--panel-border);
    border-left: 3px solid var(--cert-avviso-testo);
    color: var(--text-secondary);
}

.cert-avviso__azione {
    margin-left: auto;
    flex-shrink: 0;
    padding: 3px 10px;
    border: 1px solid currentColor;
    border-radius: var(--radius-pill);
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: 0.78rem;
    cursor: pointer;
}

.cert-avviso__azione:hover { background: var(--accent-wash); }

.cert-riordino__lista {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.cert-fam {
    border: 1px solid var(--panel-border);
    border-radius: var(--radius-card);
    background: var(--card-surface);
    overflow: hidden;
    transition: border-color 120ms var(--ease-enter), background 120ms var(--ease-enter);
}

/* La famiglia sotto il puntatore mentre si trascina: stesso vocabolario del
   catalogo interno, dove una card si porta da un reparto all'altro. */
.cert-fam.is-bersaglio {
    border-color: var(--accent);
    background: var(--accent-wash);
}

.cert-fam--multipla { border-left: 3px solid var(--accent); }

.cert-fam__testa {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
    padding: 8px 14px;
    background: var(--panel-mid);
    border-bottom: 1px solid var(--panel-border);
    font-size: 0.82rem;
}

.cert-fam__numero {
    font-family: var(--cert-mono);
    font-weight: 700;
    color: var(--cert-accento-testo, var(--accent));
    min-width: 2ch;
}

.cert-fam__nome { font-weight: 600; color: var(--text-strong); }
.cert-fam__marca { color: var(--text-tertiary); }

.cert-fam__conta {
    margin-left: auto;
    padding: 1px 8px;
    border-radius: var(--radius-pill);
    background: var(--panel-soft);
    color: var(--text-tertiary);
    font-size: 0.74rem;
}

.cert-fam__unita { display: flex; flex-direction: column; }

.cert-fam__unita--vuota {
    padding: 14px;
    color: var(--text-tertiary);
    font-size: 0.8rem;
    text-align: center;
}

/* La zona per staccare resta riconoscibile anche vuota: il tratteggio dice che
   e' un posto dove si molla qualcosa, non una famiglia rimasta senza macchine. */
.cert-fam--sola { border-style: dashed; background: transparent; }

.cert-bene {
    display: grid;
    grid-template-columns: 22px minmax(9ch, auto) minmax(0, 1fr) minmax(0, 0.8fr) 36px;
    align-items: center;
    gap: 10px;
    padding: 7px 14px;
    border-top: 1px solid var(--panel-border-mid);
    font-size: 0.84rem;
    /* Il testo non si seleziona mentre si trascina: su un elenco fitto la
       selezione parte da sola e il fantasma si porta dietro una riga blu. */
    user-select: none;
}

.cert-fam__unita > .cert-bene:first-child { border-top: 0; }

.cert-bene.is-cambiata { background: var(--accent-wash); }

.cert-bene__presa {
    color: var(--text-tertiary);
    cursor: grab;
    text-align: center;
}

.cert-bene__codice { font-family: var(--cert-mono); white-space: nowrap; }
.cert-bene__codice s { color: var(--text-tertiary); }
.cert-bene__codice i { color: var(--accent); font-size: 0.7rem; }

.cert-bene__nome { color: var(--text-strong); overflow: hidden; text-overflow: ellipsis; }
.cert-bene__marca { color: var(--text-tertiary); overflow: hidden; text-overflow: ellipsis; }
.cert-bene__azioni { display: flex; justify-content: flex-end; }

.cert-riordino__barra {
    position: sticky;
    bottom: 0;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    padding: 10px 14px;
    border: 1px solid var(--panel-border);
    border-radius: 12px;
    background: var(--panel-bg);
    box-shadow: var(--elev-3);
}

.cert-riordino__barra.is-sporca { border-color: var(--accent); }

.cert-riordino__conta { font-size: 0.84rem; color: var(--text-secondary); }
.cert-riordino__barra.is-sporca .cert-riordino__conta { color: var(--text-strong); font-weight: 600; }
.cert-riordino__barra-azioni { display: flex; gap: 8px; flex-wrap: wrap; }

/* ── L'anteprima e la scelta dell'altra macchina ───────────── */

.cert-ant { display: flex; flex-direction: column; gap: 14px; }

.cert-ant__blocco h4 {
    margin: 0 0 6px;
    font-size: 0.82rem;
    color: var(--text-secondary);
    font-weight: 600;
}

.cert-ant__blocco--forte h4 { color: var(--cert-accento-testo, var(--accent)); }

.cert-ant__righe {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 0;
    padding: 0;
    list-style: none;
    max-height: 46vh;
    overflow-y: auto;
}

.cert-ant__riga {
    display: grid;
    grid-template-columns: minmax(8ch, auto) 14px minmax(8ch, auto) minmax(0, 1fr);
    align-items: baseline;
    gap: 8px;
    padding: 5px 8px;
    border-radius: 8px;
    background: var(--panel-soft);
    font-size: 0.82rem;
}

.cert-ant__riga--fusione { grid-template-columns: minmax(8ch, auto) minmax(0, 1fr); }

.cert-ant__da { font-family: var(--cert-mono); color: var(--text-tertiary); text-decoration: line-through; }
.cert-ant__a { font-family: var(--cert-mono); font-weight: 700; color: var(--text-strong); }
.cert-ant__chi { color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; }

.cert-ant__codici {
    margin: 0;
    font-family: var(--cert-mono);
    font-size: 0.82rem;
    color: var(--text-secondary);
}

.cert-ant__nota {
    margin: 4px 0 0;
    font-size: 0.78rem;
    color: var(--text-tertiary);
}

/* ── Le verifiche di taratura ────────────────────────────────
   Il codice della verifica sta in cima al modulo, prima dei campi: e' il numero
   che finira' sul verbale cartaceo, e chi compila deve vederlo mentre scrive,
   non scoprirlo dopo aver salvato. */

.cert-tar-codice {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 12px;
    padding: 8px 12px;
    border: 1px solid var(--panel-border);
    border-radius: 10px;
    background: var(--panel-soft);
}

.cert-tar-codice strong {
    font-family: var(--cert-mono);
    font-size: 0.92rem;
    color: var(--cert-accento-testo, var(--accent));
}

/* Il titolo di un blocco dentro la tabella del registro strumenti: gli
   strumenti sopra, le tarature sotto, e in mezzo una riga che dice dove si
   passa dall'una all'altra. */
.cert-riga-sezione td {
    /* Una banda piena e bassa, senza parole: separa i due blocchi e non
       spezza l'allineamento delle colonne. */
    height: 8px;
    padding: 0;
    background: var(--panel-border);
    border-bottom: 0;
}

/* La stessa banda con l'anno, nei registri delle non conformita': come sul
   foglio, un blocco per anno. */
.cert-riga-sezione--titolata td {
    height: auto;
    padding: 5px 10px;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--text-strong);
    text-align: left;
}

.cert-cella-lunga--tre { -webkit-line-clamp: 3; }

/* Le misure del verbale, nel modulo della verifica: una griglia che si
   compila, con le teste delle colonne scrivibili. Le celle sono campi nudi
   dentro la tabella e non campi del modulo: dieci righe di campi da 40px
   sarebbero un modale alto due schermi per venti numeri. */
.cert-misure {
    margin-top: 14px;
    padding: 10px 12px 8px;
    border: 1px solid var(--panel-border);
    border-radius: 10px;
    background: var(--panel-soft);
}

.cert-misure__testa {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px 12px;
    margin-bottom: 8px;
}

.cert-misure__aiuto {
    font-size: 0.74rem;
    color: var(--text-tertiary);
}

.cert-misure__tabella {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

.cert-misure__tabella th,
.cert-misure__tabella td {
    padding: 2px 3px;
    border-bottom: 1px solid var(--panel-border);
}

.cert-misure__tabella th.cert-misure__via,
.cert-misure__tabella td.cert-misure__via {
    width: 30px;
    text-align: center;
}

.cert-misure__colonna,
.cert-misure__cella {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    padding: 5px 6px;
    border: 1px solid transparent;
    border-radius: 6px;
    background: transparent;
    font: inherit;
    font-size: 0.82rem;
    color: var(--text-strong);
    text-align: center;
}

.cert-misure__colonna {
    font-weight: 700;
    font-size: 0.74rem;
    line-height: 1.3;
    letter-spacing: 0.02em;
    color: var(--text-secondary);
    resize: none;
    overflow: hidden;
}

/* La riga delle due sezioni sopra le teste: titolo e nota scrivibili, un filo
   fra sinistra e destra perche' si veda dove finisce una e comincia l'altra. */
.cert-misure__sezioni th[colspan] {
    vertical-align: top;
    border-bottom: 0;
}

.cert-misure__sezioni th[colspan] + th[colspan] { border-left: 1px solid var(--panel-border); }

.cert-misure__sezione-titolo,
.cert-misure__sezione-nota {
    display: block;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    padding: 4px 6px;
    border: 1px solid transparent;
    border-radius: 6px;
    background: transparent;
    font: inherit;
    color: var(--text-strong);
    text-align: center;
    resize: none;
}

.cert-misure__sezione-titolo { font-size: 0.84rem; font-weight: 600; }

.cert-misure__sezione-nota {
    font-size: 0.74rem;
    line-height: 1.3;
    color: var(--text-secondary);
}

.cert-misure__sezione-titolo:hover,
.cert-misure__sezione-nota:hover { border-color: var(--panel-border); }

.cert-misure__sezione-titolo:focus,
.cert-misure__sezione-nota:focus {
    outline: none;
    border-color: var(--accent);
    background: var(--card-surface);
}

.cert-misure__scelta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 8px;
    margin-bottom: 8px;
    font-size: 0.82rem;
    color: var(--text-strong);
    cursor: pointer;
}

.cert-misure__scelta small {
    flex-basis: 100%;
    padding-left: 24px;
    font-size: 0.74rem;
    color: var(--text-tertiary);
}

.cert-misure__cella { font-family: var(--cert-mono); }

.cert-misure__colonna:hover,
.cert-misure__cella:hover { border-color: var(--panel-border); }

.cert-misure__colonna:focus,
.cert-misure__cella:focus {
    outline: none;
    border-color: var(--accent);
    background: var(--card-surface);
}

.cert-misure__azioni {
    display: flex;
    gap: 6px;
    margin-top: 8px;
}

.cert-tar-storia { margin-top: 16px; }

.cert-tar-storia h4 {
    margin: 0 0 6px;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-secondary);
}

.cert-tar-storia ul {
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin: 0;
    padding: 0;
    list-style: none;
    max-height: 34vh;
    overflow-y: auto;
}

.cert-tar-riga {
    display: grid;
    grid-template-columns: minmax(13ch, auto) minmax(9ch, auto) minmax(7ch, auto) minmax(0, 1fr) 28px;
    align-items: baseline;
    gap: 10px;
    padding: 5px 8px;
    border-radius: 8px;
    background: var(--panel-soft);
    font-size: 0.8rem;
}

.cert-tar-riga__codice { font-family: var(--cert-mono); color: var(--text-strong); }
.cert-tar-riga__data { color: var(--text-secondary); }
.cert-tar-riga__esito { color: var(--text-secondary); }
.cert-tar-riga__primario { color: var(--text-tertiary); overflow: hidden; text-overflow: ellipsis; }

.cert-tar-riga__via {
    border: 0;
    background: transparent;
    color: var(--text-tertiary);
    font: inherit;
    cursor: pointer;
    padding: 0 4px;
}

.cert-tar-riga__via:hover { color: var(--error); }

@media (max-width: 640px) {
    .cert-tar-riga { grid-template-columns: minmax(0, 1fr) minmax(0, auto); }
    .cert-tar-riga__primario { grid-column: 1 / -1; }
}

.cert-scegli {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: 56vh;
    overflow-y: auto;
}

.cert-scegli__riga {
    display: grid;
    grid-template-columns: minmax(9ch, auto) minmax(0, 1fr) minmax(0, 0.7fr);
    align-items: baseline;
    gap: 10px;
    width: 100%;
    padding: 9px 12px;
    border: 1px solid transparent;
    border-radius: 10px;
    background: var(--panel-soft);
    color: var(--text-secondary);
    font: inherit;
    font-size: 0.84rem;
    text-align: left;
    cursor: pointer;
}

.cert-scegli__riga:hover { border-color: var(--accent); background: var(--accent-wash); }
.cert-scegli__riga strong { font-family: var(--cert-mono); color: var(--text-strong); }
.cert-scegli__riga em { color: var(--text-tertiary); font-style: normal; }

/* Sul telefono la riga si impila: cinque colonne su 375px darebbero quattro
   caratteri a testa. Il trascinamento col dito resta possibile — il motore ha
   l'hold — ma la strada normale li' e' il menu della riga. */
@media (max-width: 640px) {
    .cert-bene {
        grid-template-columns: 22px minmax(0, 1fr) 36px;
        grid-template-areas: 'presa codice azioni' '. nome nome' '. marca marca';
        row-gap: 2px;
    }
    .cert-bene__presa { grid-area: presa; }
    .cert-bene__codice { grid-area: codice; }
    .cert-bene__nome { grid-area: nome; }
    .cert-bene__marca { grid-area: marca; }
    .cert-bene__azioni { grid-area: azioni; }
    .cert-ant__riga, .cert-scegli__riga { grid-template-columns: minmax(0, 1fr); }
}

/* ── Il registro dei manuali di produzione ──────────────────
   Lo storico delle revisioni nel modale: la corrente in cima, poi le
   precedenti, una per riga con data, chi e quanto era grande il manuale. */
.cert-storico-manuale {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 12px 0 0;
    padding: 0;
    list-style: none;
    max-height: 50vh;
    overflow-y: auto;
}

.cert-storico-manuale li {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 2px 14px;
    padding: 8px 12px;
    border: 1px solid var(--panel-border);
    border-radius: 8px;
    font-size: 0.84rem;
}

.cert-storico-manuale li:first-child { background: var(--panel-soft); }

.cert-storico-manuale span { color: var(--text-secondary); }

.cert-storico-manuale small {
    grid-column: 1 / -1;
    font-size: 0.76rem;
    color: var(--text-tertiary);
}

/* Un manuale dismesso resta in tabella, in grigio: si vede che c'e' e che
   non vale piu'. */
.cert-riga-dismessa td { color: var(--text-tertiary); }