/* ============================================================
   Il percorso a otto passi e la scocca dei widget.

   Porting delle regole .pc-* e .w-* di src/app/globals.css della
   consegna di design lidia-web del 20/09/2026.

   Due differenze dall'originale, volute.

   1. I colori passano per i token del tema. La consegna dichiara la
      stessa tavolozza con nomi propri (--lid-green e compagnia) e i
      valori coincidono uno a uno con i nostri, verificati il
      22/09/2026: qui si usano i nostri, cosi' non nascono due
      sorgenti per la stessa tinta. Le quattro tinte che nel tema non
      hanno un token si dichiarano su .pc, non su :root.

   2. Il grigio secondario non fa da testo. Nella consegna le
      etichette piccole sono --lid-mute #938A8A, che sul fondo chiaro
      sta a 3,09:1 e non passa la soglia AA. Dove serviva leggere, e'
      diventato verde o nero a opacita' ridotta: i valori sono
      annotati riga per riga.
   ============================================================ */

.pc {
    /* Le tinte della consegna che nel tema non hanno un token. */
    --pc-paper:  #FBFAF7;   /* fondo delle testate dei widget */
    --pc-cream2: #ECEAE6;   /* righe interne, separatori tenui */
    --pc-line2:  #C9C4BB;   /* bordi dei campi, piu' marcati di --color-border */

    padding: 88px 0;
    background: var(--color-light);
}
@media (max-width: 700px) { .pc { padding: 56px 0; } }

.pc-eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: .8125rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
    color: var(--color-primary); margin-bottom: 14px;
}
.pc-eyebrow::before { content: ""; width: 18px; height: 1px; background: currentColor; }

.pc-h2 {
    font-family: var(--font-serif); font-weight: 700;
    font-size: clamp(1.8rem, 3.2vw, 2.75rem); line-height: 1.1; letter-spacing: -.025em;
    max-width: 24ch; margin: 0 0 10px;
}
.pc-intro {
    font-size: 1.0625rem; line-height: 1.6; max-width: 64ch; margin: 0 0 28px;
    color: var(--color-text); opacity: .82;   /* 8,43:1 su --color-light */
}

/* ── Controlli: procedura e ruolo ─────────────────────────────────── */

.pc-controls { display: flex; flex-wrap: wrap; gap: 14px 32px; margin-bottom: 10px; }
.pc-group { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.pc-glabel {
    font-size: .6875rem; text-transform: uppercase; letter-spacing: .12em; font-weight: 700;
    color: var(--color-primary);   /* 6,94:1: il grigio della consegna faceva 3,09 */
    margin-right: 6px;
}
.pc-pill {
    padding: 8px 14px; border-radius: var(--radius-pill);
    border: 1px solid var(--pc-line2); background: #fff;
    font: inherit; font-size: .875rem; font-weight: 500;
    color: var(--color-text); cursor: pointer; transition: all .15s;
}
.pc-pill:hover { border-color: var(--color-primary); color: var(--color-primary); }
.pc-pill.on { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.pc-pill:focus-visible { outline: 3px solid var(--color-green-dk); outline-offset: 2px; }

.pc-procline {
    font-size: .90625rem; margin: 6px 0 26px;
    color: var(--color-text); opacity: .78;   /* 7,38:1 */
}
.pc-procline b { font-weight: 600; }
.pc-procline span::before { content: " \00b7 "; }

/* ── La fila degli otto passi ─────────────────────────────────────── */

.pc-rail { list-style: none; margin: 0 0 28px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; align-items: stretch; }
.pc-li { display: flex; align-items: stretch; gap: 8px; }
.pc-step {
    display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
    min-width: 112px; padding: 12px 16px; border-radius: var(--radius);
    border: 1px solid var(--color-border); background: #fff;
    font: inherit; text-align: left; cursor: pointer; transition: all .15s;
}
.pc-step:hover { border-color: var(--color-primary); transform: translateY(-1px); }
.pc-step:focus-visible { outline: 3px solid var(--color-green-dk); outline-offset: 2px; }
.pc-step .pc-n {
    font-family: var(--font-serif); font-weight: 700; font-size: .8125rem;
    color: var(--color-text); opacity: .7;
}
.pc-step .pc-s {
    font-family: var(--font-serif); font-weight: 700; font-size: .96875rem;
    letter-spacing: -.01em; color: var(--color-text);
}
.pc-step.on { background: var(--color-green-dk); border-color: var(--color-green-dk); }
.pc-step.on .pc-n { color: var(--color-accent); opacity: 1; }   /* 6,19:1 sul verde scuro */
.pc-step.on .pc-s { color: #fff; }
.pc-step.off { opacity: .45; }

/* Il pallino dei passi interattivi. */
.pc-live {
    display: inline-block; width: 7px; height: 7px; border-radius: 50%;
    background: var(--color-primary); margin-left: 7px; vertical-align: middle;
    box-shadow: 0 0 0 3px rgba(42,93,80,.15);
}
.pc-step.on .pc-live { background: var(--color-accent); box-shadow: 0 0 0 3px rgba(167,201,184,.25); }

/* Il varco fra il passo 07 e il passo 08: qui Lidia si ferma. */
.pc-gap {
    display: flex; flex-direction: column; justify-content: center; gap: 2px;
    padding: 8px 14px; border-radius: var(--radius);
    border: 1px dashed var(--color-green-md);   /* 3,09:1, sopra la soglia per un bordo */
    color: var(--color-text); opacity: .82;
    font-size: .8125rem; font-weight: 600;
    background: repeating-linear-gradient(135deg, transparent 0 6px, rgba(147,138,138,.10) 6px 12px);
}
.pc-gap small { font-size: .71875rem; font-weight: 400; }

/* ── Il pannello del passo ────────────────────────────────────────── */

.pc-panel { display: grid; grid-template-columns: .8fr 1.2fr; gap: 48px; align-items: start; }

/* L'attributo hidden lo spegne il foglio del browser con display:none, ma una
   regola d'autore come .w-row { display: flex } gli passa davanti e il nodo
   torna visibile. Succedeva alla riga del saggio d'interesse, che compariva
   anche senza una moratoria. Qui dentro hidden vince sempre. */
.pc [hidden] { display: none !important; }
@media (max-width: 1000px) { .pc-panel { grid-template-columns: 1fr; gap: 28px; } .pc-info { position: static; } }

.pc-info { position: sticky; top: 96px; }
.pc-meta { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.pc-num {
    font-size: .75rem; text-transform: uppercase; letter-spacing: .14em;
    color: var(--color-primary); font-weight: 700;
}
.pc-badge {
    display: inline-flex; align-items: center; padding: 5px 11px;
    font-size: .75rem; font-weight: 600; border-radius: var(--radius-pill);
    background: var(--color-mist); color: var(--color-green-dk);   /* 8,33:1 */
}
.pc-title {
    font-family: var(--font-serif); font-size: clamp(1.625rem, 2.6vw, 2.25rem);
    line-height: 1.1; letter-spacing: -.025em; margin: 0 0 16px;
}
.pc-lines p { font-size: 1.03125rem; max-width: 46ch; color: var(--color-text); opacity: .86; }
.pc-norma {
    font-size: .84375rem; color: var(--color-text); opacity: .78;
    border-top: 1px solid var(--color-border); padding-top: 12px; margin-top: 18px;
}
.pc-after {
    font-size: .90625rem; background: #fff;
    border: 1px dashed var(--color-green-md); border-radius: 12px;
    padding: 12px 14px; color: var(--color-text); opacity: .86;
}

/* Il passo che non si applica alla procedura scelta. */
.pc-panel.is-attenuato .pc-title { opacity: .7; }

/* ── Il riquadro dei passi senza widget ───────────────────────────── */

.pc-solo {
    width: 100%; max-width: 520px; background: #fff;
    border: 1px dashed var(--color-green-md); border-radius: var(--radius-lg, 24px);
    padding: 34px;
}
.pc-solo h4 { font-family: var(--font-serif); font-size: 1.375rem; letter-spacing: -.02em; margin: 0 0 10px; }
.pc-solo p { color: var(--color-text); opacity: .82; font-size: 1rem; margin: 0 0 20px; }

/* ============================================================
   La scocca dei widget
   ============================================================ */

.pc .widget {
    background: #fff; border: 1px solid var(--color-border);
    border-radius: var(--radius-lg, 24px);
    box-shadow: 0 18px 48px rgba(33,34,33,.10), 0 60px 120px rgba(42,93,80,.08);
    overflow: hidden; max-width: 520px; width: 100%;
}
.pc .w-head {
    display: flex; align-items: center; gap: 10px;
    padding: 16px 20px; border-bottom: 1px solid var(--color-border); background: var(--pc-paper);
}
.pc .w-dot {
    width: 30px; height: 30px; border-radius: 8px;
    background: var(--color-primary); color: #fff;
    display: grid; place-items: center;
    font-family: var(--font-serif); font-weight: 700; font-size: .875rem;
}
.pc .w-title { font-family: var(--font-serif); font-weight: 700; font-size: 1rem; letter-spacing: -.01em; }
.pc .w-badge {
    margin-left: auto; display: inline-flex; align-items: center; padding: 5px 11px;
    font-size: .75rem; font-weight: 600; border-radius: var(--radius-pill);
    background: var(--color-mist); color: var(--color-green-dk);
}
.pc .w-body { padding: 8px 20px 20px; }
.pc .w-sec {
    font-size: .6875rem; text-transform: uppercase; letter-spacing: .12em;
    color: var(--color-primary); font-weight: 700; margin: 16px 0 6px;
}
.pc .w-row {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding: 9px 0; border-bottom: 1px solid var(--pc-cream2);
}
.pc .w-row label { display: flex; flex-direction: column; min-width: 0; }
.pc .w-lbl { font-size: .9375rem; color: var(--color-text); font-weight: 500; }
.pc .w-hint { font-size: .78125rem; color: var(--color-text); opacity: .72; }   /* 6,32:1 */

.pc .w-money {
    display: flex; align-items: center; gap: 6px;
    border: 1px solid var(--pc-line2); border-radius: 10px; padding: 0 12px;
    background: #fff; color: var(--color-text);
    transition: border-color .15s, box-shadow .15s;
}
.pc .w-money:focus-within { border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(42,93,80,.16); }
.pc .w-money input {
    width: 96px; border: 0; outline: 0; background: transparent;
    font: inherit; font-size: 1rem; font-weight: 500; color: var(--color-text);
    text-align: right; padding: 9px 0; font-variant-numeric: tabular-nums;
    -moz-appearance: textfield; appearance: textfield;
}
.pc .w-money input::-webkit-outer-spin-button,
.pc .w-money input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.pc .w-result {
    display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
    margin-top: 14px; padding: 14px 16px; border-radius: 12px;
    background: var(--color-mist); color: var(--color-green-dk);
    font-weight: 500; font-size: .9375rem;
}
.pc .w-result b { font-family: var(--font-serif); font-size: 1.5rem; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.pc .w-result.zero { background: var(--pc-cream2); color: var(--color-text); }

.pc .w-note { font-size: .84375rem; color: var(--color-text); opacity: .78; margin: 12px 2px 0; }

.pc .w-range { display: flex; align-items: center; gap: 12px; }
.pc .w-range input[type="range"] { width: 150px; accent-color: var(--color-primary); }
.pc .w-mesi { font-weight: 500; font-size: .9375rem; min-width: 64px; text-align: right; font-variant-numeric: tabular-nums; }

.pc .w-total {
    display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 2px 16px;
    margin-top: 14px; padding: 16px; border-radius: 12px;
    background: var(--color-green-dk); color: #fff; font-size: .9375rem;
}
.pc .w-total b { font-family: var(--font-serif); font-size: 1.875rem; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
/* Il bianco al 65 per cento della consegna qui passa: sul verde scuro fa
   5,72:1, sopra la soglia AA anche a questa misura. Resta com'era. */
.pc .w-total small { grid-column: 1 / -1; color: rgba(255,255,255,.65); font-size: .78125rem; font-variant-numeric: tabular-nums; }

.pc .w-row.w-sub { padding: 6px 0 6px 14px; border-bottom-color: transparent; }
.pc .w-row.w-sub .w-lbl { font-weight: 400; font-size: .90625rem; }
.pc .w-row.w-sub .w-money input { font-size: .9375rem; padding: 7px 0; }
.pc .w-row.w-sum { border-top: 1px solid var(--color-border); border-bottom: 0; margin-top: 4px; }
.pc .w-row.w-sum b { font-variant-numeric: tabular-nums; font-size: 1rem; }

.pc .w-out { margin-top: 14px; border: 1px solid var(--color-border); border-radius: 12px; overflow: hidden; }
.pc .w-out > div {
    display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
    padding: 10px 14px; font-size: .90625rem; border-bottom: 1px solid var(--pc-cream2);
}
.pc .w-out > div:last-child { border-bottom: 0; }
.pc .w-out small { color: var(--color-text); opacity: .72; font-size: .78125rem; margin-left: 6px; }
.pc .w-out b { font-variant-numeric: tabular-nums; }

.pc .w-next { margin-top: 14px; width: 100%; justify-content: center; }

.pc .w-foot {
    padding: 12px 20px; border-top: 1px solid var(--color-border); background: var(--pc-paper);
    font-size: .78125rem; color: var(--color-text); opacity: .78;
}

@media (max-width: 480px) {
    .pc .w-money input { width: 76px; }
    .pc .w-range input[type="range"] { width: 110px; }
    .pc-step { min-width: 0; flex: 1 1 auto; }
}

/* ============================================================
   Passo 06: gli stili propri del riparto.

   Porting di RipartoWidget.module.css della consegna. I nomi passano
   da modulo CSS a prefisso pcr-, i colori ai token del tema, e le tre
   tinte che nascono da una miscela si dichiarano su .pc con il loro
   calcolo accanto: color-mix() farebbe lo stesso lavoro ma nasconde
   il valore a chi legge il foglio.

   Come nel resto del percorso, il grigio secondario della consegna
   non fa da testo: sotto i 14 punti sul fondo chiaro non passa la
   soglia AA, e al suo posto c'e' il nero a opacita' ridotta.
   ============================================================ */

.pc {
    --pc-petrolio-soft: #C8DCE1;   /* fondo tenue del petrolio, dalla consegna */
    --pc-spia-ok:     #F2F7F5;     /* --color-mist al 28 per cento su bianco */
    --pc-spia-info:   #F1F6F7;     /* --pc-petrolio-soft al 26 per cento su bianco */
    --pc-spia-avviso: #FAF1ED;     /* --color-alert-bg al 40 per cento su bianco */
}

.pc .pcr { max-width: 680px; }

/* I gettoni che arrivano dal passo precedente. */
.pcr-chips { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 16px 0 4px; padding: 0; }
.pcr-chip {
    display: inline-flex; align-items: baseline; gap: 6px;
    padding: 6px 12px; border-radius: var(--radius-pill);
    background: var(--color-light); border: 1px solid var(--color-border);
    font-size: .78125rem; color: var(--color-text); opacity: .82; white-space: nowrap;
}
.pcr-chip b { font-weight: 600; font-variant-numeric: tabular-nums; }

/* Il cursore delle risorse. */
.pcr-cursore { padding: 12px 0 4px; }
.pcr-cursore input[type="range"] { width: 100%; accent-color: var(--color-primary); }
.pcr-scala {
    display: flex; justify-content: space-between; font-size: .71875rem;
    color: var(--color-text); opacity: .72; font-variant-numeric: tabular-nums;
}

/* La cascata: tre vasche che si riempiono in ordine. */
.pcr-vasche { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.pcr-vasca { border: 1px solid var(--color-border); border-radius: 12px; padding: 12px 14px; background: var(--pc-paper); }
.pcr-vasca-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.pcr-vasca-nome { font-size: .84375rem; font-weight: 600; color: var(--color-text); }
.pcr-vasca-num { font-size: .78125rem; color: var(--color-text); opacity: .78; font-variant-numeric: tabular-nums; }
.pcr-vasca-num b { color: var(--color-green-dk); font-weight: 600; }

.pcr-barra { position: relative; height: 10px; margin-top: 8px; border-radius: 999px; background: var(--pc-cream2); overflow: hidden; }
.pcr-fill {
    display: block; height: 100%; border-radius: 999px;
    background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-accent) 100%);
    transition: width .5s cubic-bezier(.22,.61,.36,1);
}

.pcr-gradi { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.pcr-grado {
    display: grid; grid-template-columns: 110px 1fr 62px; align-items: center; gap: 10px;
    font-size: .75rem; color: var(--color-text); opacity: .78;
}
.pcr-grado-barra { height: 6px; border-radius: 999px; background: var(--pc-cream2); overflow: hidden; }
.pcr-grado-pct { text-align: right; font-variant-numeric: tabular-nums; }

/* I creditori. */
.pcr-righe { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.pcr-riga { border: 1px solid var(--color-border); border-radius: 12px; padding: 12px 14px; background: #fff; }
.pcr-riga-imposta { border-color: var(--color-petroleum); box-shadow: inset 3px 0 0 var(--color-petroleum); }
.pcr-riga-top { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; }
.pcr-riga-nome { display: flex; flex-direction: column; min-width: 0; }
.pcr-riga-nome b { font-size: .90625rem; font-weight: 600; color: var(--color-text); }
.pcr-riga-meta { font-size: .75rem; color: var(--color-text); opacity: .78; }
.pcr-riga-num { display: flex; flex-direction: column; align-items: flex-end; white-space: nowrap; }
.pcr-riga-num b {
    font-family: var(--font-serif); font-size: 1.0625rem; letter-spacing: -.01em;
    color: var(--color-green-dk); font-variant-numeric: tabular-nums;
}
.pcr-riga-num span { font-size: .75rem; color: var(--color-text); opacity: .78; font-variant-numeric: tabular-nums; }
.pcr-riga-dett { margin: 8px 0 0; font-size: .75rem; color: var(--color-text); opacity: .78; font-variant-numeric: tabular-nums; }

.pcr-avanzate {
    margin-top: 10px; padding: 5px 12px; border-radius: var(--radius-pill);
    border: 1px solid var(--pc-line2); background: #fff; color: var(--color-text);
    font: inherit; font-size: .78125rem; cursor: pointer; transition: background .15s, border-color .15s;
}
.pcr-avanzate:hover { background: var(--color-light); border-color: var(--color-primary); }
.pcr-avanzate:focus-visible { outline: 3px solid var(--color-green-dk); outline-offset: 2px; }

.pcr-pannello { margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--color-border); }
.pcr-campi { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px; }
.pcr-campo { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.pcr-campo-lbl { font-size: .75rem; color: var(--color-text); font-weight: 600; display: flex; flex-direction: column; }
.pcr-campo-hint { font-size: .71875rem; color: var(--color-text); opacity: .72; font-weight: 400; }
.pcr-campo-box {
    display: flex; align-items: center; gap: 6px; padding: 0 10px;
    border: 1px solid var(--pc-line2); border-radius: 10px; background: #fff;
    color: var(--color-text); transition: border-color .15s, box-shadow .15s;
}
.pcr-campo-box:focus-within { border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(42,93,80,.16); }
.pcr-campo-box input {
    width: 100%; min-width: 0; border: 0; outline: 0; background: transparent; font: inherit;
    font-size: .90625rem; color: var(--color-text); text-align: right; padding: 7px 0;
    font-variant-numeric: tabular-nums; -moz-appearance: textfield; appearance: textfield;
}
.pcr-campo-box input::-webkit-outer-spin-button,
.pcr-campo-box input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.pcr-mora { display: flex; align-items: center; gap: 12px; margin-top: 12px; font-size: .78125rem; color: var(--color-text); flex-wrap: wrap; }
.pcr-mora b { font-weight: 600; font-variant-numeric: tabular-nums; }
.pcr-mora input[type="range"] { flex: 1 1 140px; min-width: 120px; accent-color: var(--color-primary); }

.pcr-corr { margin-top: 14px; padding: 12px; border-radius: 10px; background: var(--color-light); display: flex; flex-direction: column; gap: 10px; }
.pcr-motivazione {
    width: 100%; border: 1px solid var(--pc-line2); border-radius: 10px; background: #fff;
    font: inherit; font-size: .84375rem; color: var(--color-text); padding: 8px 10px; resize: vertical;
    transition: border-color .15s, box-shadow .15s;
}
.pcr-motivazione:focus-visible { outline: 0; border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(42,93,80,.16); }
.pcr-corr-nota { margin: 0; font-size: .75rem; color: var(--color-text); opacity: .78; }
.pcr-togli {
    align-self: flex-start; padding: 4px 11px; border-radius: var(--radius-pill);
    border: 1px solid var(--pc-line2); background: #fff; color: var(--color-text);
    font: inherit; font-size: .75rem; cursor: pointer;
}
.pcr-togli:hover { border-color: var(--color-alert); color: var(--color-alert); }
.pcr-togli:focus-visible { outline: 3px solid var(--color-green-dk); outline-offset: 2px; }

/* Riepilogo per classe. */
.pcr-classi { list-style: none; margin: 4px 0 0; padding: 0; }
.pcr-cls-riga {
    display: grid; grid-template-columns: 1fr auto auto; align-items: baseline; gap: 6px 14px;
    padding: 9px 0; border-bottom: 1px solid var(--pc-cream2); font-size: .84375rem;
}
.pcr-cls-nome { color: var(--color-text); min-width: 0; }
.pcr-cls-num { font-size: .78125rem; color: var(--color-text); opacity: .78; font-variant-numeric: tabular-nums; }
.pcr-cls-num b { font-weight: 600; }
.pcr-cls-pct { font-weight: 600; color: var(--color-green-dk); font-variant-numeric: tabular-nums; min-width: 66px; text-align: right; }

/* Totali. */
.pcr-totali { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 16px; margin: 4px 0 0; }
.pcr-tot { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--pc-cream2); }
.pcr-tot dt { font-size: .78125rem; color: var(--color-text); opacity: .78; margin: 0; }
.pcr-tot dd { margin: 0; font-size: .84375rem; font-weight: 600; color: var(--color-text); font-variant-numeric: tabular-nums; }

/* Le sei quadrature. */
.pcr-quad-intro { margin: 10px 2px; font-size: .8125rem; color: var(--color-text); opacity: .78; }
.pcr-quad { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.pcr-spia {
    display: grid; grid-template-columns: 12px 1fr auto; align-items: start; gap: 10px;
    padding: 10px 12px; border-radius: 10px; border: 1px solid var(--color-border); background: #fff;
    transition: background .2s, border-color .2s;
}
.pcr-pallino { width: 10px; height: 10px; border-radius: 50%; margin-top: 4px; background: var(--color-green-md); }
.pcr-spia-corpo { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pcr-spia-corpo b { font-size: .84375rem; font-weight: 600; color: var(--color-text); }
.pcr-spia-testo { font-size: .78125rem; color: var(--color-text); opacity: .78; font-variant-numeric: tabular-nums; }
.pcr-spia-stato {
    font-size: .6875rem; font-weight: 600; letter-spacing: .04em;
    padding: 3px 9px; border-radius: var(--radius-pill);
    background: var(--pc-cream2); color: var(--color-text); white-space: nowrap;
}

.pcr-ok { border-color: var(--color-mist); background: var(--pc-spia-ok); }
.pcr-ok .pcr-pallino { background: var(--color-primary); }
.pcr-ok .pcr-spia-stato { background: var(--color-mist); color: var(--color-green-dk); }

.pcr-info { border-color: var(--pc-petrolio-soft); background: var(--pc-spia-info); }
.pcr-info .pcr-pallino { background: var(--color-petroleum); }
.pcr-info .pcr-spia-stato { background: var(--pc-petrolio-soft); color: var(--color-petroleum); }

.pcr-avviso { border-color: var(--color-alert-bg); background: var(--pc-spia-avviso); }
.pcr-avviso .pcr-pallino { background: var(--color-alert); }
.pcr-avviso .pcr-spia-stato { background: var(--color-alert-bg); color: var(--color-alert); }

.pcr-errore { border-color: var(--color-alert); background: var(--color-alert-bg); }
.pcr-errore .pcr-pallino { background: var(--color-alert); box-shadow: 0 0 0 3px rgba(181,66,35,.18); }
.pcr-errore .pcr-spia-corpo b { color: var(--color-alert); }
.pcr-errore .pcr-spia-stato { background: var(--color-alert); color: #fff; }

.pcr-omessa { background: var(--pc-paper); }

/* Chiusura. */
.pcr-bozza {
    margin: 16px 0 0; padding: 12px 14px; border-radius: 12px;
    background: var(--color-mist); color: var(--color-green-dk); font-size: .84375rem;
}
.pcr-bozza b { font-weight: 700; }
.pcr-didascalia { margin: 8px 2px 0; font-size: .78125rem; color: var(--color-text); opacity: .78; }

/* Esdebitazione dell'incapiente: nessuna massa da graduare. */
.pcr-stato {
    display: flex; flex-direction: column; gap: 6px; margin: 16px 0 4px;
    padding: 16px; border-radius: 12px; background: var(--color-light); border: 1px solid var(--color-border);
}
.pcr-stato b { font-family: var(--font-serif); font-size: 1rem; color: var(--color-text); letter-spacing: -.01em; }
.pcr-stato span { font-size: .84375rem; color: var(--color-text); opacity: .78; }

/* Una colonna sola sotto i 640 punti, e nessuno scorrimento orizzontale. */
@media (max-width: 640px) {
    .pcr-campi, .pcr-totali { grid-template-columns: 1fr; }
    .pcr-grado { grid-template-columns: 90px 1fr 58px; }
    .pcr-riga-top { flex-direction: column; align-items: flex-start; gap: 4px; }
    .pcr-riga-num { align-items: flex-start; }
    .pcr-cls-riga { grid-template-columns: 1fr auto; }
    .pcr-cls-num { grid-column: 1 / -1; }
    .pcr-spia { grid-template-columns: 12px 1fr; }
    .pcr-spia-stato { grid-column: 2; justify-self: start; }
}

@media (prefers-reduced-motion: reduce) {
    .pcr-fill, .pcr-spia, .pcr-avanzate, .pcr-campo-box, .pcr-motivazione { transition: none; }
}