/* ==========================================================================
   ROC UI — foglio di stile del portale (base, componenti, compatibilità)
   --------------------------------------------------------------------------
   Consuma SOLO i token di roc-tokens.css. Sezioni:
     1. Base e tipografia
     2. Componenti Bootstrap ritematizzati (bottoni, card, badge, form, tab…)
     3. Chrome del portale (navbar, footer)
     4. Componenti nostri (.roc-*)
     5. Regole ereditate dai vecchi style.css/dark-theme.css, portate ai token
     6. Ponti temporanei per partial non ancora ridisegnati (da togliere per fase)
     7. Mobile, touch, safe-area, stampa
   Regola: niente esadecimali qui dentro se non in un token; niente !important
   se non per battere un !important di Bootstrap o un attributo style inline.
   ========================================================================== */

/* ==========================================================================
   1. BASE E TIPOGRAFIA
   ========================================================================== */
html {
    -webkit-text-size-adjust: 100%;
    scrollbar-color: var(--roc-border-strong) var(--roc-surface);
}
body {
    background-color: var(--roc-bg);
    /* Un alone rosso in alto, appena percettibile: dà profondità senza pesare. */
    background-image: radial-gradient(1100px 420px at 50% -8%, var(--roc-glow), transparent 62%);
    background-repeat: no-repeat;
    color: var(--roc-text);
    font-family: var(--roc-font-sans);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
}
body > .container,
body > .container-fluid,
body > main {
    flex: 1 0 auto;
}
::selection { background: rgba(130, 0, 0, .65); color: #fff; }
:focus-visible { outline: 2px solid var(--roc-gold-500); outline-offset: 2px; }
img { max-width: 100%; }

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    color: var(--roc-text-strong);
    overflow-wrap: break-word;
}
/* I titoli di primo, secondo e terzo livello portano il carattere del logo. */
h1, h2, h3, .h1, .h2, .h3 {
    font-family: var(--roc-font-display);
    font-weight: 600;
    letter-spacing: .02em;
    line-height: 1.2;
}
h1, .h1 { font-size: var(--roc-h1); }
h2, .h2 { font-size: var(--roc-h2); }
h3, .h3 { font-size: var(--roc-h3); }
h4, .h4 { font-size: var(--roc-h4); font-weight: 600; }
h5, .h5 { font-size: var(--roc-h5); font-weight: 600; }
h6, .h6 { font-size: var(--roc-h6); font-weight: 600; }
.display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
    font-family: var(--roc-font-display);
    font-weight: 600;
    letter-spacing: .02em;
}
.lead { color: var(--roc-text-2); font-weight: 400; }
small, .small { color: inherit; }
a { color: var(--roc-link); text-decoration: none; }
a:hover { color: var(--roc-link-hover); text-decoration: underline; text-underline-offset: .15em; }
a.btn:hover, a.nav-link:hover, a.dropdown-item:hover, a.card:hover, a.badge:hover, a.page-link:hover,
a.list-group-item:hover, a.text-decoration-none:hover { text-decoration: none; }
hr { border-color: var(--roc-border); opacity: 1; }
code { color: var(--roc-gold-300); font-size: .9em; }
pre {
    background: var(--roc-bg-deep);
    border: 1px solid var(--roc-border);
    border-radius: var(--roc-r);
    padding: .75rem 1rem;
    color: var(--roc-text-2);
}
kbd { background: var(--roc-surface-3); color: var(--roc-text-strong); border-radius: 4px; border: 1px solid var(--roc-border-strong); }
mark { padding: 0 .15em; border-radius: 2px; }
blockquote {
    border-left: 3px solid var(--roc-gold-600);
    padding-left: 1rem;
    color: var(--roc-text-2);
}
table, .badge, .roc-num, td, th {
    font-variant-numeric: tabular-nums;
}
/* I «.text-*» usano lo stesso valore dei riempimenti: per testo su scuro serve la
   versione chiara. Bootstrap ha lo stesso problema e la risolve con -emphasis. */
.text-primary { color: var(--roc-primary-fg) !important; }
.text-secondary { color: var(--roc-text-muted) !important; }
.text-success { color: var(--roc-success-fg) !important; }
.text-info { color: var(--roc-info-fg) !important; }
.text-warning { color: var(--roc-warning-fg) !important; }
.text-danger { color: var(--roc-danger-fg) !important; }
.link-primary { color: var(--roc-primary-fg) !important; }
.bg-warning { color: var(--roc-n-50); }
.bg-warning.text-white { color: #fff; }
.bg-light { color: var(--roc-n-50); }
.bg-card { background-color: var(--roc-surface); }


/* Nel tema chiaro «text-white/text-light» — usati ovunque come ENFASI su fondo scuro —
   diventano il testo forte; tornano bianchi solo dentro i contesti che restano scuri
   (riempimenti colorati, overlay con gradiente, pulsanti, badge, navbar, footer). */
[data-bs-theme="light"] :is(.text-white, .text-light, .text-white-50) { color: var(--roc-text-strong) !important; }
[data-bs-theme="light"] :is(.bg-dark, .bg-black, .bg-primary, .bg-secondary, .bg-success, .bg-danger, .bg-info, .bg-warning,
    .text-bg-dark, .text-bg-primary, .btn, .badge, .roc-navbar, .roc-footer, .table-dark, .progress-bar,
    [style*="gradient"], [style*="rgba(0, 0, 0"], [style*="rgba(0,0,0"], [style*="background:#1"], [style*="background-color:#1"], [style*="background:#2"], [style*="background-color:#2"])
    :is(.text-white, .text-light) { color: #fff !important; }
[data-bs-theme="light"] :is(.bg-dark, .bg-black, .bg-primary, .bg-secondary, .bg-success, .bg-danger, .bg-info, .btn, .roc-navbar, .roc-footer, .table-dark, [style*="gradient"]) .text-white-50 { color: rgba(255, 255, 255, .6) !important; }
/* …e quando le due classi stanno sullo STESSO elemento (es. card-header bg-dark text-white). */
[data-bs-theme="light"] :is(.bg-dark, .bg-black, .bg-primary, .bg-secondary, .bg-success, .bg-danger, .bg-info, .bg-warning, .btn, .badge, .table-dark, .progress-bar):is(.text-white, .text-light) { color: #fff !important; }
[data-bs-theme="light"] :is(.bg-dark, .bg-black, .bg-primary, .bg-secondary, .bg-success, .bg-danger, .bg-info):is(.text-white, .text-light) :is(small, .small, .text-muted, .form-text) { color: rgba(255, 255, 255, .75) !important; }

/* ==========================================================================
   2. COMPONENTI BOOTSTRAP RITEMATIZZATI
   ========================================================================== */

/* ---- Bottoni: un peso solo, forme morbide, outline neutri --------------- */
.btn {
    --bs-btn-border-radius: var(--roc-r);
    --bs-btn-font-weight: 500;
    --bs-btn-font-size: .925rem;
    --bs-btn-padding-x: .9rem;
    --bs-btn-padding-y: .45rem;
    --bs-btn-focus-box-shadow: 0 0 0 .2rem var(--roc-focus);
    transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
}
.btn-sm, .btn-group-sm > .btn {
    --bs-btn-border-radius: var(--roc-r-sm);
    --bs-btn-font-size: .8rem;
    --bs-btn-padding-x: .65rem;
    --bs-btn-padding-y: .32rem;
}
.btn-lg, .btn-group-lg > .btn {
    --bs-btn-border-radius: var(--roc-r-lg);
    --bs-btn-font-size: 1.05rem;
    --bs-btn-padding-x: 1.2rem;
    --bs-btn-padding-y: .6rem;
}
.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--roc-primary);
    --bs-btn-border-color: var(--roc-primary);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--roc-primary-hover);
    --bs-btn-hover-border-color: var(--roc-primary-hover);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--roc-primary-active);
    --bs-btn-active-border-color: var(--roc-primary-active);
    --bs-btn-disabled-color: rgba(255, 255, 255, .75);
    --bs-btn-disabled-bg: var(--roc-primary);
    --bs-btn-disabled-border-color: var(--roc-primary);
    --bs-btn-focus-shadow-rgb: var(--roc-primary-rgb);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
}
.btn-secondary {
    --bs-btn-color: var(--roc-text-strong);
    --bs-btn-bg: var(--roc-secondary-bg);
    --bs-btn-border-color: var(--roc-secondary-bg);
    --bs-btn-hover-color: var(--roc-text-strong);
    --bs-btn-hover-bg: var(--roc-n-500);
    --bs-btn-hover-border-color: var(--roc-n-500);
    --bs-btn-active-color: var(--roc-text-strong);
    --bs-btn-active-bg: var(--roc-n-300);
    --bs-btn-active-border-color: var(--roc-n-300);
    --bs-btn-disabled-color: var(--roc-text-muted);
    --bs-btn-disabled-bg: var(--roc-n-300);
    --bs-btn-disabled-border-color: var(--roc-n-300);
    --bs-btn-focus-shadow-rgb: var(--roc-secondary-rgb);
}
.btn-success {
    --bs-btn-color: #fff; --bs-btn-bg: var(--roc-success-bg); --bs-btn-border-color: var(--roc-success-bg);
    --bs-btn-hover-color: #fff; --bs-btn-hover-bg: color-mix(in srgb, var(--roc-success-bg) 85%, white); --bs-btn-hover-border-color: color-mix(in srgb, var(--roc-success-bg) 85%, white);
    --bs-btn-active-color: #fff; --bs-btn-active-bg: color-mix(in srgb, var(--roc-success-bg) 85%, black); --bs-btn-active-border-color: color-mix(in srgb, var(--roc-success-bg) 85%, black);
    --bs-btn-disabled-color: rgba(255,255,255,.75); --bs-btn-disabled-bg: var(--roc-success-bg); --bs-btn-disabled-border-color: var(--roc-success-bg);
    --bs-btn-focus-shadow-rgb: var(--roc-success-rgb);
}
.btn-danger {
    --bs-btn-color: #fff; --bs-btn-bg: var(--roc-danger-bg); --bs-btn-border-color: var(--roc-danger-bg);
    --bs-btn-hover-color: #fff; --bs-btn-hover-bg: color-mix(in srgb, var(--roc-danger-bg) 85%, white); --bs-btn-hover-border-color: color-mix(in srgb, var(--roc-danger-bg) 85%, white);
    --bs-btn-active-color: #fff; --bs-btn-active-bg: color-mix(in srgb, var(--roc-danger-bg) 85%, black); --bs-btn-active-border-color: color-mix(in srgb, var(--roc-danger-bg) 85%, black);
    --bs-btn-disabled-color: rgba(255,255,255,.75); --bs-btn-disabled-bg: var(--roc-danger-bg); --bs-btn-disabled-border-color: var(--roc-danger-bg);
    --bs-btn-focus-shadow-rgb: var(--roc-danger-rgb);
}
.btn-warning {
    --bs-btn-color: var(--roc-n-50); --bs-btn-bg: var(--roc-warning-bg); --bs-btn-border-color: var(--roc-warning-bg);
    --bs-btn-hover-color: var(--roc-n-50); --bs-btn-hover-bg: color-mix(in srgb, var(--roc-warning-bg) 85%, white); --bs-btn-hover-border-color: color-mix(in srgb, var(--roc-warning-bg) 85%, white);
    --bs-btn-active-color: var(--roc-n-50); --bs-btn-active-bg: color-mix(in srgb, var(--roc-warning-bg) 85%, black); --bs-btn-active-border-color: color-mix(in srgb, var(--roc-warning-bg) 85%, black);
    --bs-btn-disabled-color: rgba(0,0,0,.6); --bs-btn-disabled-bg: var(--roc-warning-bg); --bs-btn-disabled-border-color: var(--roc-warning-bg);
    --bs-btn-focus-shadow-rgb: var(--roc-warning-rgb);
}
.btn-info {
    --bs-btn-color: #fff; --bs-btn-bg: var(--roc-info-bg); --bs-btn-border-color: var(--roc-info-bg);
    --bs-btn-hover-color: #fff; --bs-btn-hover-bg: color-mix(in srgb, var(--roc-info-bg) 85%, white); --bs-btn-hover-border-color: color-mix(in srgb, var(--roc-info-bg) 85%, white);
    --bs-btn-active-color: #fff; --bs-btn-active-bg: color-mix(in srgb, var(--roc-info-bg) 85%, black); --bs-btn-active-border-color: color-mix(in srgb, var(--roc-info-bg) 85%, black);
    --bs-btn-disabled-color: rgba(255,255,255,.75); --bs-btn-disabled-bg: var(--roc-info-bg); --bs-btn-disabled-border-color: var(--roc-info-bg);
    --bs-btn-focus-shadow-rgb: var(--roc-info-rgb);
}
.btn-light {
    --bs-btn-color: var(--roc-n-50); --bs-btn-bg: var(--roc-n-900); --bs-btn-border-color: var(--roc-n-900);
    --bs-btn-hover-color: var(--roc-n-0); --bs-btn-hover-bg: var(--roc-n-950); --bs-btn-hover-border-color: var(--roc-n-950);
    --bs-btn-active-color: var(--roc-n-0); --bs-btn-active-bg: var(--roc-n-800); --bs-btn-active-border-color: var(--roc-n-800);
    --bs-btn-disabled-color: var(--roc-n-500); --bs-btn-disabled-bg: var(--roc-n-800); --bs-btn-disabled-border-color: var(--roc-n-800);
    --bs-btn-focus-shadow-rgb: 233, 230, 223;
}
.btn-dark {
    --bs-btn-color: var(--roc-n-900); --bs-btn-bg: var(--roc-n-250); --bs-btn-border-color: var(--roc-n-300);
    --bs-btn-hover-color: var(--roc-n-950); --bs-btn-hover-bg: var(--roc-n-300); --bs-btn-hover-border-color: var(--roc-n-400);
    --bs-btn-active-color: var(--roc-n-950); --bs-btn-active-bg: var(--roc-n-200); --bs-btn-active-border-color: var(--roc-n-300);
    --bs-btn-disabled-color: var(--roc-n-600); --bs-btn-disabled-bg: var(--roc-n-200); --bs-btn-disabled-border-color: var(--roc-n-300);
    --bs-btn-focus-shadow-rgb: 69, 74, 85;
}
/* Outline: bordo NEUTRO per tutte le varianti, solo il testo porta il colore.
   È ciò che spegne l'arcobaleno delle barre di pulsanti. Al passaggio si tinge;
   primario e pericolo si riempiono, perché lì l'azione è netta. */
[class*="btn-outline-"] {
    --bs-btn-border-color: var(--roc-border-strong);
    --bs-btn-bg: transparent;
    --bs-btn-disabled-color: var(--roc-text-faint);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--roc-border);
}
.btn-outline-primary {
    --bs-btn-color: var(--roc-primary-fg);
    --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--roc-primary); --bs-btn-hover-border-color: var(--roc-primary);
    --bs-btn-active-color: #fff; --bs-btn-active-bg: var(--roc-primary-active); --bs-btn-active-border-color: var(--roc-primary-active);
    --bs-btn-focus-shadow-rgb: var(--roc-primary-rgb);
}
.btn-outline-danger {
    --bs-btn-color: var(--roc-danger-fg);
    --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--roc-danger-bg); --bs-btn-hover-border-color: var(--roc-danger-bg);
    --bs-btn-active-color: #fff; --bs-btn-active-bg: var(--roc-danger-bg); --bs-btn-active-border-color: var(--roc-danger-bg);
    --bs-btn-focus-shadow-rgb: var(--roc-danger-rgb);
}
.btn-outline-secondary {
    --bs-btn-color: var(--roc-text-2);
    --bs-btn-hover-color: var(--roc-text-strong); --bs-btn-hover-bg: var(--roc-surface-3); --bs-btn-hover-border-color: var(--roc-n-500);
    --bs-btn-active-color: var(--roc-text-strong); --bs-btn-active-bg: var(--roc-n-300); --bs-btn-active-border-color: var(--roc-n-500);
    --bs-btn-focus-shadow-rgb: var(--roc-secondary-rgb);
}
.btn-outline-success {
    --bs-btn-color: var(--roc-success-fg);
    --bs-btn-hover-color: var(--roc-success-fg); --bs-btn-hover-bg: color-mix(in srgb, var(--roc-success-bg) 18%, transparent); --bs-btn-hover-border-color: var(--roc-success-bg);
    --bs-btn-active-color: #fff; --bs-btn-active-bg: var(--roc-success-bg); --bs-btn-active-border-color: var(--roc-success-bg);
    --bs-btn-focus-shadow-rgb: var(--roc-success-rgb);
}
.btn-outline-info {
    --bs-btn-color: var(--roc-info-fg);
    --bs-btn-hover-color: var(--roc-info-fg); --bs-btn-hover-bg: color-mix(in srgb, var(--roc-info-bg) 18%, transparent); --bs-btn-hover-border-color: var(--roc-info-bg);
    --bs-btn-active-color: #fff; --bs-btn-active-bg: var(--roc-info-bg); --bs-btn-active-border-color: var(--roc-info-bg);
    --bs-btn-focus-shadow-rgb: var(--roc-info-rgb);
}
.btn-outline-warning {
    --bs-btn-color: var(--roc-warning-fg);
    --bs-btn-hover-color: var(--roc-warning-fg); --bs-btn-hover-bg: color-mix(in srgb, var(--roc-warning-bg) 18%, transparent); --bs-btn-hover-border-color: var(--roc-warning-bg);
    --bs-btn-active-color: var(--roc-n-50); --bs-btn-active-bg: var(--roc-warning-bg); --bs-btn-active-border-color: var(--roc-warning-bg);
    --bs-btn-focus-shadow-rgb: var(--roc-warning-rgb);
}
.btn-outline-light {
    --bs-btn-color: var(--roc-n-900);
    --bs-btn-hover-color: var(--roc-n-950); --bs-btn-hover-bg: rgba(255, 255, 255, .1); --bs-btn-hover-border-color: var(--roc-n-600);
    --bs-btn-active-color: var(--roc-n-50); --bs-btn-active-bg: var(--roc-n-900); --bs-btn-active-border-color: var(--roc-n-900);
    --bs-btn-focus-shadow-rgb: 233, 230, 223;
}
.btn-outline-dark {
    --bs-btn-color: var(--roc-text-2);
    --bs-btn-hover-color: var(--roc-text-strong); --bs-btn-hover-bg: var(--roc-surface-3); --bs-btn-hover-border-color: var(--roc-n-500);
    --bs-btn-active-color: var(--roc-text-strong); --bs-btn-active-bg: var(--roc-n-300); --bs-btn-active-border-color: var(--roc-n-500);
    --bs-btn-focus-shadow-rgb: 69, 74, 85;
}
.btn-link { --bs-btn-color: var(--roc-link); --bs-btn-hover-color: var(--roc-link-hover); --bs-btn-font-weight: 500; }
.btn .fa, .btn .fas, .btn .far, .btn .fab { line-height: 1; }

/* ---- Card ----------------------------------------------------------------- */
.card {
    --bs-card-bg: var(--roc-surface);
    --bs-card-color: var(--roc-text);
    --bs-card-border-color: var(--roc-border);
    --bs-card-border-radius: var(--roc-r-lg);
    --bs-card-inner-border-radius: calc(var(--roc-r-lg) - 1px);
    --bs-card-cap-bg: var(--roc-surface-2);
    --bs-card-cap-color: var(--roc-text-strong);
    --bs-card-cap-padding-y: .7rem;
    --bs-card-cap-padding-x: 1.1rem;
    --bs-card-spacer-y: 1.1rem;
    --bs-card-spacer-x: 1.1rem;
    --bs-card-title-color: var(--roc-text-strong);
    --bs-card-subtitle-color: var(--roc-text-muted);
    box-shadow: var(--roc-shadow);
    margin-bottom: 1rem; /* come il vecchio tema: molti template contano su questo spazio */
}
.card-header {
    font-weight: 600;
    border-bottom-color: var(--roc-border);
}
.card-header > h1, .card-header > h2, .card-header > h3,
.card-header > h4, .card-header > h5, .card-header > h6 { margin: 0; }
.card-header.bg-dark, .card-header.bg-secondary, .card-header.bg-primary,
.card-header.bg-success, .card-header.bg-danger, .card-header.bg-warning, .card-header.bg-info {
    border-bottom-color: transparent;
}
.card-footer { border-top-color: var(--roc-border); background: var(--roc-surface-2); }
.card.border-primary { border-color: var(--roc-primary-icon) !important; }
.card.border-success { border-color: var(--roc-success-bg) !important; }
.card.border-danger { border-color: var(--roc-danger-bg) !important; }
.card.border-warning { border-color: var(--roc-warning-bg) !important; }
.card.border-info { border-color: var(--roc-info-bg) !important; }

/* ---- Badge ---------------------------------------------------------------- */
.badge {
    --bs-badge-padding-x: .5em;
    --bs-badge-padding-y: .32em;
    --bs-badge-font-size: .72em;
    --bs-badge-font-weight: 600;
    --bs-badge-border-radius: var(--roc-r-sm);
    letter-spacing: .01em;
    vertical-align: middle;
    line-height: 1.15;
}
.badge.rounded-pill { --bs-badge-border-radius: var(--roc-r-pill); }
/* Un badge senza colore era rosso nel vecchio tema: resta così. */
.badge:not([class*=" bg-"]):not([class^="bg-"]):not([class*="text-bg-"]) {
    background-color: var(--roc-primary);
    color: #fff;
}
.badge.bg-warning, .badge.text-bg-warning { color: var(--roc-n-50); }
.badge.bg-light, .badge.text-bg-light { color: var(--roc-n-50); }

/* ---- Alert ---------------------------------------------------------------- */
.alert {
    --bs-alert-border-radius: var(--roc-r-lg);
    --bs-alert-padding-x: 1rem;
    --bs-alert-padding-y: .8rem;
}
.alert .alert-link { font-weight: 600; }
.alert-dark, .alert-secondary { --bs-alert-color: var(--roc-text-2); }

/* ---- Form ----------------------------------------------------------------- */
.form-control, .form-select {
    background-color: var(--roc-input-bg);
    border: 1px solid var(--roc-border-strong);
    border-radius: var(--roc-r);
    color: var(--roc-text);
    transition: border-color .15s ease, box-shadow .15s ease;
}
.form-control:focus, .form-select:focus {
    background-color: var(--roc-input-bg);
    border-color: var(--roc-primary-icon);
    color: var(--roc-text-strong);
    box-shadow: 0 0 0 .2rem rgba(130, 0, 0, .3);
}
.form-control::placeholder, ::placeholder { color: var(--roc-text-faint); opacity: 1; }
.form-control:disabled, .form-select:disabled { background-color: var(--roc-surface-2); color: var(--roc-text-muted); }
.form-control-plaintext { color: var(--roc-text); }
.form-control-sm, .form-select-sm { border-radius: var(--roc-r-sm); }
.form-label { font-weight: 500; color: var(--roc-text-2); font-size: .9rem; margin-bottom: .35rem; }
.form-text { color: var(--roc-text-muted); }
.form-check-input {
    background-color: var(--roc-input-bg);
    border-color: var(--roc-border-strong);
}
.form-check-input:checked { background-color: var(--roc-primary); border-color: var(--roc-primary); }
.form-check-input:focus { border-color: var(--roc-primary-icon); box-shadow: 0 0 0 .2rem rgba(130, 0, 0, .3); }
.form-check-input:indeterminate { background-color: var(--roc-primary); border-color: var(--roc-primary); }
.input-group-text {
    background-color: var(--roc-surface-2);
    border-color: var(--roc-border-strong);
    color: var(--roc-text-2);
    border-radius: var(--roc-r);
}
.form-range::-webkit-slider-thumb { background: var(--roc-primary); }
.form-range::-moz-range-thumb { background: var(--roc-primary); }
.form-floating > label { color: var(--roc-text-muted); }

/* ---- Tab e pillole ------------------------------------------------------- */
.nav-tabs {
    --bs-nav-tabs-border-color: var(--roc-border);
    --bs-nav-tabs-link-active-bg: transparent;
    --bs-nav-tabs-link-active-color: var(--roc-text-strong);
    --bs-nav-tabs-link-active-border-color: transparent transparent var(--roc-primary-icon);
    --bs-nav-tabs-link-hover-border-color: transparent transparent var(--roc-border-strong);
    --bs-nav-link-color: var(--roc-text-muted);
    --bs-nav-link-hover-color: var(--roc-text);
    --bs-nav-link-font-weight: 500;
    gap: .15rem;
}
.nav-tabs .nav-link {
    border-width: 0 0 2px;
    border-radius: 0;
    padding: .55rem .85rem;
    margin-bottom: -1px;
}
.nav-pills {
    --bs-nav-pills-border-radius: var(--roc-r);
    --bs-nav-pills-link-active-bg: var(--roc-primary);
    --bs-nav-pills-link-active-color: #fff;
    --bs-nav-link-color: var(--roc-text-2);
    --bs-nav-link-hover-color: var(--roc-text-strong);
    gap: .25rem;
}
.nav-pills .nav-link:not(.active):hover { background: var(--roc-surface-3); }
.nav-underline { --bs-nav-underline-link-active-color: var(--roc-text-strong); --bs-nav-link-color: var(--roc-text-muted); }

/* ---- Tabelle -------------------------------------------------------------- */
.table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--roc-text);
    --bs-table-border-color: var(--roc-border);
    --bs-table-striped-bg: rgba(255, 255, 255, .025);
    --bs-table-striped-color: var(--roc-text);
    --bs-table-hover-bg: rgba(255, 255, 255, .045);
    --bs-table-hover-color: var(--roc-text-strong);
    --bs-table-active-bg: rgba(130, 0, 0, .18);
    vertical-align: middle;
}
.table > thead th, .table > thead td {
    font-size: .76rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--roc-text-muted);
    border-bottom: 1px solid var(--roc-border-strong);
    white-space: nowrap;
}
.table-dark {
    --bs-table-bg: var(--roc-surface-2);
    --bs-table-color: var(--roc-text);
    --bs-table-border-color: var(--roc-border-strong);
    --bs-table-striped-bg: rgba(255, 255, 255, .03);
    --bs-table-hover-bg: rgba(255, 255, 255, .06);
}
.table-light { --bs-table-bg: var(--roc-n-800); --bs-table-color: var(--roc-n-50); }

/* ---- Tendine, modali, pannelli, elenchi ---------------------------------- */
.dropdown-menu {
    --bs-dropdown-bg: var(--roc-surface-2);
    --bs-dropdown-color: var(--roc-text);
    --bs-dropdown-border-color: var(--roc-border-strong);
    --bs-dropdown-border-radius: var(--roc-r-lg);
    --bs-dropdown-link-color: var(--roc-text);
    --bs-dropdown-link-hover-color: var(--roc-text-strong);
    --bs-dropdown-link-hover-bg: var(--roc-surface-3);
    --bs-dropdown-link-active-color: #fff;
    --bs-dropdown-link-active-bg: color-mix(in srgb, var(--roc-primary) 45%, var(--roc-surface-3));
    --bs-dropdown-link-disabled-color: var(--roc-text-faint);
    --bs-dropdown-divider-bg: var(--roc-border);
    --bs-dropdown-header-color: var(--roc-text-muted);
    --bs-dropdown-padding-y: .4rem;
    --bs-dropdown-item-padding-y: .45rem;
    --bs-dropdown-item-padding-x: .85rem;
    --bs-dropdown-font-size: .925rem;
    box-shadow: var(--roc-shadow-lg);
}
.dropdown-item { border-radius: var(--roc-r-sm); width: calc(100% - .6rem); margin-inline: .3rem; }
.dropdown-header { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; }
.modal {
    --bs-modal-bg: var(--roc-surface);
    --bs-modal-color: var(--roc-text);
    --bs-modal-border-color: var(--roc-border-strong);
    --bs-modal-border-radius: var(--roc-r-xl);
    --bs-modal-header-border-color: var(--roc-border);
    --bs-modal-footer-border-color: var(--roc-border);
    --bs-modal-box-shadow: var(--roc-shadow-lg);
}
.modal-backdrop { --bs-backdrop-opacity: .7; }
.offcanvas, .offcanvas-lg, .offcanvas-md, .offcanvas-sm, .offcanvas-xl, .offcanvas-xxl {
    --bs-offcanvas-bg: var(--roc-surface);
    --bs-offcanvas-color: var(--roc-text);
    --bs-offcanvas-border-color: var(--roc-border-strong);
}
.list-group {
    --bs-list-group-bg: var(--roc-surface);
    --bs-list-group-color: var(--roc-text);
    --bs-list-group-border-color: var(--roc-border);
    --bs-list-group-border-radius: var(--roc-r);
    --bs-list-group-action-color: var(--roc-text);
    --bs-list-group-action-hover-color: var(--roc-text-strong);
    --bs-list-group-action-hover-bg: var(--roc-surface-2);
    --bs-list-group-action-active-bg: var(--roc-surface-3);
    --bs-list-group-active-bg: var(--roc-primary);
    --bs-list-group-active-border-color: var(--roc-primary);
    --bs-list-group-disabled-color: var(--roc-text-faint);
    --bs-list-group-disabled-bg: var(--roc-surface);
}
.list-group-item.bg-transparent { color: var(--roc-text); border-color: var(--roc-border); }
.accordion {
    --bs-accordion-bg: var(--roc-surface);
    --bs-accordion-color: var(--roc-text);
    --bs-accordion-border-color: var(--roc-border);
    --bs-accordion-border-radius: var(--roc-r-lg);
    --bs-accordion-inner-border-radius: calc(var(--roc-r-lg) - 1px);
    --bs-accordion-btn-bg: var(--roc-surface-2);
    --bs-accordion-btn-color: var(--roc-text);
    --bs-accordion-active-bg: color-mix(in srgb, var(--roc-primary) 20%, var(--roc-surface-2));
    --bs-accordion-active-color: var(--roc-text-strong);
    --bs-accordion-btn-focus-box-shadow: 0 0 0 .2rem var(--roc-focus);
}
.progress {
    --bs-progress-bg: var(--roc-surface-3);
    --bs-progress-bar-bg: var(--roc-primary);
    --bs-progress-border-radius: var(--roc-r-pill);
}
.pagination {
    --bs-pagination-bg: var(--roc-surface);
    --bs-pagination-color: var(--roc-text-2);
    --bs-pagination-border-color: var(--roc-border);
    --bs-pagination-border-radius: var(--roc-r);
    --bs-pagination-hover-bg: var(--roc-surface-2);
    --bs-pagination-hover-color: var(--roc-text-strong);
    --bs-pagination-hover-border-color: var(--roc-border-strong);
    --bs-pagination-focus-bg: var(--roc-surface-2);
    --bs-pagination-focus-color: var(--roc-text-strong);
    --bs-pagination-focus-box-shadow: 0 0 0 .2rem var(--roc-focus);
    --bs-pagination-active-bg: var(--roc-primary);
    --bs-pagination-active-border-color: var(--roc-primary);
    --bs-pagination-disabled-bg: var(--roc-surface);
    --bs-pagination-disabled-color: var(--roc-text-faint);
    --bs-pagination-disabled-border-color: var(--roc-border);
}
.breadcrumb {
    --bs-breadcrumb-divider-color: var(--roc-text-faint);
    --bs-breadcrumb-item-active-color: var(--roc-text-2);
    font-size: .85rem;
}
.breadcrumb a { color: var(--roc-text-muted); }
.breadcrumb a:hover { color: var(--roc-text); }
.tooltip { --bs-tooltip-bg: var(--roc-tooltip-bg); --bs-tooltip-color: var(--roc-tooltip-fg); --bs-tooltip-border-radius: var(--roc-r-sm); }
.popover {
    --bs-popover-bg: var(--roc-surface-2);
    --bs-popover-border-color: var(--roc-border-strong);
    --bs-popover-body-color: var(--roc-text);
    --bs-popover-header-bg: var(--roc-surface-3);
    --bs-popover-header-color: var(--roc-text-strong);
    --bs-popover-border-radius: var(--roc-r-lg);
}
.toast {
    --bs-toast-bg: var(--roc-surface-2);
    --bs-toast-color: var(--roc-text);
    --bs-toast-border-color: var(--roc-border-strong);
    --bs-toast-header-bg: var(--roc-surface-3);
    --bs-toast-header-color: var(--roc-text-strong);
    --bs-toast-border-radius: var(--roc-r-lg);
}
.spinner-border, .spinner-grow { color: var(--roc-primary-fg); }

/* ==========================================================================
   3. CHROME DEL PORTALE: navbar e footer
   ========================================================================== */
.roc-navbar {
    --bs-navbar-padding-y: .5rem;
    --bs-navbar-color: var(--roc-n-800);
    --bs-navbar-hover-color: var(--roc-n-950);
    --bs-navbar-active-color: var(--roc-n-950);
    --bs-navbar-brand-color: var(--roc-n-950);
    --bs-navbar-brand-hover-color: var(--roc-n-950);
    --bs-navbar-disabled-color: var(--roc-n-600);
    --bs-navbar-brand-padding-y: .1rem;
    --bs-navbar-toggler-border-color: var(--roc-n-400);
    --bs-navbar-toggler-focus-width: .2rem;
    --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28203, 204, 210, 0.9%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
    --bs-navbar-nav-link-padding-x: .7rem;
    color-scheme: dark; /* chrome scuro in entrambi i temi */
    background: var(--roc-n-100);
    border-bottom: 1px solid var(--roc-n-300);
    padding-top: calc(var(--bs-navbar-padding-y) + env(safe-area-inset-top, 0px));
    min-height: var(--roc-nav-h);
}
.roc-navbar .navbar-toggler { border-radius: var(--roc-r-sm); padding: .3rem .5rem; }
.roc-navbar .navbar-toggler:focus { box-shadow: 0 0 0 .2rem var(--roc-focus); }
.roc-navbar .nav-link {
    font-weight: 500;
    font-size: .92rem;
    border-radius: var(--roc-r-sm);
    padding-top: .42rem;
    padding-bottom: .42rem;
    transition: background-color .15s ease, color .15s ease;
}
.roc-navbar .nav-link:hover, .roc-navbar .nav-link:focus-visible { background: var(--roc-n-250); text-decoration: none; }
.roc-navbar .nav-link.active, .roc-navbar .nav-link.show { background: var(--roc-n-250); color: var(--roc-n-950); }
.roc-navbar .nav-link.active { box-shadow: inset 0 -2px 0 var(--roc-red-400); }
.roc-navbar .nav-link .fa-solid, .roc-navbar .nav-link .fas, .roc-navbar .nav-link .far { opacity: .85; }
.roc-navbar .nav-link.text-warning { color: var(--roc-gold-400) !important; }
.roc-navbar .nav-link.text-info { color: #6aa9e8 !important; }
/* Le tendine della navbar restano scure come lei, in entrambi i temi. */
.roc-navbar .dropdown-menu {
    margin-top: .35rem; min-width: 14rem;
    --bs-dropdown-bg: var(--roc-n-200); --bs-dropdown-color: var(--roc-n-900); --bs-dropdown-border-color: var(--roc-n-400);
    --bs-dropdown-link-color: var(--roc-n-900); --bs-dropdown-link-hover-color: var(--roc-n-950); --bs-dropdown-link-hover-bg: var(--roc-n-250);
    --bs-dropdown-divider-bg: var(--roc-n-300); --bs-dropdown-header-color: var(--roc-n-700);
    --bs-dropdown-link-active-bg: color-mix(in srgb, var(--roc-red-700) 45%, var(--roc-n-250));
}
.roc-navbar .dropdown-item.text-warning { color: var(--roc-gold-400) !important; }
.roc-navbar .dropdown-item.text-info { color: #6aa9e8 !important; }
.roc-navbar .dropdown-item.text-danger { color: #f0716c !important; }
.roc-navbar .dropdown-item.text-success { color: #5fc47f !important; }
.roc-navbar .dropdown-item.text-primary { color: var(--roc-red-300) !important; }
.roc-navbar .dropdown-item.text-muted { color: var(--roc-n-700) !important; }
.roc-navbar .badge { font-size: .62rem; }
/* Interruttore del tema: sole nel tema scuro (porta al chiaro), luna nel chiaro. */
.roc-theme-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; border-radius: var(--roc-r-sm);
    border: 1px solid transparent; background: transparent; color: var(--roc-n-800);
    cursor: pointer; transition: background-color .15s ease, color .15s ease;
}
.roc-theme-toggle:hover { background: var(--roc-n-250); color: var(--roc-n-950); }
.roc-theme-toggle:focus-visible { outline: 2px solid var(--roc-gold-500); outline-offset: 2px; }
.roc-theme-toggle .roc-theme-moon { display: none; }
[data-bs-theme="light"] .roc-theme-toggle .roc-theme-moon { display: inline; }
[data-bs-theme="light"] .roc-theme-toggle .roc-theme-sun { display: none; }
.roc-navbar .btn-primary.btn-sm { --bs-btn-padding-y: .4rem; }
/* Il marchio: d20 del logo + nome nel carattere dei titoli. Nitido a ogni densità. */
.roc-brand {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    font-family: var(--roc-font-brand);
    font-weight: 400;
    font-size: 1.35rem;
    letter-spacing: .01em;
    color: var(--roc-n-950);
    white-space: nowrap;
}
.roc-brand:hover { color: var(--roc-n-950); text-decoration: none; }
.roc-brand-mark { height: 34px; width: auto; display: block; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .5)); }
/* Il wordmark com'è nella grafica originale: RULE of COOL, maiuscolo e compatto, con
   «of» piccolo e minuscolo dello stesso colore. */
.roc-brand-name { line-height: 1; padding-top: .1em; text-transform: uppercase; }
.roc-brand-of { text-transform: lowercase; font-size: .62em; margin: 0 .1em; letter-spacing: 0; }
.roc-beta {
    display: inline-block;
    font-family: var(--roc-font-sans);
    font-size: .58rem;
    font-weight: 700;
    letter-spacing: .12em;
    line-height: 1;
    color: var(--roc-gold-400);
    border: 1px solid color-mix(in srgb, var(--roc-gold-500) 60%, transparent);
    border-radius: 4px;
    padding: .3em .45em .25em;
    margin-left: .15rem;
    vertical-align: middle;
}
.roc-beta--danger { color: var(--roc-danger-fg); border-color: color-mix(in srgb, var(--roc-danger-bg) 70%, transparent); }
@media (max-width: 991.98px) {
    .roc-navbar .navbar-collapse { border-top: 1px solid var(--roc-n-300); margin-top: .6rem; padding: .5rem 0 .6rem; }
    .roc-navbar .nav-link { padding: .6rem .6rem; }
    .roc-navbar .dropdown-menu { background: transparent; border: 0; box-shadow: none; margin: 0 0 .25rem .75rem; padding: 0; }
    .roc-navbar .dropdown-item { padding-top: .5rem; padding-bottom: .5rem; }
    .roc-navbar .navbar-nav.align-items-center { align-items: stretch !important; }
}
@media (max-width: 359.98px) { .roc-brand-name { display: none; } }

.roc-footer {
    color-scheme: dark; /* chrome scuro in entrambi i temi */
    background: var(--roc-n-0);
    border-top: 1px solid var(--roc-n-300);
    color: var(--roc-n-700);
    font-size: .8rem;
    text-align: center;
    margin-top: 4rem;
    padding: 2.5rem 0 calc(2rem + env(safe-area-inset-bottom, 0px));
}
.roc-footer a { color: var(--roc-n-700); }
.roc-footer a:hover { color: var(--roc-n-900); text-decoration: none; }
.roc-footer-brand { display: inline-flex; align-items: center; gap: .5rem; color: var(--roc-n-800); font-family: var(--roc-font-brand); font-weight: 400; font-size: 1.45rem; letter-spacing: .01em; text-transform: uppercase; }
.roc-footer-brand img { height: 40px; width: auto; opacity: .9; }
.roc-footer-tagline { font-family: var(--roc-font-display); letter-spacing: .08em; font-size: .78rem; color: var(--roc-n-700); margin: .5rem 0 0; }
.roc-footer-meta { color: var(--roc-n-600); font-size: .72rem; margin: .35rem 0 0; }
.roc-footer-links { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .35rem .9rem; margin-top: 1rem; font-size: .75rem; }
.roc-footer-links .roc-footer-label { color: var(--roc-n-600); }
.roc-footer-links .roc-footer-sep { width: 1px; height: .9rem; background: var(--roc-n-400); }
.roc-footer-legal { max-width: 920px; margin: 1.25rem auto 0; padding-top: 1rem; border-top: 1px solid var(--roc-n-300); font-size: .68rem; line-height: 1.55; color: var(--roc-n-600); }
.roc-footer-legal p { margin-bottom: .4rem; }
.roc-footer-legal strong { color: var(--roc-n-700); font-weight: 600; }
.roc-footer-legal a { color: var(--roc-n-700); text-decoration: underline; text-underline-offset: .15em; }

/* ==========================================================================
   4. COMPONENTI NOSTRI (.roc-*) — crescono nelle fasi successive
   ========================================================================== */
.font-display { font-family: var(--roc-font-display); letter-spacing: .02em; }
.text-gold { color: var(--roc-accent-fg) !important; }
.text-brand { color: var(--roc-primary-fg) !important; }
.roc-kicker {
    font-family: var(--roc-font-display);
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--roc-text-muted);
}
.roc-surface { background: var(--roc-surface); border: 1px solid var(--roc-border); border-radius: var(--roc-r-lg); }
.roc-surface-2 { background: var(--roc-surface-2); border: 1px solid var(--roc-border); border-radius: var(--roc-r-lg); }
.roc-divider { border: 0; border-top: 1px solid var(--roc-border); margin: 1rem 0; }

/* ==========================================================================
   5. EREDITÀ dai vecchi style.css / dark-theme.css, portata ai token
   ========================================================================== */
.jumbotron { background: var(--roc-surface); border: 1px solid var(--roc-border); border-radius: var(--roc-r-lg); padding: 2rem 1rem; margin: 1em 0 .5em; }
.card-hover { transition: box-shadow .2s ease, transform .2s ease; }
.card-hover:hover { box-shadow: var(--roc-shadow-lg); transform: translateY(-2px); }
.hidden { display: none; }
.fade-in { animation: rocFadeIn .4s ease-in; }
@keyframes rocFadeIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* Token dei personaggi */
.character-token {
    position: relative; width: 64px; height: 64px; border-radius: 50%;
    border: 2px solid var(--roc-gold-500); overflow: hidden; display: inline-block; vertical-align: middle;
    background: var(--roc-surface-3) center / cover no-repeat; box-shadow: var(--roc-shadow-sm);
}
.character-token img { width: 100%; height: 100%; object-fit: cover; }
.character-token-sm { width: 32px; height: 32px; border-width: 1px; }
.character-token-lg { width: 120px; height: 120px; border-width: 3px; }

/* Card cliccabili del builder e schede metodo */
.cb-selectable-card { transition: border-color .15s, box-shadow .15s; cursor: pointer; }
.cb-selectable-card:hover { border-color: var(--roc-primary-icon) !important; box-shadow: 0 0 0 2px rgba(130, 0, 0, .3); }
.cb-selectable-card.border-primary { box-shadow: 0 0 0 3px rgba(130, 0, 0, .4); }
.method-card { cursor: pointer; transition: transform .2s ease, box-shadow .2s ease; }
.method-card:hover { transform: translateY(-2px); box-shadow: var(--roc-shadow-lg); }
.method-card.border-primary { border-color: var(--roc-primary-icon) !important; background-color: color-mix(in srgb, var(--roc-primary) 18%, var(--roc-surface)) !important; }
.method-card.disabled-card { opacity: .5; cursor: not-allowed; pointer-events: none; background-color: var(--roc-surface-2) !important; }
.method-card.disabled-card:hover { transform: none; box-shadow: none; }
.cb-check-row { border: 1px solid transparent; border-radius: var(--roc-r-sm); transition: background-color .1s, border-color .1s; }
.cb-check-row:hover { background-color: var(--roc-surface-3); border-color: var(--roc-border-strong); }
.cb-check-row:has(input:checked) { background-color: color-mix(in srgb, var(--roc-primary) 22%, var(--roc-surface)); border-color: var(--roc-primary-icon); }
.cb-sticky-nav { margin-top: 2rem; }

/* Card degli elenchi (campagne, journal, eventi, leghe) e copertine */
.entity-card { transition: transform .15s ease, box-shadow .15s ease; }
.entity-card:hover { transform: translateY(-3px); box-shadow: var(--roc-shadow-lg) !important; }
.journal-cover-hero { aspect-ratio: 21 / 7; min-height: 220px; width: 100%; }
@media (max-width: 575.98px) { .journal-cover-hero { aspect-ratio: 4 / 3; min-height: 0; } }

/* Richiami «azione richiesta» */
.cta-glow-success { animation: rocGlowSuccess 2s ease-in-out infinite; }
.cta-glow-warning { animation: rocGlowWarning 2s ease-in-out infinite; }
@keyframes rocGlowSuccess { 0%, 100% { box-shadow: 0 0 0 0 rgba(47, 158, 90, .65); } 50% { box-shadow: 0 0 0 .5rem rgba(47, 158, 90, 0); } }
@keyframes rocGlowWarning { 0%, 100% { box-shadow: 0 0 0 0 rgba(217, 144, 42, .6); } 50% { box-shadow: 0 0 0 .5rem rgba(217, 144, 42, 0); } }

/* Statsroller storico (tiro dei dadi) */
.step-indicator { display: flex; justify-content: space-between; margin-bottom: 20px; padding: 0 20px; }
.step { display: flex; align-items: center; gap: 10px; padding: 10px 15px; background: var(--roc-surface-3); border-radius: var(--roc-r-pill); color: var(--roc-text); font-weight: 600; border: 1px solid var(--roc-border); }
.step.active { background: var(--roc-primary); color: #fff; border-color: var(--roc-primary); }
.step.completed { background: var(--roc-success-bg); color: #fff; border-color: var(--roc-success-bg); }
.step-number { width: 25px; height: 25px; background: rgba(255, 255, 255, .25); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 14px; }
.section { margin-bottom: 30px; padding: 20px; border: 2px solid var(--roc-border); border-radius: var(--roc-r-lg); background: var(--roc-surface); }
.dice-matrix { display: grid; gap: 15px; margin: 20px 0; }
.dice-row { display: flex; align-items: center; gap: 10px; padding: 10px; background: var(--roc-surface-2); border-radius: var(--roc-r); border: 1px solid var(--roc-border); }
.row-label { font-weight: 600; min-width: 60px; color: var(--roc-text); }
.dice-container { display: flex; gap: 5px; flex: 1; }
.die { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 18px; border-radius: var(--roc-r-sm); border: 2px solid var(--roc-border-strong); background: var(--roc-surface-3); color: var(--roc-text); transition: all .3s ease; font-variant-numeric: tabular-nums; }
.die.ones { background: var(--roc-danger-bg); color: #fff; border-color: var(--roc-danger-bg); animation: rocPulse 2s infinite; }
.die.top { background: var(--roc-success-bg); color: #fff; border-color: var(--roc-success-bg); }
@keyframes rocPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.1); } }
.row-sum { min-width: 80px; text-align: right; font-weight: 700; font-size: 18px; color: var(--roc-text); }
.stats-assignment { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px; margin: 20px 0; }
.stat-assign { display: flex; align-items: center; gap: 10px; padding: 10px; background: var(--roc-surface-2); border-radius: var(--roc-r); border: 1px solid var(--roc-border); }
.stat-value { font-weight: 700; font-size: 20px; color: var(--roc-text); min-width: 40px; }
.stat-select { flex: 1; padding: 8px; border: 1px solid var(--roc-border-strong); border-radius: var(--roc-r-sm); font-size: 16px; background: var(--roc-input-bg); color: var(--roc-text); }
.final-table { background: var(--roc-bg-deep); color: var(--roc-text); padding: 20px; border-radius: var(--roc-r-lg); font-family: var(--roc-font-mono); font-size: 15px; line-height: 1.4; margin: 20px 0; white-space: pre-wrap; border: 1px solid var(--roc-border); overflow-x: auto; }
.total-score { font-size: 1.2em; font-weight: 700; color: var(--roc-text); text-align: center; margin: 15px 0; padding: 10px; background: var(--roc-surface-2); border-radius: var(--roc-r); border: 2px solid var(--roc-border); }
.completion-message { text-align: center; padding: 40px; background: var(--roc-surface); border: 2px solid var(--roc-success-bg); border-radius: var(--roc-r-lg); margin: 20px 0; }
@media (max-width: 768px) { .step-indicator { flex-direction: column; gap: 10px; } .stats-assignment { grid-template-columns: 1fr; } }

/* ==========================================================================
   6. PONTI TEMPORANEI per partial con colori del tema chiaro cablati.
      Da togliere quando il partial viene ridisegnato (Fase 4: builder).
   ========================================================================== */
body .cb-recap-bar { background: var(--roc-surface-2); border-color: var(--roc-border-strong); box-shadow: var(--roc-shadow-sm); top: 0; }
.cb-nav .cb-phase-head { background: var(--roc-surface-2); border-color: var(--roc-border-strong); color: var(--roc-text-2); }
.cb-nav .cb-phase-head:hover { border-color: var(--roc-n-500); }
.cb-nav .cb-phase.is-done .cb-phase-head { background: color-mix(in srgb, var(--roc-success-bg) 28%, var(--roc-surface-2)); border-color: var(--roc-success-bg); color: var(--roc-success-fg); }
.cb-nav .cb-phase.is-active .cb-phase-head { background: var(--roc-primary); border-color: var(--roc-primary); color: #fff; }
.cb-nav .cb-phase.needs-review .cb-phase-head { background: var(--roc-warning-bg); border-color: var(--roc-warning-bg); color: var(--roc-n-0); }
.cb-nav .cb-substeps { border-left-color: var(--roc-border-strong); }
.cb-nav .cb-substep a, .cb-nav .cb-substep span { color: var(--roc-text-2); }
.cb-nav .cb-substep a:hover { background: var(--roc-surface-3); color: var(--roc-text-strong); }
.cb-nav .cb-substep.is-active a, .cb-nav .cb-substep.is-active span { background: color-mix(in srgb, var(--roc-primary) 32%, var(--roc-surface-2)); color: var(--roc-text-strong); }
.cb-nav .cb-substep.needs-review a { background: color-mix(in srgb, var(--roc-warning-bg) 25%, var(--roc-surface-2)); color: var(--roc-warning-fg); }
.cb-sticky-nav.bg-white {
    background: color-mix(in srgb, var(--roc-surface) 94%, transparent) !important;
    border-top-color: var(--roc-border) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px)) !important;
}

/* ==========================================================================
   7. MOBILE, TOUCH, SAFE-AREA, STAMPA
   ========================================================================== */
/* Il container di pagina: 12px di gutter (come Bootstrap) o la safe-area se è più larga. */
.container, .container-fluid, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
    --roc-page-gutter: calc(var(--bs-gutter-x, 1.5rem) * .5);
    padding-left: max(var(--roc-page-gutter), env(safe-area-inset-left, 0px));
    padding-right: max(var(--roc-page-gutter), env(safe-area-inset-right, 0px));
}
/* 130 template aprono un proprio .container DENTRO quello del layout: il padding
   laterale era doppio (24px su telefono, cioè un ottavo dello schermo buttato).
   Il container annidato non ne aggiunge. */
.container .container, .container .container-fluid, .container-fluid .container, .container-fluid .container-fluid {
    padding-left: 0;
    padding-right: 0;
}
@media (max-width: 575.98px) {
    body > .container.mt-4, body > .container-fluid.mt-4 { margin-top: 1rem !important; }
    /* Le copertine su telefono valgono lo schermo: a tutta larghezza e più alte. */
    .roc-cover, .journal-cover-hero {
        margin-left: calc(-1 * var(--roc-page-gutter)) !important;
        margin-right: calc(-1 * var(--roc-page-gutter)) !important;
        width: auto !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }
    .roc-cover { padding-bottom: 62% !important; }
    .roc-cover .h3, .roc-cover h1 { font-size: 1.35rem; }
}
@media (max-width: 767.98px) {
    /* Le tabelle larghe scorrono da sole invece di allargare la pagina. */
    .table:not(.table-responsive > .table) { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
    /* Tab e pillole diventano una striscia scorrevole. */
    .nav-tabs, .nav-pills { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
    .nav-tabs::-webkit-scrollbar, .nav-pills::-webkit-scrollbar { display: none; }
    .nav-tabs .nav-link, .nav-pills .nav-link { white-space: nowrap; }
    .modal { --bs-modal-margin: .5rem; }
}
@media (pointer: coarse) {
    .btn:not(.btn-sm):not(.btn-lg) { min-height: 42px; }
    .btn-sm { min-height: 34px; }
    /* Sotto i 16px iOS ingrandisce la pagina al focus di un campo. */
    .form-control, .form-select { font-size: max(1rem, 16px); min-height: 42px; }
    .form-control-sm, .form-select-sm { min-height: 36px; }
    .form-check-input { width: 1.2em; height: 1.2em; }
}
/* Nella PWA installata i gesti di zoom disturbano: era il motivo di user-scalable=no,
   che però toglieva lo zoom anche a chi legge la scheda dal browser. */
@media (display-mode: standalone) { body { touch-action: pan-x pan-y; } }
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
@media print {
    body { background: #fff; color: #000; }
    .roc-navbar, .roc-footer, #roc-gdpr-banner { display: none !important; }
}