/* ============================================================
   conferenze.css — Sezione Conferenze
   Solo classi realmente nuove. Il resto viene da sc-global.css
   e libreria.css (sc-lib-fullwidth, sc-lib-table, sc-lib-toolbar,
   sc-lib-kpi-row, sc-lib-kpi, sc-btn, sc-btn-sm, sc-notice ecc.)
   ============================================================ */

/* ── Layout pagina: i template conferenze usano .sc-lib-fullwidth (sc-global.css);
   il padding WP è azzerato da body.sc-flush. .sc-conf-page non è usato da nessun
   template: regole rimosse perché selettori morti. ── */

/* ── La card della sezione ─────────────────────────────────────────────────
   Una scatola bianca sola: raggio `--sc-radius`, bordo `--sc-border`, ombra
   `--sc-shadow` — gli stessi token di `.sc-panel`/`.sc-kpi-card` in
   sc-global.css. Erano quattro definizioni scritte a mano (12/#e5e7eb/1px 4px
   per pannello report, scheda check-in e barra filtri; 10/1px 3px per la
   scheda conferenza dell'iscrizione manuale) e nel Report le KPI canoniche
   stavano sopra un pannello con raggio, bordo e ombra diversi. Ogni nuova
   scatola di questa sezione usa i token, non tre numeri suoi. I fallback
   servono perché questo foglio si carica anche sul frontend (shortcode),
   dove sc-global.css non c'è. ── */

/* Lo stato :hover vale solo dove un puntatore sorvola davvero. Sul touch il
   browser lo applica al tocco e ce lo LASCIA finche' non si tocca altrove:
   l'opzione toccata restava col bordo blu, identica a quella davvero
   scelta, e il posto toccato restava sollevato come se fosse selezionato.
   Ogni nuova regola :hover di questo foglio va nella stessa guardia.
   Fanno eccezione gli attrezzi di fila dell'editor pianta, dove l'hover
   non decora ma scopre i comandi (sul touch ci pensa `.is-sel`). */

/* Lista conferenze (tabella) */
.sc-lib-table td.sc-lib-actions { white-space: nowrap; display: flex; gap: 4px; align-items: center; }
.sc-conf-empty-row { text-align: center; padding: 40px; color: var(--sc-muted, #6b7280); }
.sc-conf-luogo { color: var(--sc-muted, #6b7280); }
.sc-conf-col-data { white-space: nowrap; font-size: 13px; }
.sc-conf-iscr-link { font-weight: 600; }
/* Le persone sotto il numero di iscrizioni: sono due dati diversi e la
   colonna «Posti» qui accanto rende facile confonderli. */
.sc-conf-persone { color: var(--sc-muted, #6b7280); font-size: 12px; font-weight: 600; }

/* Libreria piante: la scomposizione della capienza sotto il totale. Le voci
   vanno a capo da sole sulle sale a tre tipi, senza allargare la colonna. */
.sc-layout-mix { display: flex; flex-wrap: wrap; gap: 2px 10px; font-size: 13px; color: #475569; }
.sc-layout-mix span { white-space: nowrap; }

/* Oltre la capienza: succede solo con l'overbooking acceso, e va detto — non è
   un errore, ma nemmeno un dettaglio. Ambra, non rosso: è una scelta di chi ha
   configurato la conferenza, non un guasto. */
.sc-conf-over {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 7px;
    border-radius: 999px;
    background: #fef3c7;
    color: #92400e;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}
.sc-kpi-over { color: #92400e; font-weight: 700; }

/* ── Badge stato conferenza e iscrizione ── */
.sc-conf-stato {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    white-space: nowrap;
}
.sc-conf-stato-bozza      { background: #f3f4f6; color: #374151; }
.sc-conf-stato-pubblicata { background: #dcfce7; color: #166534; }
.sc-conf-stato-archiviata { background: #e5e7eb; color: #6b7280; }
.sc-conf-stato-confermata { background: #dcfce7; color: #166534; }
.sc-conf-stato-annullata  { background: #fee2e2; color: #991b1b; }
.sc-conf-stato-in_attesa  { background: #fef9c3; color: #854d0e; }
/* ── Form campi (partial conferenze-form-fields.php) ── */
/* Asterisco campo obbligatorio */
.sc-req { color: #ef4444; }

/* Image picker (editor conferenza + partial prodotti) */
.sc-conf-img-picker { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.sc-conf-img-preview { width: 80px; height: 80px; object-fit: cover; border-radius: 8px; border: 1px solid #e5e7eb; }
.sc-conf-img-preview.sm { width: 60px; height: 60px; border-radius: 6px; }

.sc-conf-field { margin-bottom: 12px; }
.sc-conf-field label {
    display: block;
    font-size: 12px;
    font-weight: 700;
    color: #374151;
    margin-bottom: 4px;
}
.sc-conf-field label .note {
    font-weight: 400;
    color: #6b7280;
    font-size: 11px;
    margin-left: 4px;
}
.sc-conf-field input,
.sc-conf-field select,
.sc-conf-field textarea {
    width: 100%;
    height: 34px;
    border-radius: 7px;
    border: 1px solid #d1d5db;
    padding: 0 10px;
    font-size: 13px;
    background-color: #fff;
    box-sizing: border-box;
    transition: border-color .15s;
}
.sc-conf-field textarea { height: auto; padding: 8px 10px; resize: vertical; }
/* wp-admin taglia ogni tendina a `25rem` con `.wp-core-ui select` (0,1,1): in una
   griglia a due colonne il campo di testo arrivava in fondo alla colonna e la
   tendina di fianco si fermava a 400px, senza che nessuno l'avesse deciso.
   `.sc-conf-field select` è (0,1,1) come lei e questo foglio carica dopo. */
.sc-conf-field select { max-width: 100%; }
/* Un campo a riga intera è largo quanto la pagina: alla textarea e alla pianta
   serve, a una casella di una riga no — su un monitor largo diventa un solco da
   1280px che non dice più quanto testo ci va. Il tetto è sulla riga di testo,
   non sulla colonna, così la griglia resta com'è. */
.sc-editor-fields .sc-editor-field-full input:not([type="checkbox"]):not([type="radio"]),
.sc-editor-fields .sc-editor-field-full select { max-width: 720px; }
.sc-conf-field input:focus,
.sc-conf-field select:focus,
.sc-conf-field textarea:focus { border-color: #60a5fa; outline: none; box-shadow: 0 0 0 3px rgba(96,165,250,.12); }

/* ── Etichettine maiuscole (eyebrow) ───────────────────────────────────────
   `.sc-checkin-card-title`, `.sc-ci-recent-title`, `.sc-cr-panel-title`,
   `.sc-fb-fixed-label-head`, `.sc-iscr-extra-head` e `.sc-sess-day-header` sono
   la stessa etichetta e stavano su sei valori diversi: due misure (10 e 11px),
   tre grigi (#475569 / #64748b / #6b7280) e tre spaziature (.05 / .06 / .08em).
   Il bersaglio è `.sc-editor-subgroup-title` di sc-global.css — 11px / 700 /
   `--sc-muted` / .06em — perché è quella del componente condiviso: allinearsi a
   lei invece di inventare un sesto valore. ── */

/* Scheda dei dati partecipante. Nata per il check-in, oggi la usa solo
   l'iscrizione manuale (`.sc-manreg-form-card`): resta qui col nome storico
   per non rinominare un template a vuoto. */
.sc-checkin-card {
    background: var(--sc-surface, #fff);
    border: var(--sc-border, 1px solid #eef1f4);
    border-radius: var(--sc-radius, 10px);
    box-shadow: var(--sc-shadow, 0 1px 2px rgba(16,24,40,.04), 0 8px 22px -14px rgba(16,24,40,.16));
    padding: 20px 24px;
}
.sc-checkin-card-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid #f1f5f9;
    font-size: 11px;
    font-weight: 700;
    color: var(--sc-muted, #6b7280);
    text-transform: uppercase;
    letter-spacing: .06em;
}

/* Selettore conferenza nell'header (.sc-lib-header-actions).
   Non e' piu' del check-in — che ha il suo `.sc-ci-confsel` in barra — ma resta
   in uso in Report e Iscrizione manuale: il prefisso storico non si tocca per
   non rinominare due template a vuoto. */
.sc-ci-conf-sel {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.sc-ci-conf-sel label {
    font-size: 13px;
    font-weight: 600;
    color: #475569;
    white-space: nowrap;
}
/* Il campo è `.sc-input sc-input--sm` nel markup (la classe canonica del design
   system), non una quarta scatola scritta qui: era 36px / raggio 8 / fondo
   #f9fafb mentre la stessa tendina, nella barra delle Iscrizioni, era 34 / 7 /
   bianca. Resta solo la larghezza, e va a **doppia classe** perché il campo
   canonico nasce `width:100%`. */
.sc-ci-conf-sel select.sc-input {
    width: auto;
    min-width: 200px;
    max-width: 320px;
}

/* ══ Check-in ═══════════════════════════════════════════════════════════════
   Si usa in piedi, alla porta, con un telefono o un tablet in mano e la fila
   davanti: la fotocamera E' la schermata, tutto il resto le sta intorno senza
   rubarle spazio sopra la piega. Impaginato dal telefono in su. */

.sc-ci-app {
    max-width: 720px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* ── Barra di contesto: una riga sola ── */
.sc-ci-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background: var(--sc-surface, #fff);
    border: var(--sc-border, 1px solid #eef1f4);
    border-radius: var(--sc-radius, 10px);
    box-shadow: var(--sc-shadow, 0 1px 2px rgba(16,24,40,.04), 0 8px 22px -14px rgba(16,24,40,.16));
}
.sc-ci-bar-conf { flex: 1 1 auto; min-width: 0; }
.sc-ci-confname {
    display: block;
    font-size: 15px;
    font-weight: 700;
    color: #1f2937;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* Il selettore non deve sembrare il protagonista: niente cornice pesante, si
   apre solo se le conferenze pubblicate sono piu' d'una.
   GOTCHA: il selettore va scoped (`.sc-ci-bar select.sc-ci-confsel` = 0,2,1),
   perche' wp-admin stila i menu a tendina con `.wp-core-ui select` (0,1,1) e una
   classe secca perde — il campo tornava al grigio di sistema, alto 40px. */
.sc-ci-bar select.sc-ci-confsel {
    max-width: 100%;
    height: 36px;
    margin: 0;
    padding: 0 30px 0 10px;
    border: 1px solid transparent;
    border-radius: 9px;
    background-color: #f1f5f9;
    /* La freccia disegnata: `appearance:none` toglie quella di sistema */
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23475569' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 11px 7px;
    box-shadow: none;
    font-size: 15px;
    font-weight: 700;
    line-height: 34px;   /* senza, si prende quella di wp-admin e sfonda l'altezza */
    color: #1f2937;
    -webkit-appearance: none;
    appearance: none;
}
.sc-ci-bar select.sc-ci-confsel:focus {
    border-color: var(--sc-blue, #2563eb);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .12);
    outline: none;
}

/* Contatore: sostituisce tre card KPI che stavano sopra la fotocamera e la
   spingevano fuori dallo schermo. «Mancanti» e' una sottrazione, si legge qui. */
.sc-ci-count { flex: 0 0 auto; text-align: right; line-height: 1.15; }
.sc-ci-count-n { font-size: 19px; font-weight: 800; color: #1f2937; letter-spacing: -.01em; }
.sc-ci-count-sep { color: #94a3b8; font-weight: 600; margin: 0 1px; }
.sc-ci-count-bar {
    display: block;
    width: 88px;
    height: 4px;
    margin: 4px 0 3px auto;
    border-radius: 999px;
    background: #e5e7eb;
    overflow: hidden;
}
.sc-ci-count-fill {
    display: block;
    height: 100%;
    width: var(--sc-ci-pct, 0%);
    border-radius: 999px;
    background: #15803d;
    transition: width .3s ease;
}
.sc-ci-count-l { display: block; font-size: 10.5px; font-weight: 600; color: #64748b; letter-spacing: .02em; }

/* Operatore: chi sta usando questo dispositivo. Iniziali in un tondo, nessun
   Gravatar — sarebbe una richiesta di rete verso l'esterno, e alla porta la
   rete e' quella che e'. */
.sc-ci-op { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.sc-ci-op-ini {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px; height: 34px;
    border-radius: 50%;
    background: #1e293b;
    color: #fff;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .02em;
}
.sc-ci-op-name {
    font-size: 12.5px;
    font-weight: 600;
    color: #475569;
    max-width: 110px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sc-ci-iconbtn {
    -webkit-appearance: none;
    appearance: none;
    flex: 0 0 auto;
    width: 36px; height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #e5e7eb;
    border-radius: 9px;
    background: #f8fafc;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
}
@media (hover: hover) {
.sc-ci-iconbtn:hover { border-color: #cbd5e1; background: #f1f5f9; }
}
.sc-ci-iconbtn[aria-pressed="false"] { opacity: .55; }
.sc-ci-iconbtn span[hidden] { display: none; }

/* ── Palcoscenico: il video ── */
.sc-ci-stage {
    position: relative;
    /* Quadrato: il QR e' quadrato, e un 3/4 su un telefono da 390px costava
       130px di altezza per inquadrare la stessa cosa — altezza che serve al
       codice a mano e alle ultime scansioni. */
    aspect-ratio: 1 / 1;
    border-radius: var(--sc-radius, 10px);
    overflow: hidden;
    background: #0b1220;              /* scuro: la fotocamera parte con un attimo di ritardo */
    box-shadow: 0 6px 24px rgba(15, 23, 42, .16);
}
.sc-ci-video { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Mirino a quattro angoli: una cornice piena coprirebbe proprio la parte di
   inquadratura che serve. */
.sc-ci-reticle {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: min(62%, 260px);
    aspect-ratio: 1;
    pointer-events: none;
}
.sc-ci-reticle i {
    position: absolute;
    width: 30px; height: 30px;
    border: 3px solid rgba(255, 255, 255, .92);
    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .5));
}
.sc-ci-reticle i:nth-child(1) { top: 0; left: 0;  border-right: 0; border-bottom: 0; border-radius: 10px 0 0 0; }
.sc-ci-reticle i:nth-child(2) { top: 0; right: 0; border-left: 0;  border-bottom: 0; border-radius: 0 10px 0 0; }
.sc-ci-reticle i:nth-child(3) { bottom: 0; left: 0;  border-right: 0; border-top: 0; border-radius: 0 0 0 10px; }
.sc-ci-reticle i:nth-child(4) { bottom: 0; right: 0; border-left: 0;  border-top: 0; border-radius: 0 0 10px 0; }
.sc-ci-stage.is-nocam .sc-ci-reticle { display: none; }

.sc-ci-hint {
    position: absolute;
    left: 50%;
    bottom: 14px;
    transform: translateX(-50%);
    max-width: calc(100% - 28px);
    padding: 8px 14px;
    border-radius: 999px;
    background: rgba(15, 23, 42, .72);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    text-align: center;
    backdrop-filter: blur(6px);
}
.sc-ci-hint[hidden] { display: none; }
/* Pallino «in presa»: dice che la fotocamera sta davvero guardando */
.sc-ci-stage.is-live .sc-ci-hint::before {
    content: '';
    display: inline-block;
    width: 7px; height: 7px;
    margin-right: 7px;
    border-radius: 50%;
    background: #4ade80;
    vertical-align: middle;
}

/* Fotocamera non disponibile: lo stage resta e spiega, invece di sparire
   lasciando la pagina mezza vuota (e' lo stato di chi non ha HTTPS). */
.sc-ci-nocam {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 24px;
    text-align: center;
    background: #0b1220;
}
.sc-ci-nocam[hidden] { display: none; }
.sc-ci-nocam-ic { font-size: 40px; opacity: .8; }
.sc-ci-nocam-msg { margin: 0; max-width: 34ch; color: #cbd5e1; font-size: 14px; line-height: 1.5; }
.sc-ci-nocam-btn { min-height: 44px; }

/* ── Esito: SOPRA il video ──
   Prima era un blocco nel flusso: a ogni persona che passava il layout saltava
   su e giu' sotto le dita. */
.sc-ci-stage .sc-checkin-result {
    position: absolute;
    inset: auto 10px 10px;
    z-index: 3;
    padding: 16px 18px;
    border-radius: 14px;
    border: 2px solid transparent;
    text-align: center;
    backdrop-filter: blur(10px);
    animation: sc-ci-pop .18s ease-out;
}
.sc-checkin-result[hidden] { display: none; }
@keyframes sc-ci-pop { from { transform: translateY(8px); opacity: 0; } to { transform: none; opacity: 1; } }

.sc-checkin-result-ok        { background: rgba(240, 253, 244, .98); border-color: #15803d; }
.sc-checkin-result-already   { background: rgba(255, 251, 235, .98); border-color: #d97706; }
.sc-checkin-result-not_found,
.sc-checkin-result-altra_conf,
.sc-checkin-result-annullata,
.sc-checkin-result-error     { background: rgba(254, 242, 242, .98); border-color: #dc2626; }

/* Con la fotocamera non disponibile il riquadro «niente fotocamera» occupa tutto
   lo stage e l'esito ci finisce sopra: due pannelli sovrapposti, illeggibili
   entrambi. Mentre c'e' un esito il primo si toglie di mezzo — un messaggio
   alla volta, e quello che conta e' l'esito. */
.sc-ci-stage.has-result .sc-ci-nocam { display: none; }

.sc-checkin-icon        { font-size: 34px; line-height: 1; margin-bottom: 2px; }
.sc-checkin-status-text { font-size: 15px; font-weight: 800; color: #111827; letter-spacing: .04em; }
/* Il nome e' il dato che si legge a un metro di distanza mentre si saluta */
.sc-checkin-name        { font-size: 22px; font-weight: 800; margin-top: 2px; color: #111827; line-height: 1.2; }
.sc-checkin-conf-name   { font-size: 12px; color: #475569; margin-top: 4px; }
.sc-checkin-time        { font-size: 12px; color: #475569; margin-top: 3px; }
.sc-checkin-persone     { font-size: 13px; font-weight: 700; color: #1f2937; margin-top: 4px; }

/* Il posto: quando c'e', e' il vero motivo per cui si guarda lo schermo */
.sc-checkin-seats {
    display: inline-flex;
    align-items: baseline;
    gap: 10px;
    margin-top: 8px;
    padding: 6px 14px;
    border-radius: 10px;
    background: rgba(255, 255, 255, .7);
    border: 1px solid rgba(15, 23, 42, .1);
}
.sc-checkin-seats-lbl {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #475569;
}
.sc-checkin-seats-val { font-size: 26px; font-weight: 800; color: #111827; line-height: 1.1; }
.sc-checkin-seats.is-nota .sc-checkin-seats-val { font-size: 15px; font-weight: 700; }

/* ── Codice a mano: la via di riserva ── */
.sc-ci-manual {
    background: var(--sc-surface, #fff);
    border: var(--sc-border, 1px solid #eef1f4);
    border-radius: var(--sc-radius, 10px);
    box-shadow: var(--sc-shadow, 0 1px 2px rgba(16,24,40,.04), 0 8px 22px -14px rgba(16,24,40,.16));
    overflow: hidden;
}
.sc-ci-manual-sum {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 46px;
    padding: 0 16px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    color: #374151;
    list-style: none;
    user-select: none;
}
.sc-ci-manual-sum::-webkit-details-marker { display: none; }
@media (hover: hover) {
.sc-ci-manual-sum:hover { background: #f8fafc; }
}
.sc-ci-manual[open] .sc-ci-manual-sum { border-bottom: 1px solid #f1f5f9; }
.sc-ci-manual-body { padding: 14px 16px 16px; }
.sc-ci-manual-hint { margin: 8px 0 0; font-size: 12.5px; color: #475569; }

.sc-checkin-token-input {
    width: 100%;
    height: 48px;
    padding: 0 14px;
    border: 1.5px solid var(--sc-border-gray, #d1d5db);
    border-radius: 10px;
    background: #fff;
    font-size: 16px;            /* mai sotto i 16: iOS ingrandirebbe la pagina */
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    letter-spacing: .02em;
}
.sc-checkin-token-input:focus {
    border-color: var(--sc-blue, #2563eb);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .12);
    outline: none;
}
.sc-ci-manual-body .sc-btn-primary { width: 100%; margin-top: 10px; min-height: 48px; }

/* ── Ultime scansioni ── */
.sc-ci-recent {
    background: var(--sc-surface, #fff);
    border: var(--sc-border, 1px solid #eef1f4);
    border-radius: var(--sc-radius, 10px);
    box-shadow: var(--sc-shadow, 0 1px 2px rgba(16,24,40,.04), 0 8px 22px -14px rgba(16,24,40,.16));
    overflow: hidden;
}
.sc-ci-recent-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 11px 16px;
    border-bottom: 1px solid #f1f5f9;
}
.sc-ci-recent-title {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--sc-muted, #6b7280);
}
.sc-ci-recent-count {
    min-width: 22px;
    padding: 2px 7px;
    border-radius: 999px;
    background: #f1f5f9;
    color: #475569;
    font-size: 11px;
    font-weight: 700;
    text-align: center;
}
.sc-ci-recent-empty { padding: 22px 16px; text-align: center; color: #475569; font-size: 13px; }
.sc-ci-recent-empty[hidden] { display: none; }

.sc-ci-list { margin: 0; padding: 0; list-style: none; }
.sc-ci-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    border-bottom: 1px solid #f6f7f9;
}
.sc-ci-item:last-child { border-bottom: none; }
.sc-ci-item-badge {
    flex: 0 0 auto;
    width: 26px; height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 13px;
    font-weight: 800;
}
.sc-ci-item-badge.ok   { background: #dcfce7; color: #15803d; }
.sc-ci-item-badge.warn { background: #fef9c3; color: #854d0e; }
.sc-ci-item-badge.err  { background: #fee2e2; color: #991b1b; }
.sc-ci-item-main { min-width: 0; }
.sc-ci-item-name {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: #1f2937;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* Ora e operatore: l'operatore e' il dato che serve con due porte aperte */
.sc-ci-item-meta { display: block; font-size: 12px; color: #475569; }

/* Da tablet in su la sala e' larga: il video diventa panoramico e si da' un
   tetto in altezza, o su uno schermo alto si mangia tutta la pagina. */
@media (min-width: 600px) {
    .sc-ci-stage {
        aspect-ratio: 4 / 3;
        max-height: min(56vh, 480px);
    }
}

/* ── Tablet e desktop: lo stage resta dominante, il resto gli si affianca ── */
@media (min-width: 900px) {
    .sc-ci-app {
        max-width: 1080px;
        display: grid;
        grid-template-columns: minmax(0, 1.3fr) minmax(290px, 1fr);
        grid-template-rows: auto auto 1fr;
        grid-template-areas:
            "bar    bar"
            "stage  manual"
            "stage  recent";
        gap: 12px;
    }
    .sc-ci-bar    { grid-area: bar; }
    .sc-ci-stage  { grid-area: stage; align-self: start; }
    .sc-ci-manual { grid-area: manual; align-self: start; }
    /* Le ultime scansioni si allungano fino in fondo allo stage: con
       `align-items: start` restava un vuoto fra il pannello del codice e la
       lista, e la colonna sembrava interrotta a meta'. */
    .sc-ci-recent {
        grid-area: recent;
        align-self: stretch;
        display: flex;
        flex-direction: column;
        min-height: 0;
    }
    .sc-ci-list { overflow-y: auto; min-height: 0; }
    .sc-ci-stage .sc-checkin-result { inset: auto 14px 14px; padding: 20px; }
    .sc-checkin-name { font-size: 26px; }
    .sc-checkin-seats-val { font-size: 30px; }
}

/* ── Il dito: bersagli e nessun campo sotto i 16px ── */
@media (pointer: coarse) {
    .sc-ci-iconbtn { width: 44px; height: 44px; }
    .sc-ci-manual-sum { min-height: 52px; font-size: 15px; }
    /* Scoped come la regola base: una classe secca perde contro
       `.wp-core-ui select`, e il campo tornerebbe sotto i 16px — la soglia
       oltre la quale iOS ingrandisce la pagina al primo tocco. */
    .sc-ci-bar select.sc-ci-confsel { height: 42px; font-size: 16px; line-height: 40px; }
    .sc-ci-app { touch-action: manipulation; }
}

/* Telefono: la barra resta su UNA riga. A mandarla a capo era la scritta
   «registrati · N mancanti», che su 390px vale mezza riga per un dato che il
   contatore gia' dice; il nome dell'operatore lascia il posto alle iniziali,
   che a chi tiene in mano il dispositivo bastano. */
@media (max-width: 620px) {
    .sc-ci-count-l  { display: none; }
    .sc-ci-count-bar { width: 60px; margin-top: 3px; }
    .sc-ci-op-name  { display: none; }
    .sc-ci-bar      { gap: 8px; }
}

/* Telefoni molto stretti: solo qui vale la pena andare a capo */
@media (max-width: 340px) {
    .sc-ci-bar { flex-wrap: wrap; }
    .sc-ci-bar-conf { flex: 1 1 100%; }
}

/* ── Shortcode frontend ── */
/* 680px invece di 500: da quando i campi possono stare a metà riga, due colonne
   dentro 500px lasciavano 240px per campo — stretti per una data o un menu.
   `width: 100%` perché il modulo riempia comunque la colonna che il tema gli
   concede: se quella è più stretta del tetto, il tetto non si vede proprio.
   Il tetto si può alzare per singolo inserimento con
   `[servizio_chiesa_conferenza id="1" larghezza="820"]`, che imposta la custom
   property — oltre la colonna del tema, però, non si va. */
.sc-conf-shortcode {
    width: 100%;
    max-width: var(--sc-conf-form-w, 680px);
    margin: 0 auto;
}

.sc-conf-success {
    text-align: center;
    padding: 36px 24px;
    background: #f0fdf4;
    border: 1px solid #86efac;
    border-radius: 12px;
}
.sc-conf-success-icon { font-size: 44px; display: block; margin-bottom: 12px; }
.sc-conf-success h3   { margin: 0 0 8px; font-size: 20px; font-weight: 700; color: #166534; }
.sc-conf-success p    { margin: 0; font-size: 14px; color: #374151; }

.sc-conf-notice-err {
    padding: 10px 14px;
    background: #fef2f2;
    border: 1px solid #fca5a5;
    border-radius: 8px;
    margin-bottom: 14px;
    font-size: 14px;
    color: #991b1b;
}
.sc-conf-msg-info { font-size: 14px; color: #6b7280; font-style: italic; }

.sc-conf-header       { margin-bottom: 22px; }
.sc-conf-img          { width: 100%; max-height: 200px; object-fit: cover; border-radius: 10px; margin-bottom: 12px; display: block; }
.sc-conf-titolo       { font-size: 20px; font-weight: 700; margin: 0 0 6px; color: #111827; }
.sc-conf-luogo,
.sc-conf-data         { margin: 3px 0; font-size: 14px; color: #374151; }
.sc-conf-posti        { margin: 6px 0 0; font-size: 13px; font-weight: 600; color: var(--sc-blue, #2563eb); }
.sc-conf-posti.esauriti { color: var(--sc-red, #dc2626); }
.sc-conf-desc         { margin-top: 10px; font-size: 14px; color: #4b5563; line-height: 1.65; }

/* Form iscrizione shortcode */
.sc-conf-form {
    --sc-form-pad: 28px;   /* usato dai blocchi che vanno a filo card su mobile */
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 28px var(--sc-form-pad) 24px;
    margin-top: 20px;
    box-shadow: 0 4px 24px rgba(0,0,0,.07);
}
.sc-conf-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 14px;
}
@media (max-width: 480px) { .sc-conf-form-row { grid-template-columns: 1fr; } }
.sc-conf-form-field { margin-bottom: 16px; }
/* Etichetta del campo. Le esclusioni non sono decorative: `.sc-campo-opt-label`
   e `.sc-campo-consenso` **sono anch'esse <label>**, e questa regola (0,1,1) batte
   le loro (0,1,0) — si prendevano `display:block` al posto del flex (radio e testo
   non più centrati), 13px in grassetto grigio su una frase di consenso, e un
   margine di 6px che si sommava al gap delle opzioni. Stesso schema già usato per
   `.sc-modal label:not(.sc-chip-check)` in sc-global.css. */
.sc-conf-form-field label:not(.sc-campo-opt-label):not(.sc-campo-consenso) {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #374151;
    margin-bottom: 6px;
    letter-spacing: .01em;
}
.sc-conf-form-field input:not([type=radio]):not([type=checkbox]),
.sc-conf-form-field select,
.sc-conf-form-field textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 14px;
    border: 1.5px solid #e5e7eb;
    border-radius: 10px;
    font-size: 14px;
    font-family: inherit;
    color: #111827;
    background-color: #f9fafb;
    transition: border-color .18s, background .18s, box-shadow .18s;
    line-height: 1.5;
}
.sc-conf-form-field input:not([type=radio]):not([type=checkbox]):focus,
.sc-conf-form-field select:focus,
.sc-conf-form-field textarea:focus {
    outline: none;
    border-color: var(--sc-blue, #2563eb);
    background-color: #fff;
    box-shadow: 0 0 0 4px rgba(37,99,235,.10);
}
.sc-conf-form-field textarea { resize: vertical; min-height: 80px; }
.sc-conf-form-field .sc-campo-hint {
    display: block !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    color: #6b7280 !important;
    margin-top: 5px !important;
    line-height: 1.4 !important;
}
.sc-conf-submit {
    width: 100%;
    padding: 13px;
    background: var(--sc-blue, #2563eb);
    color: #fff;
    border: none;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    margin-top: 8px;
    letter-spacing: .015em;
    transition: background .15s, box-shadow .15s, transform .1s;
    box-shadow: 0 2px 10px rgba(37,99,235,.22);
}
@media (hover: hover) {
.sc-conf-submit:hover {
    background: var(--sc-blue-dark, #1d4ed8);
    box-shadow: 0 4px 18px rgba(37,99,235,.32);
    transform: translateY(-1px);
}
}
.sc-conf-submit:active { transform: none; }
.sc-conf-submit--mt { margin-top: 16px; }

/* ── Tabella iscrizioni: righe espandibili ── */
.sc-iscr-table .sc-iscr-main { cursor: pointer; }
@media (hover: hover) {
.sc-iscr-table .sc-iscr-main:hover { background: #f8fafc; }
}

.sc-iscr-chevron {
    display: inline-block;
    font-size: 9px;
    color: #6b7280;
    margin-right: 6px;
    transition: color .15s;
    vertical-align: middle;
}
@media (hover: hover) {
.sc-iscr-main:hover .sc-iscr-chevron { color: #6b7280; }
}

.sc-iscr-detail { display: none; }
.sc-iscr-detail.open { display: table-row; }
.sc-iscr-detail > td {
    padding: 0 !important;
    border-top: none !important;
    background: #f8fafc;
}

.sc-iscr-detail-inner {
    padding: 10px 20px 0 36px;
    display: flex;
    flex-direction: column;
    border-bottom: 1px solid #e5e7eb;
}
.sc-iscr-detail-field {
    display: flex;
    align-items: baseline;
    gap: 14px;
    padding: 5px 0;
    font-size: 13px;
    color: #374151;
    border-bottom: 1px solid #f9fafb;
}
.sc-iscr-detail-label {
    flex: 0 0 120px;
    font-size: 11px;
    font-weight: 700;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: .04em;
    white-space: nowrap;
    padding-top: 1px;
}

/* Sezione campi personalizzati */
.sc-iscr-extra-section {
    display: flex;
    flex-direction: column;
    border-top: 1px solid #f1f5f9;
    padding-top: 4px;
    margin-top: 2px;
}
.sc-iscr-extra-head {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--sc-muted, #6b7280);
    margin: 4px 0 2px;
}
.sc-iscr-val-yes { color: #16a34a; font-weight: 600; }
.sc-iscr-nodata  { color: #6b7280; font-size: 12px; font-style: italic; padding: 4px 0; }

/* Token collassabile */
.sc-iscr-token {
    border-top: 1px solid #f1f5f9;
    padding: 8px 0 10px;
    margin-top: 2px;
}
.sc-iscr-token summary {
    font-size: 11px;
    font-weight: 600;
    color: #c4b5fd;
    cursor: pointer;
    user-select: none;
    list-style: none;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: color .15s;
}
.sc-iscr-token summary::before         { content: '▶'; font-size: 8px; }
.sc-iscr-token[open] summary::before   { content: '▼'; }
.sc-iscr-token summary::-webkit-details-marker { display: none; }
.sc-iscr-token[open] summary { color: #7c3aed; margin-bottom: 6px; }
.sc-iscr-token-val {
    display: block;
    font-family: monospace;
    font-size: 11px;
    color: #374151;
    background: #f8fafc;
    border: 1px solid #e5e7eb;
    border-radius: 5px;
    padding: 5px 10px;
    word-break: break-all;
    margin-top: 4px;
}

/* ── Iscrizioni — filtri e tabella ── */

.sc-iscr-filter-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px 16px;
    background: var(--sc-surface, #fff);
    border: var(--sc-border, 1px solid #eef1f4);
    border-radius: var(--sc-radius, 10px);
    box-shadow: var(--sc-shadow, 0 1px 2px rgba(16,24,40,.04), 0 8px 22px -14px rgba(16,24,40,.16));
    padding: 12px 16px;
    margin-bottom: 16px;
}
.sc-iscr-filter-form {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}
/* I campi della toolbar sono **`.sc-input--sm`**, la classe canonica del design
   system (sc-global.css), non tre definizioni scritte a mano qui: erano 36px /
   raggio 8 / bordo #d1d5db / fondo #f9fafb per filtri e ricerca e **32px /
   raggio 7 / 12px** per la tendina dell'export — che di quello stile non aveva
   proprio niente, essendo l'unica a non condividerne nemmeno l'altezza. Qui
   resta solo ciò che è **contesto**: come si dispongono in riga. La larghezza va
   a doppia classe (`.sc-iscr-filter-form .sc-input`), perché il campo canonico
   nasce `width:100%` e a classe singola non lo si batte. */
.sc-iscr-filter-form .sc-input { flex: 0 1 auto; width: auto; }
.sc-iscr-filter-form input[type="search"].sc-input { flex: 1 1 180px; min-width: 140px; }

/* Tasti e pillole alla stessa altezza dei campi: una riga sola, non tre misure */
.sc-iscr-filter-card .sc-btn-sm {
    height: 34px;
    box-sizing: border-box;
}
/* Gruppo KPI compatto dentro la toolbar, pinnato a destra */
.sc-iscr-kpi-pills {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
}

/* Pill compatte inline (toolbar iscrizioni + header conferenza in iscrizione manuale) */
.sc-iscr-kpi-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 0 12px;
    height: 34px;
    box-sizing: border-box;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 20px;
    box-shadow: 0 1px 3px rgba(0,0,0,.04);
    /* Una pillola è un dato solo: o ci sta in riga o va a capo **intera**. Senza,
       a schermo stretto «221/290 posti in sala» si spezzava dentro il suo bordo e
       la fila di pillole diventava di due altezze diverse. */
    white-space: nowrap;
}
.sc-iscr-kpi-num {
    font-size: 15px;
    font-weight: 800;
    color: #1f2937;
    line-height: 1;
}
.sc-iscr-kpi-lbl {
    font-size: 12px;
    font-weight: 600;
    color: #6b7280;
}
/* Secondo dato dentro la stessa pillola, dietro un separatore: dice che è lo
   stesso insieme letto in un altro modo (iscrizioni → persone), non un totale a
   sé. Da pillola separata si confondeva con i posti occupati in sala. */
.sc-iscr-kpi-sub {
    font-size: 12px;
    font-weight: 600;
    color: #6b7280;
    margin-left: 3px;
    padding-left: 8px;
    border-left: 1px solid #e5e7eb;
}

.sc-iscr-kpi-item.green { border-color: #86efac; background: #f0fdf4; }
.sc-iscr-kpi-item.green .sc-iscr-kpi-num { color: #166534; }
.sc-iscr-kpi-item.green .sc-iscr-kpi-lbl { color: #15803d; }
.sc-iscr-kpi-item.orange { border-color: #fdba74; background: #fff7ed; }
.sc-iscr-kpi-item.orange .sc-iscr-kpi-num { color: #c2410c; }
.sc-iscr-kpi-item.orange .sc-iscr-kpi-lbl { color: #b45309; }

/* Export inline dentro la toolbar filtri (dopo i KPI) */
.sc-iscr-export-inline {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
}

/* Colonne tabella iscrizioni */
.sc-iscr-table .sc-iscr-col-conf { font-size: 13px; }
.sc-iscr-table .sc-iscr-col-ci   { text-align: center; }
.sc-iscr-table .sc-iscr-col-ci small { color: #6b7280; font-size: 11px; }
.sc-iscr-table .sc-iscr-col-data { font-size: 13px; white-space: nowrap; }
/* La colonna dei posti si prende lo spazio che avanza: è l'unica a contenuto
   variabile (da «—» a quattro sedie per nome), e senza questo il tavolo lasciava
   un vuoto di un centinaio di pixel prima di «Check-in» mentre gli elenchi lunghi
   andavano a capo. `width: 100%` su una cella di tabella vale «prenditi il resto». */
.sc-iscr-table .sc-iscr-col-posti { width: 100%; }
/* …ma non a spese del nome: lasciandogli la sola larghezza «avanzata» un
   «Valentina Basile» andava a capo e la sua riga diventava alta il doppio delle
   altre. Un minimo alla prima colonna e l'elenco resta a una riga per iscritto. */
.sc-iscr-table thead th:first-child,
.sc-iscr-table .sc-iscr-main td:first-child { min-width: 165px; }
.sc-iscr-table .sc-iscr-ci-empty { color: #6b7280; }
/* Posto non ancora assegnato (scelta facoltativa): non è un dato mancante, è uno
   stato — quindi non il grigio del trattino, ma nemmeno l'evidenza di un posto vero. */
.sc-iscr-table .sc-iscr-posti-attesa {
    font-size: 12px;
    font-style: italic;
    color: #4b5563;
}
.sc-iscr-empty { text-align: center; padding: 30px; color: #6b7280; }

/* L'export sta in fondo alla toolbar: quando non ci sta in riga va a capo, e
   deve restare **incolonnato con le pillole** invece di scivolare a sinistra —
   con `justify-content: space-between` un elemento solo sulla seconda riga
   finirebbe lì, e sembrerebbe caduto. */
.sc-iscr-export-inline { margin-left: auto; }

/* Sotto una certa larghezza le pillole vanno a capo invece di uscire dal
   riquadro: erano `inline-flex` senza `wrap`, e a 390px sbordavano di 96px
   portandosi dietro lo scorrimento orizzontale di tutta la pagina. */
.sc-iscr-kpi-pills { flex-wrap: wrap; }

/* ── Iscrizioni su schermo stretto: la riga diventa una scheda ──────────────
   La tabella ha otto colonne; sotto i 782px (la soglia di WordPress, che qui
   ricolonna anche la sua chrome) nasconde l'intestazione e impila le celle. Fin
   qui c'era già, ma **senza etichette**: restava una colonna di valori nudi —
   «1», «—», «—» — in cui non si capiva quale fosse il numero di persone e quale
   il posto. Ogni cella porta ora il suo `data-label` da PHP e lo stampa davanti
   al valore; nome, stato e azioni no, perché si riconoscono da soli. */
@media (max-width: 782px) {
    .sc-iscr-table,
    .sc-iscr-table tbody { display: block; width: 100%; }
    .sc-iscr-table thead { display: none; }
    .sc-iscr-table tbody tr { border-bottom: none; }

    .sc-iscr-table .sc-iscr-main {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        gap: 2px 14px;
        position: relative;
        padding: 12px 44px 12px 12px;   /* spazio a destra per il menu «⋯» */
        border: 1px solid #eef1f4;
        border-radius: 10px;
        margin-bottom: 8px;
        background: #fff;
    }
    .sc-iscr-table .sc-iscr-main:hover { background: #f8fafc; }
    .sc-iscr-table .sc-iscr-main td {
        display: block;
        padding: 2px 0;
        border: none;
        font-size: 13px;
    }
    /* Etichetta davanti al valore: è ciò che l'intestazione nascosta non dice più */
    .sc-iscr-table .sc-iscr-main td[data-label]::before {
        content: attr(data-label) ": ";
        font-size: 11px;
        font-weight: 600;
        color: #64748b;
    }
    /* Nome ed email prendono tutta la riga; il nome fa da titolo della scheda */
    .sc-iscr-table .sc-iscr-main td:first-child { flex: 1 1 100%; font-size: 14px; }
    /* Si aggancia alla **classe**, mai al testo del `data-label`: quello è
       tradotto, e in spagnolo un selettore su «Email» non troverebbe più niente. */
    .sc-iscr-table .sc-iscr-main .sc-iscr-col-email,
    .sc-iscr-table .sc-iscr-main .sc-iscr-col-conf,
    .sc-iscr-table .sc-iscr-main .sc-iscr-col-posti { flex: 1 1 100%; }
    /* I campi corti stanno affiancati: tre righe invece di otto */
    .sc-iscr-table .sc-iscr-main .sc-iscr-col-stato,
    .sc-iscr-table .sc-iscr-main .sc-iscr-col-persone,
    .sc-iscr-table .sc-iscr-main .sc-iscr-col-ci,
    .sc-iscr-table .sc-iscr-main .sc-iscr-col-data { flex: 0 0 auto; }
    /* In colonna il centrato non ha più un asse rispetto a cui centrarsi */
    .sc-iscr-table .sc-iscr-main .sc-iscr-col-persone,
    .sc-iscr-table .sc-iscr-main .sc-iscr-col-ci { text-align: left; }
    .sc-iscr-col-conf, .sc-iscr-col-data { font-size: 12px; }
    /* Il menu della riga si ancora in alto a destra della scheda */
    .sc-iscr-table .sc-iscr-main .sc-iscr-actions {
        position: absolute;
        top: 8px;
        right: 8px;
        padding: 0;
    }

    /* Il dettaglio è un blocco sotto la scheda, non più una riga di tabella */
    .sc-iscr-table .sc-iscr-detail { display: none; }
    .sc-iscr-table .sc-iscr-detail.open { display: block; }
    .sc-iscr-table .sc-iscr-detail > td { display: block; padding: 0 0 10px; }
    .sc-iscr-detail-inner { border-radius: 10px; }

    /* Toolbar: i controlli si dispongono da soli — due o tre per riga finché ci
       stanno, uno solo sul telefono — invece di prendersi ciascuno tutta la
       larghezza (a 782px erano cinque righe per cinque campi). */
    .sc-iscr-filter-form { gap: 8px; }
    /* Doppia classe anche qui: `.sc-iscr-filter-form select` (0,1,1) perderebbe
       contro `.sc-iscr-filter-form .sc-input` (0,2,0) del blocco desktop, e i
       campi resterebbero a larghezza automatica anche sul telefono. */
    .sc-iscr-filter-form .sc-input { flex: 1 1 140px; min-width: 0; }
    /* La tendina delle conferenze tiene la riga tutta per sé: è quella con il
       testo lungo, ed è l'unica che deve restare leggibile per intero — sapere
       *quale* evento si sta guardando viene prima di risparmiare una riga. */
    .sc-iscr-filter-form select[name="conf_id"].sc-input { flex: 1 1 100%; }
    .sc-iscr-filter-form input[type="search"].sc-input { flex: 1 1 160px; }
    .sc-iscr-filter-form .sc-btn-sm { flex: 0 0 auto; }
    .sc-iscr-export-inline { flex: 1 1 100%; margin-left: 0; }
    .sc-iscr-export-inline .sc-btn-sm { flex: 1 1 auto; justify-content: center; }
}

/* Sotto i 480px anche le pillole vanno a tutta riga: affiancate, con numeri a
   due cifre e un'etichetta ciascuna, si spezzavano su due righe a testa. */
@media (max-width: 480px) {
    .sc-iscr-kpi-pills { width: 100%; }
    /* Si dispongono da sole: quelle corte si affiancano, quella lunga prende la
       riga che le serve. Una griglia a metà larghezza fissa spezzerebbe le lunghe. */
    .sc-iscr-kpi-item { flex: 1 1 auto; justify-content: center; }
    /* I tasti restano della loro misura anche qui: allargarli a metà riga faceva
       diventare «Azzera» — che è l'azione secondaria — una fascia da 316px sotto
       tutto il resto, più vistosa di «Cerca». */
}

/* ── Report — panel, chart, tabella globale ── */

/* KPI dettaglio conferenza: tutte le card su una sola riga (desktop),
   si restringono per stare in linea invece di andare a capo */
@media (min-width: 783px) {
    .sc-kpi-grid.sc-kpi-row {
        grid-template-columns: none;
        grid-auto-flow: column;
        grid-auto-columns: minmax(0, 1fr);
    }
}

.sc-cr-grid {
    display: grid;
    grid-template-columns: 3fr 2fr;
    gap: 16px;
    margin-bottom: 16px;
    align-items: start;
}
@media (max-width: 860px) { .sc-cr-grid { grid-template-columns: 1fr; } }

.sc-cr-panel {
    background: var(--sc-surface, #fff);
    border: var(--sc-border, 1px solid #eef1f4);
    border-radius: var(--sc-radius, 10px);
    box-shadow: var(--sc-shadow, 0 1px 2px rgba(16,24,40,.04), 0 8px 22px -14px rgba(16,24,40,.16));
    padding: 20px 24px;
    margin-bottom: 16px;
}
.sc-cr-panel:last-child { margin-bottom: 0; }

.sc-cr-panel-title {
    font-size: 11px;
    font-weight: 700;
    color: var(--sc-muted, #6b7280);
    text-transform: uppercase;
    letter-spacing: .06em;
    margin: 0 0 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid #f1f5f9;
}

.sc-cr-empty {
    color: #6b7280;
    font-size: 13px;
    text-align: center;
    padding: 20px 0;
    margin: 0;
}

/* Bar chart */
.sc-cr-bar-chart { display: flex; flex-direction: column; gap: 8px; }
.sc-cr-bar-row   { display: flex; align-items: center; gap: 10px; }
.sc-cr-bar-label { width: 76px; flex-shrink: 0; text-align: right; color: #374151; font-weight: 600; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sc-cr-bar-track { flex: 1; background: #f3f4f6; border-radius: 5px; height: 22px; overflow: hidden; }
.sc-cr-bar-fill  { width: var(--w, 0%); height: 100%; border-radius: 5px; display: flex; align-items: center; padding-left: 8px; min-width: 3px; background: #2563eb; transition: width .35s; }
.sc-cr-bar-fill.checkin { background: #0891b2; }
.sc-cr-bar-fill span { font-size: 11px; color: #fff; font-weight: 700; white-space: nowrap; }
.sc-cr-bar-ext   { font-size: 11px; color: #6b7280; white-space: nowrap; min-width: 22px; text-align: right; }

/* Distribuzione stati */
.sc-cr-stato-list { display: flex; flex-direction: column; gap: 9px; }
.sc-cr-stato-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    border-radius: 9px;
    background: #f8fafc;
    border-left: 3px solid #e5e7eb;
}
.sc-cr-stato-item.conf    { border-left-color: #16a34a; }
.sc-cr-stato-item.att     { border-left-color: #f59e0b; }
.sc-cr-stato-item.ann     { border-left-color: #dc2626; }
.sc-cr-stato-item.checkin { border-left-color: #2563eb; }
.sc-cr-stato-lbl { font-size: 12px; font-weight: 600; color: #374151; }
.sc-cr-stato-pct { font-size: 11px; color: #6b7280; margin-top: 1px; }
.sc-cr-stato-num { font-size: 26px; font-weight: 900; line-height: 1; }
.sc-cr-stato-num.conf    { color: #16a34a; }
.sc-cr-stato-num.att     { color: #f59e0b; }
.sc-cr-stato-num.ann     { color: #dc2626; }
.sc-cr-stato-num.checkin { color: #2563eb; }

/* Tabella panoramica globale: è una `.sc-lib-table` come quelle di Conferenze,
   Layout posti e Iscrizioni — prima era una seconda tabella scritta a mano, con
   dodici valori diversi dalle altre (intestazioni #6b7280/.05em su #f8fafc,
   celle 11px, hover #f9fafb) per lo stesso identico oggetto. Qui resta solo
   quello che è suo: sta **dentro** un pannello e ne esce ai lati, quindi non
   ripete la scatola (niente ombra, niente raggio, niente fondo proprio) e le
   celle di bordo recuperano il padding del pannello. */
.sc-cr-panel:has(.sc-cr-global-table) { overflow: hidden; }
.sc-cr-panel:has(.sc-cr-global-table) .sc-cr-panel-title {
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 16px;
}
.sc-cr-global-table.sc-lib-table {
    width: calc(100% + 48px);
    margin: 0 -24px -20px;
    background: transparent;
    border-radius: 0;
    box-shadow: none;
}
.sc-cr-global-table th:first-child,
.sc-cr-global-table td:first-child { padding-left: 24px; }
.sc-cr-global-table th:last-child,
.sc-cr-global-table td:last-child  { padding-right: 24px; }
.sc-cr-col-data { white-space: nowrap; font-size: 12px; color: #6b7280; }
.sc-cr-sub       { color: #6b7280; font-size: 11px; }
.sc-cr-annullati { font-size: 11px; color: #dc2626; margin-left: 4px; }
.sc-cr-empty-val { color: #6b7280; }

/* Progress bar presenza */
.sc-cr-prog       { display: inline-flex; align-items: center; gap: 7px; }
.sc-cr-prog-track { width: 60px; height: 5px; background: #e5e7eb; border-radius: 3px; overflow: hidden; }
.sc-cr-prog-fill  { width: var(--w, 0%); height: 100%; border-radius: 3px; background: #2563eb; }
.sc-cr-prog-pct   { font-size: 12px; font-weight: 700; color: #374151; }

/* Export buttons nel topbar report */
.sc-cr-export-btns {
    display: flex;
    gap: 6px;
    margin-left: auto;
    flex-wrap: wrap;
}

/* Bottone verde per Excel */
.sc-btn-green {
    background: #16a34a;
    color: #fff;
    border-color: #15803d;
}
@media (hover: hover) {
.sc-btn-green:hover { background: #15803d; }
}

/* Mobile: tabella globale */
@media (max-width: 640px) {
    .sc-cr-global-table thead { display: none; }
    .sc-cr-global-table td { display: block; padding: 5px 14px; border: none; }
    .sc-cr-global-table tr td:first-child { padding-top: 12px; }
    .sc-cr-global-table tr td:last-child  { padding-bottom: 12px; border-bottom: 1px solid #f3f4f6; }
    .sc-cr-global-table tr:last-child td:last-child { border-bottom: none; }
}

/* ── Form Builder (tab "Form iscrizione") ── */
.sc-formbuilder-lock { color: #6b7280; font-size: 12px; }

.sc-formbuilder-type-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    white-space: nowrap;
    background: #e0e7ff;
    color: #3730a3;
}
.sc-type-radio, .sc-type-checkbox { background: #dcfce7; color: #166534; }
.sc-type-select                   { background-color: #fef9c3; color: #854d0e; }
.sc-type-textarea                  { background: #f3f4f6; color: #374151; }
.sc-type-consenso                  { background: #fef3c7; color: #92400e; }
.sc-type-eta                       { background: #e0f2fe; color: #0369a1; }

.sc-formbuilder-req { color: #ef4444; font-weight: 700; font-size: 13px; }

/* Con più condizioni il badge non è più una manciata di parole: `nowrap` lo
   faceva debordare dalla card, che nella lista a due colonne può essere larga
   metà riga. Va a capo, e `inline-block` gli tiene sfondo e padding coerenti
   sulle righe successive. */
.sc-formbuilder-logic-badge {
    display: inline-block;
    font-size: 11px;
    line-height: 1.5;
    color: #7c3aed;
    background: #ede9fe;
    border-radius: 6px;
    padding: 2px 8px;
    max-width: 100%;
}

.sc-btn-xs {
    padding: 3px 8px;
    font-size: 12px;
    border-radius: 5px;
    border: 1px solid #d1d5db;
    background: #f8fafc;
    color: #374151;
    cursor: pointer;
    line-height: 1.4;
}
@media (hover: hover) {
.sc-btn-xs:hover { background: #e5e7eb; }
}
.sc-btn-xs.danger { color: #991b1b; border-color: #fca5a5; background: #fff1f2; }
@media (hover: hover) {
.sc-btn-xs.danger:hover { background: #fee2e2; }
}
.sc-btn-xs:disabled { opacity: .35; cursor: default; }

/* ── Campi personalizzati nel form pubblico (shortcode) ── */
.sc-campo-radios,
.sc-campo-checkboxes { display: flex; flex-direction: column; gap: 8px; margin-top: 2px; }
.sc-campo-opt-label {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    cursor: pointer;
    padding: 10px 14px;
    border-radius: 10px;
    border: 1.5px solid #e5e7eb;
    background-color: #f9fafb;
    transition: border-color .15s, background .15s, color .15s;
    user-select: none;
}
@media (hover: hover) {
.sc-campo-opt-label:hover {
    border-color: var(--sc-blue, #2563eb);
    background: #eff6ff;
}
}
.sc-campo-opt-label:has(input:checked) {
    border-color: var(--sc-blue, #2563eb);
    background: #eff6ff;
    color: #1d4ed8;
    font-weight: 600;
}
.sc-campo-opt-label input[type="radio"],
.sc-campo-opt-label input[type="checkbox"] {
    appearance: auto !important;
    -webkit-appearance: auto !important;
    border: unset !important;
    border-radius: unset !important;
    background: unset !important;
    box-shadow: unset !important;
    padding: 0 !important;
    width: 16px !important;
    height: 16px !important;
    margin: 0 !important;
    flex-shrink: 0;
    cursor: pointer;
    accent-color: var(--sc-blue, #2563eb);
}
.sc-campo-consenso {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 14px;   /* stessa cassa dei campi e delle opzioni */
    border-radius: 10px;
    border: 1.5px solid #e5e7eb;
    background-color: #f9fafb;
    cursor: pointer;
    font-size: 14px;
    line-height: 1.55;
    color: #374151;
    margin-top: 2px;
    user-select: none;
    transition: border-color .15s, background .15s;
}
@media (hover: hover) {
.sc-campo-consenso:hover { border-color: var(--sc-blue, #2563eb); background-color: #eff6ff; }
}
/* Accettato: stesso stato «scelto» delle opzioni, non una tinta a sé */
.sc-campo-consenso:has(input:checked) {
    border-color: var(--sc-blue, #2563eb);
    background-color: #eff6ff;
    color: #1d4ed8;
}
.sc-campo-consenso input[type="checkbox"] {
    margin-top: 2px;
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    accent-color: var(--sc-blue, #2563eb);
}

/* ── Editor conferenza: aggiunte al componente condiviso .sc-editor-*
   (che ora vive in sc-global.css, vedi docs/ui-e-css.md) ── */

.sc-editor-fields .sc-conf-field { margin-bottom: 0; }

/* Checkbox inline sotto un campo numerico */
.sc-toggle-inline {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #4b5563;
    font-weight: 400;
    margin-top: 7px;
    cursor: pointer;
    user-select: none;
}
.sc-toggle-inline input[type="checkbox"] {
    appearance: auto !important;
    -webkit-appearance: auto !important;
    border: unset !important;
    border-radius: unset !important;
    background: unset !important;
    box-shadow: unset !important;
    padding: 0 !important;
    width: 14px !important;
    height: 14px !important;
    margin: 0 !important;
    flex-shrink: 0;
    cursor: pointer;
    accent-color: var(--sc-blue,#2563eb);
}

/* Annulla margini default del form in modo che la prima section si attacchi al nav */
#sc-editor-form { margin: 0; padding: 0; }

/* ── Sessioni (editor) ── */
.sc-sess-day-group { margin-bottom: 18px; }
.sc-sess-day-header {
    font-size: 11px;
    font-weight: 700;
    color: var(--sc-muted, #6b7280);
    text-transform: uppercase;
    letter-spacing: .06em;
    padding-bottom: 6px;
    border-bottom: 1px solid #e5e7eb;
    margin-bottom: 8px;
}
.sc-sess-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: #f8fafc;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    margin-bottom: 6px;
}
.sc-sess-item-time {
    font-family: monospace;
    font-size: 12px;
    color: #6b7280;
    white-space: nowrap;
    min-width: 90px;
}
.sc-sess-item-info { flex: 1; font-size: 13px; line-height: 1.5; }
.sc-sess-item-info small { color: #6b7280; }
.sc-sess-item-actions { display: flex; gap: 6px; flex-shrink: 0; }
.sc-sess-empty { color: #6b7280; font-size: 13px; padding: 10px 0; margin: 0; }

.sc-sess-panel {
    margin: 16px 0;
    padding: 20px;
    background: #f0f7ff;
    border: 1px solid #bfdbfe;
    border-radius: 10px;
}
.sc-sess-panel-title {
    font-weight: 700;
    font-size: 14px;
    color: #1d4ed8;
    margin-bottom: 16px;
}
.sc-sess-panel-actions { display: flex; gap: 10px; margin-top: 16px; }
.sc-sess-add-main-btn { margin-top: 12px; }

/* ── Form builder: canvas (lista campi) ── */
.sc-fb-canvas {
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    overflow: hidden;
}
.sc-fb-fixed-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    background: #f9fafb;
    border-bottom: 1px solid #e5e7eb;
}
.sc-fb-fixed-label-head {
    font-size: 11px;
    font-weight: 700;
    color: var(--sc-muted, #6b7280);
    text-transform: uppercase;
    letter-spacing: .06em;
    width: 100%;
    margin-bottom: 4px;
}
.sc-fb-fixed-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    padding: 4px 10px;
    font-size: 12px;
    color: #374151;
}
.sc-fb-tel-toggle { font-size: 11px; color: #6b7280; font-weight: 500; margin-left: 2px; margin-top: 0; cursor: pointer; }
.sc-fb-tel-toggle input { width: auto; margin: 0; cursor: pointer; }
.sc-fb-items { padding: 10px 14px; min-height: 50px; }
.sc-fb-empty { color: #6b7280; font-size: 13px; margin: 0; padding: 6px 0; }

.sc-fb-add-row {
    padding: 10px 16px;
    border-top: 1px solid #e5e7eb;
    background: #f9fafb;
}

.sc-fb-field-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    margin-bottom: 6px;
    background: #fff;
    transition: border-color .15s;
}
.sc-fb-field-card:last-child { margin-bottom: 0; }
@media (hover: hover) {
.sc-fb-field-card:hover { border-color: #93c5fd; }
}
.sc-fb-card-main { display: flex; align-items: center; gap: 8px; flex: 1; flex-wrap: wrap; font-size: 13px; }
.sc-fb-card-label { font-weight: 500; color: #1f2937; }
.sc-fb-card-actions { display: flex; gap: 5px; flex-shrink: 0; }

/* ── Form builder: pannello editor (stile CF7) ── */
/* Editor campo in modale: box più largo per la griglia tipi; le righe .sc-fb-row
   gestiscono il proprio padding, quindi il body del modale è a padding 0 */
.sc-fb-modal-box { max-width: 600px; }
.sc-fb-modal-body { padding: 0; }
.sc-fb-editor-actions { flex-shrink: 0; }

/* Righe del pannello editor — NON usano .sc-conf-field per evitare conflitti CSS */
.sc-fb-row {
    padding: 14px 20px;
    border-bottom: 1px solid #f1f5f9;
}
.sc-fb-row-label {
    display: block;
    font-size: 12px;
    font-weight: 700;
    color: #374151;
    margin-bottom: 7px;
}
.sc-fb-row-hint {
    font-weight: 400;
    color: #6b7280;
    font-size: 11px;
    margin-left: 6px;
}
.sc-fb-req-star { color: #ef4444; }

/* Input del pannello editor: classe canonica .sc-input--sm (vedi sc-global) */

/* Griglia bottoni tipo campo */
.sc-fb-type-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}
.sc-fb-type-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 13px;
    border-radius: 8px;
    border: 2px solid #e5e7eb;
    background: #f9fafb;
    cursor: pointer;
    font-size: 13px;
    color: #4b5563;
    font-weight: 500;
    font-family: inherit;
    line-height: 1;
    transition: border-color .15s, background .15s, color .15s;
}
@media (hover: hover) {
.sc-fb-type-btn:hover { border-color: #93c5fd; background: #eff6ff; color: #1d4ed8; }
}
.sc-fb-type-btn.active { border-color: #3b82f6; background: #dbeafe; color: #1d4ed8; font-weight: 700; }
.sc-fb-type-icon { font-size: 14px; width: 16px; text-align: center; }

/* Toggle switch per "Campo obbligatorio" */
.sc-fb-row-toggle {
    display: flex;
    align-items: center;
    gap: 12px;
    border-bottom: 1px solid #f1f5f9;
    padding: 14px 20px;
}
.sc-fb-toggle {
    position: relative;
    display: inline-flex;
    align-items: center;
    width: 42px;
    height: 24px;
    flex-shrink: 0;
    cursor: pointer;
}
.sc-fb-toggle input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}
.sc-fb-toggle-track {
    position: absolute;
    inset: 0;
    background: #d1d5db;
    border-radius: 24px;
    transition: background .2s;
    pointer-events: none;
}
.sc-fb-toggle input:checked + .sc-fb-toggle-track { background: #3b82f6; }
.sc-fb-toggle-thumb {
    position: absolute;
    left: 3px;
    top: 3px;
    width: 18px;
    height: 18px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0,0,0,.25);
    transition: transform .2s;
    pointer-events: none;
}
.sc-fb-toggle input:checked + .sc-fb-toggle-track .sc-fb-toggle-thumb { transform: translateX(18px); }
.sc-fb-toggle-label { font-size: 13px; font-weight: 600; color: #374151; cursor: pointer; user-select: none; }

/* Logica condizionale */
.sc-fb-logic-details { border-top: 1px solid #f1f5f9; }
.sc-fb-logic-details summary {
    display: flex;
    align-items: center;
    gap: 8px;
    list-style: none;
    padding: 12px 20px;
    font-size: 12px;
    color: #6b7280;
    font-weight: 600;
    cursor: pointer;
    user-select: none;
}
.sc-fb-logic-details summary::-webkit-details-marker { display: none; }
.sc-fb-logic-details[open] summary { border-bottom: 1px solid #f1f5f9; }
.sc-fb-logic-details .sc-fb-row:last-child { border-bottom: none; }
.sc-fb-logic-desc { font-size: 12px; color: #6b7280; margin: 0; padding: 10px 20px 4px; }
.sc-input.sc-logic-op-select { flex: 0 0 auto; width: auto; min-width: 130px; }

/* Elenco delle condizioni: una riga per condizione, campo · operatore · valore.
   Il valore prende lo spazio che avanza perché è l'unico pezzo di lunghezza
   imprevedibile; gli altri due si dimensionano sul contenuto. */
.sc-logic-rules { padding: 4px 20px 0; }

.sc-logic-rule {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
}
.sc-logic-rule { flex-wrap: wrap; }
/* Le etichette in parole sono più larghe dei simboli di prima: «non è compilato»
   a 13px non entra nei 130px del menu operatore e verrebbe tagliata. */
.sc-logic-rule .sc-logic-op-select { min-width: 150px; }
.sc-logic-rule .sc-logic-rule-field { flex: 1 1 40%; min-width: 0; }
.sc-logic-rule .sc-logic-rule-value { flex: 1 1 30%; min-width: 0; }
/* `display:flex` sul contenitore scavalcherebbe l'attributo `hidden` */
.sc-logic-rule .sc-logic-rule-value[hidden] { display: none; }

/* Sotto i 560px i tre controlli non ci stanno in riga: il select operatore ha
   un minimo di 130px che non cede, quindi a stringersi sarebbero solo gli altri
   due, fino a diventare illeggibili. Il campo passa a riga propria e sotto
   restano operatore e valore. */
@media (max-width: 560px) {
    .sc-logic-rule .sc-logic-rule-field { flex: 1 1 100%; }
    .sc-logic-rule .sc-logic-op-select { min-width: 140px; }
    .sc-logic-rule .sc-logic-rule-value { flex: 1 1 40%; }
}

.sc-logic-rule-del {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 6px;
    background: none;
    color: #6b7280;
    font-size: 17px;
    line-height: 1;
    cursor: pointer;
    transition: color .15s, background .15s, border-color .15s;
}
@media (hover: hover) {
.sc-logic-rule-del:hover { background: #fef2f2; border-color: #fecaca; color: #dc2626; }
}
.sc-logic-rule-del:focus-visible {
    outline: none;
    border-color: #dc2626;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, .15);
}

/* Etichetta e scelta E/O sulla stessa riga: sono una frase sola («Mostra se —
   tutte le condizioni»), spezzarla su due righe la farebbe leggere come due
   impostazioni separate. */
.sc-logic-mode-row { display: flex; align-items: center; gap: 10px; }
.sc-logic-mode-row .sc-fb-row-label { margin: 0; }
.sc-logic-mode-row[hidden] { display: none; }
.sc-logic-add-row { padding-top: 4px; }
.sc-fb-optional-badge {
    font-size: 10px;
    font-weight: 600;
    background: #f3f4f6;
    color: var(--sc-muted, #6b7280);
    border-radius: 4px;
    padding: 2px 6px;
    text-transform: uppercase;
    letter-spacing: .04em;
}
/* Condizione impostata: il badge smette di dire «opzionale» e diventa il
   riepilogo della regola, quindi va letto come un dato, non come un'etichetta
   spenta — niente maiuscoletto forzato su un valore digitato dall'utente. */
.sc-fb-optional-badge.is-on {
    background: #eef2ff;
    color: #4338ca;
    text-transform: none;
    letter-spacing: 0;
    font-size: 11px;
    max-width: 260px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sc-fb-editor-actions {
    display: flex;
    gap: 10px;
    padding: 14px 20px;
    background: #f9fafb;
    border-top: 1px solid #e5e7eb;
}

/* Textarea per l'etichetta (default 2 righe, 3 per consenso) */
textarea.sc-fb-label-area {
    resize: vertical;
    min-height: 36px;
}

/* Link helper per tipo consenso */
.sc-fb-link-helper { background: #fefce8; border-bottom: 1px solid #fef08a; }
.sc-fb-link-fields {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: flex-start;
}
.sc-fb-link-fields .sc-input { flex: 1; min-width: 180px; }
.sc-fb-link-fields .sc-btn-sm   { flex-shrink: 0; margin-top: 0; align-self: center; }

/* ── Modal overlay ── */
.sc-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.45);
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
}
/* La regola display:flex vince su [hidden] (UA): guardia esplicita per il toggle JS hidden. */
.sc-modal-overlay[hidden] { display: none; }
.sc-sess-note-muted { color: #6b7280; }
.sc-modal-box {
    background: #fff;
    border-radius: 14px;
    width: 100%;
    max-width: 560px;
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0,0,0,.25);
}
.sc-modal-hd {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid #e5e7eb;
    flex-shrink: 0;
}
.sc-modal-title { font-size: 15px; font-weight: 700; color: #111827; }
.sc-modal-close {
    background: none;
    border: none;
    font-size: 18px;
    color: #6b7280;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 6px;
    line-height: 1;
}
@media (hover: hover) {
.sc-modal-close:hover { background: #f3f4f6; color: #111827; }
}
.sc-modal-note {
    padding: 8px 20px;
    font-size: 12px;
    color: #6b7280;
    background: #f9fafb;
    border-bottom: 1px solid #e5e7eb;
    flex-shrink: 0;
}
.sc-modal-body {
    overflow-y: auto;
    padding: 24px 20px;
    flex: 1;
}

/* ── Anteprima form (stile simile al form pubblico) ── */
/* ── Anteprima form builder (modal admin) ── */
#sc-preview-body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 16px; color: #111827; }
#sc-preview-body .sc-conf-shortcode { max-width: 100%; }
#sc-preview-body .sc-conf-form { box-shadow: none; margin-top: 0; }

/* ── Iscrizione manuale ── */
.sc-manreg-conf-card {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: space-between;
    padding: 12px 16px;
    background: var(--sc-surface, #fff);
    border: var(--sc-border, 1px solid #eef1f4);
    border-radius: var(--sc-radius, 10px);
    box-shadow: var(--sc-shadow, 0 1px 2px rgba(16,24,40,.04), 0 8px 22px -14px rgba(16,24,40,.16));
    margin-bottom: 16px;
}
.sc-manreg-conf-main {
    display: flex;
    flex-direction: column;
    gap: 9px;
    flex: 1 1 auto;
    min-width: 0;
}
.sc-manreg-meta-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px 14px;
}
.sc-manreg-meta {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
    color: #4b5563;
    white-space: nowrap;
}
.sc-manreg-meta-ic {
    font-size: 15px;
    width: 15px;
    height: 15px;
    color: #6b7280;
    flex-shrink: 0;
}
.sc-manreg-conf-posti {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
    flex-wrap: wrap;
}
.sc-manreg-content { width: 100%; }
.sc-manreg-form-card {
    max-width: 720px;
    margin: 0 auto;
}
.sc-manreg-form-card .sc-conf-form-field input:not([type=radio]):not([type=checkbox]),
.sc-manreg-form-card .sc-conf-form-field select,
.sc-manreg-form-card .sc-conf-form-field textarea {
    background-color: #fff;
}
.sc-manreg-send-email {
    padding: 12px 14px;
    background: #f0fdf4;
    border: 1px solid #86efac;
    border-radius: 8px;
    margin-top: 4px;
}
.sc-manreg-send-email label {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    font-weight: 600;
    color: #166534;
    cursor: pointer;
    user-select: none;
    margin: 0;
}
.sc-manreg-send-email input[type="checkbox"] {
    appearance: auto !important;
    -webkit-appearance: auto !important;
    border: unset !important;
    border-radius: unset !important;
    background: unset !important;
    box-shadow: unset !important;
    padding: 0 !important;
    width: 16px !important;
    height: 16px !important;
    min-width: 16px !important;
    margin: 0 !important;
    flex-shrink: 0;
    cursor: pointer;
    accent-color: #16a34a;
}
/* WP admin disegna un checkmark dashicon in ::before sui checkbox :checked;
   con appearance:auto si vedrebbe sopra la spunta nativa (effetto "doppia") */
.sc-manreg-send-email input[type="checkbox"]::before,
.sc-manreg-send-email input[type="checkbox"]::after {
    content: none !important;
    display: none !important;
}
.sc-manreg-note-hint {
    font-size: 11px;
    font-weight: 400;
    color: #6b7280;
    margin-left: 4px;
}
.sc-iscr-kpi-item.red { border-color: #fca5a5; background: #fef2f2; }
.sc-iscr-kpi-item.red .sc-iscr-kpi-num { color: #dc2626; }
.sc-iscr-kpi-item.red .sc-iscr-kpi-lbl { color: #b91c1c; }
@media (max-width: 782px) {
    /* Selettore conferenza a tutta larghezza (check-in e iscrizione manuale) */
    .sc-lib-header-actions { width: 100%; }
    .sc-ci-conf-sel { width: 100%; flex-wrap: nowrap; }
    .sc-ci-conf-sel select { flex: 1; min-width: 0; max-width: none; height: 40px; }

    /* Card conferenza selezionata: sezioni impilate, pill posti distribuite.
       Breakpoint a 782px (non 600) per coprire phone-landscape/tablet dove la
       riga con select min-width + meta nowrap causava scroll orizzontale. */
    .sc-manreg-conf-card { flex-direction: column; align-items: stretch; gap: 12px; padding: 14px; }
    .sc-manreg-meta { white-space: normal; }
    .sc-manreg-conf-posti { width: 100%; }
    .sc-manreg-conf-posti .sc-iscr-kpi-item { flex: 1; justify-content: center; min-width: 0; }
}

@media (max-width: 600px) {
    /* Form: card più aderente ai bordi su schermi piccoli */
    .sc-manreg-form-card { padding: 18px 16px; }
}

/* Sezioni dell'editor layout: card intere.
   `.sc-editor-section` nasce senza bordo superiore e con gli angoli alti vivi
   perché nell'editor conferenze si aggancia sotto la barra delle ancore. Qui
   quella barra non c'è, quindi la sezione restava un rettangolo mozzo sotto un
   header tutto arrotondato — il «card arrotondate e altre no». */
.sc-layout-editor .sc-editor-section {
    border-top: 1px solid #e5e7eb;
    border-radius: var(--sc-editor-radius);
}

/* Scala dei raggi della sezione: tre soli passi (card / riquadro / controllo) e
   spaziature 4-8-12-16-24. Prima erano nove raggi e sedici padding diversi, ed è
   il motivo per cui la pagina sembrava montata a pezzi. Nata per la pianta posti,
   vale ora per tutta la sezione ed è **ancorata ai token globali**: la card è la
   stessa `--sc-radius` di `.sc-panel`, il controllo la stessa `--sc-radius-sm` di
   `.sc-input`/`.sc-btn`. Il riquadro sta in mezzo: un box annidato dentro una card
   deve avere il raggio più piccolo di chi lo contiene, e prima era il contrario
   (card 12 dentro un riquadro 10). Il posto tiene una forma propria (spalliera
   arrotondata, base squadrata) perché è un'icona, non un box. */
:root {
    --sc-lay-r-card: var(--sc-radius, 10px);
    --sc-lay-r-box:  8px;
    --sc-lay-r-ctl:  var(--sc-radius-sm, 7px);
}

/* ═══════════════════════════════════════════════════════════════════════════
   MAPPA POSTI A SEDERE
   Un solo blocco di stili per tutti i contesti: editor del layout, anteprima
   nell'editor conferenza, form pubblico dello shortcode, iscrizione manuale.
   Il markup lo generano assets/sc-seatmap.js e assets/seatmap-editor.js.
   ═══════════════════════════════════════════════════════════════════════════ */

.sc-seatmap { --sc-seat-size: 30px; }

.sc-seatmap-stage,
.sc-layout-stage {
    margin: 0 auto 18px;
    max-width: 460px;
    padding: 8px 16px;
    border-radius: 0 0 60px 60px;
    background: linear-gradient(180deg, #1f2937, #374151);
    color: #f9fafb;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .1em;
    text-align: center;
    text-transform: uppercase;
}

.sc-seatmap-scroll { overflow-x: auto; padding-bottom: 6px; }

/* Navate: i settori si dispongono su tre colonne affiancate. Una pianta senza
   `pos` finisce tutta nella colonna centrale, quindi resta com'era. */
/* `width: max-content` + `margin: 0 auto` invece di `justify-content: center`:
   con la centratura flex, quando il contenuto supera il contenitore la parte
   sinistra finisce fuori e lo scroll non la raggiunge (il primo blocco appariva
   tagliato). Con margin auto il margine si azzera da solo e non si perde nulla. */
.sc-seatmap-blocks {
    display: flex;
    align-items: flex-start;
    gap: 24px;
    width: max-content;
    margin: 0 auto;   /* più largo del contenitore: il margine si azzera e lo scroll arriva ovunque */
}
.sc-seatmap-col { display: flex; flex-direction: column; align-items: center; }

/* Inclinazione delle ali laterali: ruota il solo blocco di file (il nome del
   settore e, nell'editor, i suoi menu restano dritti), come sulla pianta di una
   chiesa dove le file di lato puntano verso il palco. `transform` non cambia il
   box di layout, quindi le file ruotate stanno centrate in assoluto dentro
   `.sc-seatmap-rotbox`, a cui il JS (scSeatmap.fitRotated) assegna l'ingombro
   reale del rettangolo ruotato: senza, l'ala si sovrapporrebbe alla navata
   accanto. */
.sc-seatmap-rotbox { position: relative; }
.sc-seatmap-rows.is-rot,
.sc-layout-rows.is-rot {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(var(--sc-sect-rot, 0deg));
    transform-origin: center center;
}

.sc-seatmap-sector { margin-bottom: 16px; }
.sc-seatmap-sector:last-child { margin-bottom: 0; }

.sc-seatmap-sector-name {
    margin-bottom: 8px;
    color: var(--sc-muted, #6b7280);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .04em;
    text-align: center;
    text-transform: uppercase;
}

/* Le file si allineano fra loro secondo `align` del blocco: con file di lunghezza
   diversa (le ali di una chiesa sono trapezoidali) centrare o allineare a un lato
   cambia completamente la forma della sala. La riga è larga quanto il suo
   contenuto, altrimenti si allineerebbero fra loro dei box tutti uguali. */
.sc-seatmap-rows,
.sc-layout-rows { display: flex; flex-direction: column; }
.sc-seatmap-rows.is-a-sx, .sc-layout-rows.is-a-sx { align-items: flex-start; }
.sc-seatmap-rows.is-a-c,  .sc-layout-rows.is-a-c  { align-items: center; }
.sc-seatmap-rows.is-a-dx, .sc-layout-rows.is-a-dx { align-items: flex-end; }

.sc-seatmap-row {
    display: flex;
    align-items: center;
    gap: 10px;
    width: max-content;
    margin-bottom: 6px;
}

/* Su un blocco inclinato la lettera di fila si contro-ruota: resta in piedi e
   leggibile, come sulle piante di sala vere, invece di seguire l'angolo. */
.sc-seatmap-rows.is-rot .sc-seatmap-rowlabel,
.sc-layout-rows.is-rot .sc-layout-row-label,
.sc-layout-rows.is-rot .sc-layout-row-mirror {
    transform: rotate(var(--sc-sect-unrot, 0deg));
}

.sc-seatmap-rowlabel {
    width: 26px;
    flex-shrink: 0;
    color: var(--sc-muted, #6b7280);
    font-size: 12px;
    font-weight: 700;
    text-align: center;
}

.sc-seatmap-seats {
    display: flex;
    align-items: center;
    gap: 5px;
}

/* Il posto — unica definizione, riusata ovunque */
.sc-seat {
    width: var(--sc-seat-size, 30px);
    height: var(--sc-seat-size, 30px);
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 7px 7px 4px 4px;
    background: #e5e7eb;
    color: #4b5563;
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    transition: transform .1s, background .15s, border-color .15s;
}

.sc-seat.is-free    { background: #eef2ff; border-color: #c7d2fe; color: #4338ca; }
.sc-seat.is-taken   { background: #e5e7eb; border-color: #d1d5db; color: #9ca3af; }
.sc-seat.is-res     { background: #fef3c7; border-color: #fcd34d; color: #92400e; }
/* Posti NON ASSEGNABILI. Erano un tratteggio grigio, che si legge «morto»:
   invece sono sedie vere, semplicemente non assegnabili una per una — nelle sale
   ad ammissione generale sono la maggior parte, e un blocco grigio dava
   l'impressione di una sala mezza fuori uso. Verde chiaro, pieno: disponibili,
   ma non attribuibili. Resta distinto dal `is-free` (indaco) e non e' cliccabile. */
.sc-seat.is-block   { background: #e8f7ee; border-color: #b7e4c7; color: #3f6b52; }
/* Posti FUORI USO per **questa** conferenza (riga `bloccato` in sc_conf_posti).
   Fino alla 2.29.1 prendevano la stessa classe `is-block` dei posti ad ammissione
   libera: stesso verde, stessa etichetta «Non assegnabile», due significati
   diversi — una sedia su cui ci si siede senza prenotare e una sedia tolta dalla
   sala. Nell'editor era il caso peggiore, perché è lì che l'operatore li crea e
   non poteva più riconoscere quali avesse messo fuori uso. Tratteggio grigio: la
   sedia non c'è, ed è la resa che il codice della modalità blocco dava già per
   scontata («il posto va tratteggiato, non evidenziato in blu»). */
.sc-seat.is-off {
    background: repeating-linear-gradient(-45deg, #f8fafc 0 3px, #e2e8f0 3px 6px);
    border-color: #cbd5e1;
    color: #94a3b8;
}
.sc-seat.sc-seat-gap { background: none; border-color: transparent; }

/* SELEZIONATO — vince su ogni altro stato del posto, **a prescindere dall'ordine**
   di queste righe. La selezione non sostituisce la classe di stato, la affianca
   (`is-res is-sel`), e `.sc-seat.is-res` — dichiarata qui sopra, a pari
   specificità — vinceva: il posto riservato che l'operatore assegnava restava
   ambra. Era selezionato davvero (contatore e campo nascosto lo dicevano, e il
   salvataggio andava a buon fine), ma a schermo non succedeva niente e sembrava
   che i riservati non si potessero assegnare. La classe ripetuta alza la
   specificità, così una classe di stato nuova non può più coprire la selezione. */
.sc-seat.is-sel.is-sel {
    background: #2563eb;
    border-color: #1d4ed8;
    color: #fff;
    transform: translateY(-2px);
}
/* Riservato **e** selezionato: pieno blu come ogni scelta, ma bordo ambra — è
   una sedia della riserva, e a chi la sta assegnando conviene vederlo. */
.sc-seat.is-res.is-sel { border-color: #f59e0b; }

button.sc-seat:not(:disabled) { cursor: pointer; }
@media (hover: hover) {
button.sc-seat.is-pick:hover  { border-color: var(--sc-blue, #2563eb); transform: translateY(-2px); }
}
button.sc-seat:disabled       { cursor: not-allowed; }
button.sc-seat:focus-visible  { outline: 2px solid var(--sc-blue, #2563eb); outline-offset: 2px; }

/* ── Piede della mappa ──
   Ci finisce il pulsante «non scelgo il posto», spostato qui dal modulo
   `scSeatmap` (opts.footer). Sta dentro il riquadro della sala, appena sotto la
   pianta e sopra la legenda: e' la seconda delle due risposte alla stessa
   domanda, e messo fuori sembrava un blocco a se'. */
/* Mappa spenta: chi ha rinunciato al posto non deve vedere la sala, ma il piede
   resta — li' c'e' il modo di tornare a scegliere. Per questo si spengono le
   parti, non il contenitore. */
.sc-seatmap.is-off .sc-seatmap-bar,
.sc-seatmap.is-off .sc-seatmap-viewport,
.sc-seatmap.is-off .sc-seatmap-legend { display: none; }
.sc-seatmap.is-off .sc-seatmap-footer { margin: 0; padding-top: 0; border-top: 0; }

.sc-seatmap-footer {
    margin: 14px 0 0;
    padding-top: 14px;
    border-top: 1px dashed #dbe3ea;
}
.sc-seatmap-footer .sc-conf-seatskip-btn { padding: 12px 14px; font-size: 14px; }
.sc-seatmap-footer .sc-conf-seatskip-done { padding: 12px 14px; }

.sc-seatmap-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
    justify-content: center;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid #eef1f4;
}
.sc-seatmap-legend-item { display: inline-flex; align-items: center; gap: 8px; }
.sc-seatmap-legend-item .sc-seat { --sc-seat-size: 18px; border-radius: 5px 5px 3px 3px; }
.sc-seatmap-legend-txt { color: var(--sc-muted, #6b7280); font-size: 12px; }

/* ── Editor del layout ─────────────────────────────────────────────────── */

/* Testo introduttivo della lista: classe propria, non `.sc-editor-section-desc`
   che ha un margine negativo pensato per stare sotto l'intestazione di sezione. */
.sc-layout-intro {
    max-width: 720px;
    margin: 0 0 16px;
    color: #475569;
    font-size: 13px;
    line-height: 1.5;
}

.sc-layout-count {
    margin-left: auto;
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 4px 10px;
    border-radius: 999px;
    background: #eef2ff;
    color: #4338ca;
    font-size: 12px;
    font-weight: 700;
}
/* La scomposizione sta accanto al totale, in tono minore: il numero che conta
   è la capienza, il resto spiega di cosa è fatta. */
.sc-layout-count-mix { font-weight: 500; color: #4b5563; }
.sc-layout-count-mix:empty { display: none; }

/* Barra strumenti ancorata: su una sala di venti file, cambiare pennello non
   deve costringere a risalire in cima alla pagina. */
.sc-layout-toolbar {
    position: sticky;
    top: var(--sc-sticky-top, 0px);   /* misurato in JS: sta sotto la navbar del plugin */
    z-index: 20;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: 24px;
    padding: 12px;
    border: 1px solid #eef1f4;
    border-radius: var(--sc-lay-r-box);
    background: #f8fafc;
}

.sc-layout-tools { display: flex; flex-wrap: wrap; gap: 6px; }

.sc-layout-tool {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border: 1px solid var(--sc-border-gray, #e5e7eb);
    border-radius: var(--sc-lay-r-ctl);
    background: #fff;
    color: #374151;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}
@media (hover: hover) {
.sc-layout-tool:hover     { border-color: var(--sc-blue, #2563eb); }
}
.sc-layout-tool.is-active { border-color: var(--sc-blue, #2563eb); background: #eff6ff; color: #1d4ed8; }
.sc-layout-tool .sc-seat  { --sc-seat-size: 16px; border-radius: 4px 4px 2px 2px; }

.sc-layout-tool-opt input { min-width: 200px; }
.sc-layout-toolbar-right  { display: flex; gap: 8px; margin-left: auto; }

/* Area sala: un solo riquadro tenue che contiene fronte palco e blocchi. Senza,
   le card bianche dei blocchi stavano su fondo bianco e si leggevano solo per il
   bordo — è il «montato a pezzi» della pagina. */
.sc-layout-room {
    padding: 20px;
    border: 1px solid #eef1f4;
    border-radius: var(--sc-lay-r-card);
    background: var(--sc-bg, #f8fafc);
}
.sc-layout-room .sc-layout-stage { margin-top: 0; }

.sc-layout-canvas { overflow-x: auto; padding-bottom: 8px; }
.sc-layout-canvas .sc-seatmap-blocks { align-items: stretch; }

/* Navata vuota nell'editor: resta visibile come area di destinazione, così si
   capisce dove finirà un blocco spostato di lato. */
.sc-layout-canvas .sc-seatmap-col.is-empty {
    align-self: stretch;
    min-width: 90px;
    border: 1px dashed #eef1f4;
    border-radius: var(--sc-lay-r-box);
}

/* ── Blocco ─────────────────────────────────────────────────────────────── */

/* Ogni blocco è una scheda: con più navate, senza un contorno stabile la
   testata di un blocco sembrava appartenere a quello accanto. */
.sc-layout-sector {
    margin-bottom: 24px;
    padding: 12px;
    border: 1px solid #eef1f4;
    border-radius: var(--sc-lay-r-card);
    background: #fff;
}
@media (hover: hover) {
.sc-layout-sector:hover { border-color: #cbd5e1; }
}

.sc-layout-sector-head {
    display: flex;
    align-items: center;
    gap: 8px;
    width: max-content;
    max-width: 100%;
    margin-bottom: 12px;
}

.sc-layout-editor input.sc-layout-sector-name {
    width: 170px;
    min-width: 0;
    height: 34px;
    padding: 0 8px;
    border: 1px solid transparent;
    border-radius: var(--sc-lay-r-ctl);
    background: transparent;
    font-size: 13px;
    font-weight: 700;
    color: #111827;
}
@media (hover: hover) {
.sc-layout-editor input.sc-layout-sector-name:hover { border-color: var(--sc-border-gray, #e5e7eb); background: #fff; }
}
.sc-layout-editor input.sc-layout-sector-name:focus { border-color: var(--sc-blue, #2563eb); background: #fff; outline: none; }

.sc-layout-sector-meta {
    color: var(--sc-muted, #6b7280);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .02em;
    white-space: nowrap;
}

.sc-layout-editor button.sc-layout-sector-cog {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--sc-border-gray, #e5e7eb);
    border-radius: var(--sc-lay-r-ctl);
    background: #f8fafc;
    color: #475569;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    transition: background .14s, border-color .14s, color .14s;
}
@media (hover: hover) {
.sc-layout-editor button.sc-layout-sector-cog:hover { border-color: var(--sc-blue, #2563eb); color: #1d4ed8; }
}
.sc-layout-editor button.sc-layout-sector-cog[aria-expanded="true"] { border-color: var(--sc-blue, #2563eb); background: #eff6ff; color: #1d4ed8; }

.sc-layout-sector-panel {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 10px;
    margin-bottom: 16px;
    padding: 12px;
    border: 1px solid #eef1f4;
    border-radius: var(--sc-lay-r-box);
    background: #f8fafc;
}
.sc-layout-panel-field { display: flex; flex-direction: column; gap: 4px; }
.sc-layout-panel-field > span {
    color: var(--sc-muted, #6b7280);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.sc-layout-editor .sc-layout-panel-field select { min-width: 150px; }

/* ── Fila ───────────────────────────────────────────────────────────────── */

.sc-layout-row {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    width: max-content;
    margin-bottom: 6px;
    padding: 4px;
    border-radius: var(--sc-lay-r-ctl);
}
@media (hover: hover) {
.sc-layout-row:hover { background: #f1f5f9; }
}

/* Specchio dell'etichetta a destra: nella vista pubblica la fila ha l'etichetta
   su entrambi i lati, e senza questo l'editor mostrerebbe la sala centrata in
   modo diverso da come la vedrà l'iscritto. */
.sc-layout-row-mirror {
    width: 26px;
    flex-shrink: 0;
    color: var(--sc-muted, #6b7280);
    font-size: 12px;
    font-weight: 700;
    text-align: center;
}

.sc-layout-editor input.sc-layout-row-label {
    width: 26px;
    height: 26px;
    flex-shrink: 0;
    padding: 0 4px;
    border: 1px solid transparent;
    border-radius: var(--sc-lay-r-ctl);
    background: transparent;
    color: var(--sc-muted, #6b7280);
    font-size: 12px;
    font-weight: 700;
    text-align: center;
}
@media (hover: hover) {
.sc-layout-editor input.sc-layout-row-label:hover { border-color: var(--sc-border-gray, #e5e7eb); background: #fff; }
}
.sc-layout-editor input.sc-layout-row-label:focus { border-color: var(--sc-blue, #2563eb); background: #fff; color: #111827; outline: none; }

/* Attrezzi della fila: **fuori dal flusso**. Riservare lo spazio (visibility)
   gonfiava ogni fila di ~250px — la sala risultava larghissima e, sui blocchi
   inclinati, il rettangolo ruotato diventava enorme lasciando una voragine sopra
   le sedute. In sovrimpressione non pesano più sulla geometria.
   `transform-origin: left center` fa perno sul punto di aggancio, così la
   contro-rotazione li tiene dritti restando attaccati alla fila. */
/* Attrezzi **sotto** la fila, non di fianco: agganciati a destra uscivano dal
   blocco e venivano tagliati dal bordo dell'area sala (che scorre in orizzontale),
   lasciando un riquadro bianco mozzato sul bordo. Sotto restano sempre dentro.
   Il padding superiore fa da ponte verso la riga: senza, il mouse attraversa un
   vuoto, `:hover` cade e spariscono prima che ci si arrivi. */
.sc-layout-row-tools {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    padding-top: 6px;
    visibility: hidden;
    opacity: 0;
    /* La comparsa è immediata, la sparizione ha un ritardo: è il tempo per
       spostare il mouse sugli attrezzi senza rincorrerli. */
    transition: opacity .12s ease, visibility 0s linear .35s;
    transform: rotate(var(--sc-sect-unrot, 0deg));
    transform-origin: left top;
}
.sc-layout-row-tools-in {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 3px;
    border: 1px solid #eef1f4;
    border-radius: var(--sc-lay-r-ctl);
    background: #fff;
    box-shadow: 0 6px 16px -8px rgba(15,23,42,.35);
}
.sc-layout-row:hover .sc-layout-row-tools,
.sc-layout-row:focus-within .sc-layout-row-tools,
.sc-layout-row.is-sel .sc-layout-row-tools,
.sc-layout-row-tools:hover {
    visibility: visible;
    opacity: 1;
    transition-delay: 0s;
}

/* Fila selezionata: resta marcata finché non se ne sceglie un'altra, così gli
   attrezzi non dipendono dal restare fermi col mouse. */
.sc-layout-row.is-sel { background: #eff6ff; box-shadow: inset 2px 0 0 var(--sc-blue, #2563eb); }

.sc-layout-editor button.sc-layout-row-btn {
    width: 26px;
    min-width: 26px;
    height: 26px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--sc-border-gray, #e5e7eb);
    border-radius: var(--sc-lay-r-ctl);
    background: #fff;
    color: #4b5563;
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
}
@media (hover: hover) {
.sc-layout-editor button.sc-layout-row-btn:hover { border-color: var(--sc-blue, #2563eb); color: #1d4ed8; }
}
@media (hover: hover) {
.sc-layout-editor button.sc-layout-row-btn.danger:hover { border-color: var(--sc-red, #dc2626); color: var(--sc-red, #dc2626); }
}

.sc-layout-editor button.sc-layout-addrow {
    padding: 6px 12px;
    border: 1px dashed #eef1f4;
    border-radius: var(--sc-lay-r-ctl);
    background: transparent;
    color: var(--sc-muted, #6b7280);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}
@media (hover: hover) {
.sc-layout-editor button.sc-layout-addrow:hover { border-color: var(--sc-blue, #2563eb); color: #1d4ed8; background: #eff6ff; }
}

.sc-layout-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 24px;
    border: 1px dashed #eef1f4;
    border-radius: var(--sc-lay-r-box);
    text-align: center;
}
.sc-layout-empty p { margin: 0; color: var(--sc-muted, #6b7280); font-size: 13px; }

.sc-layout-editor .sc-layout-canvas .sc-seat { user-select: none; }
.sc-layout-legend { max-width: 720px; margin-left: auto; margin-right: auto; }

/* ── Modelli di sala (pianta vuota) ─────────────────────────────────────── */

.sc-layout-presets {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 12px;
    margin-bottom: 24px;
}
.sc-layout-presets[hidden] { display: none; }

.sc-layout-editor button.sc-layout-preset {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 16px;
    border: 1px solid #eef1f4;
    border-radius: var(--sc-lay-r-card);
    background: #fff;
    text-align: left;
    cursor: pointer;
    transition: border-color .14s, box-shadow .14s;
}
@media (hover: hover) {
.sc-layout-editor button.sc-layout-preset:hover {
    border-color: var(--sc-blue, #2563eb);
    box-shadow: 0 10px 24px -18px rgba(37,99,235,.9);
}
}
.sc-layout-preset-title { font-size: 13px; font-weight: 700; color: #111827; }
.sc-layout-preset-desc  { color: var(--sc-muted, #6b7280); font-size: 12px; line-height: 1.4; }

/* Miniatura della forma: tre strati di gradiente, nessuna immagine da caricare.
   Gli strati non usati vanno azzerati (`0 0`), altrimenti prendono `auto` e
   riempiono tutto il riquadro. */
.sc-layout-preset-art {
    width: 100%;
    height: 42px;
    margin-bottom: 6px;
    border-radius: var(--sc-lay-r-ctl);
    background-color: #eef2ff;
    background-repeat: no-repeat;
    background-image:
        linear-gradient(#c7d2fe, #c7d2fe),
        linear-gradient(#c7d2fe, #c7d2fe),
        linear-gradient(#c7d2fe, #c7d2fe);
}
.sc-layout-preset-art.is-unico {
    background-size: 66% 62%, 0 0, 0 0;
    background-position: center center;
}
.sc-layout-preset-art.is-corridoio {
    background-size: 30% 62%, 30% 62%, 0 0;
    background-position: 20% center, 80% center, 0 0;
}
.sc-layout-preset-art.is-ali {
    background-size: 28% 62%, 16% 42%, 16% 42%;
    background-position: center center, 6% center, 94% center;
}

/* ── Piede del blocco ───────────────────────────────────────────────────── */

.sc-layout-sector-foot { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }

/* ── Modale «Genera le file» ────────────────────────────────────────────── */

.sc-layout-gen-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}
.sc-layout-gen-grid .sc-editor-field-full { grid-column: 1 / -1; }
.sc-layout-gen-grid .sc-conf-field label {
    display: block;
    margin-bottom: 6px;
    font-size: 12px;
    font-weight: 600;
    color: #374151;
}
.sc-layout-gen-grid input,
.sc-layout-gen-grid select { width: 100%; }

.sc-layout-gen-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 16px 20px 20px;
    border-top: 1px solid #eef1f4;
}

@media (max-width: 782px) {
    .sc-seatmap { --sc-seat-size: 26px; }
    .sc-layout-toolbar-right { margin-left: 0; width: 100%; }
    .sc-layout-gen-grid { grid-template-columns: 1fr; }
    /* Senza mouse non c'è hover: si tocca la fila e resta selezionata */
    .sc-layout-row.is-sel .sc-layout-row-tools { visibility: visible; opacity: 1; }
}

/* ── Sezione 4 dell'editor conferenza: pianta collegata ─────────────────── */

.sc-conf-hint {
    display: block;
    margin-top: 6px;
    color: var(--sc-muted, #6b7280);
    font-size: 12px;
    line-height: 1.4;
}
/* `display:block` scavalca l'attributo `hidden`: il suggerimento sotto «Posti
   massimi» nasce nascosto quando non c'è una pianta collegata e si vedeva
   comunque, dicendo una cosa non vera. */
.sc-conf-hint[hidden] { display: none; }

.sc-conf-seatmap-wrap {
    margin-top: 24px;
    padding: 16px;
    border: 1px solid #eef1f4;
    border-radius: var(--sc-lay-r-card);
    background: #f8fafc;
}
.sc-conf-seatmap-wrap[hidden] { display: none; }

.sc-conf-seatmap-head { margin-bottom: 16px; }
.sc-conf-seatmap-head .sc-editor-subgroup-title { margin-bottom: 4px; }

/* ── Riepilogo capienza (passo 4) ───────────────────────────────────────────
   Il numero grande è la capienza della sala, l'elenco dice di cosa è fatta.
   `display:flex` esplicito ⇒ serve la guardia [hidden], o il riquadro resta a
   schermo quando non c'è una pianta collegata (regola generale del progetto). */
.sc-conf-cap {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 20px;
    padding: 14px 16px;
    border: 1px solid #e0e7ff;
    border-radius: var(--sc-lay-r-card, 10px);
    background: #f5f7ff;
}
.sc-conf-cap[hidden] { display: none; }
.sc-conf-cap-tot { display: flex; align-items: baseline; gap: 6px; }
.sc-conf-cap-num { font-size: 26px; font-weight: 800; color: #312e81; line-height: 1; }
.sc-conf-cap-lbl { font-size: 13px; font-weight: 600; color: #4338ca; }
.sc-conf-cap-mix {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 18px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 13px;
    color: #475569;
}
.sc-conf-cap-mix li { white-space: nowrap; }
.sc-conf-cap-mix li[hidden] { display: none; }
.sc-conf-cap-mix b { font-weight: 700; color: #1f2937; }
/* I posti fuori uso si sottraggono: si leggono come una correzione, non come
   una parte della sala */
.sc-conf-cap-mix li.is-off { color: #92400e; }
.sc-conf-cap-mix li.is-off b { color: #92400e; }

/* ── Scelta posto nel form pubblico ─────────────────────────────────────── */

.sc-conf-seatpick {
    margin: 22px 0;
    padding: 16px;
    border: 1px solid #eef1f4;
    border-radius: var(--sc-lay-r-card);
    background: #fff;
}

.sc-conf-seatpick-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.sc-conf-seatpick-title {
    font-size: 14px;
    font-weight: 700;
    color: #111827;
}

.sc-conf-seatpick-count {
    margin-left: auto;
    padding: 4px 10px;
    border-radius: 999px;
    background: #eef2ff;
    color: #4338ca;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

.sc-conf-seatpick-msg {
    margin: 12px 0 0;
    color: var(--sc-red, #dc2626);
    font-size: 13px;
    font-weight: 600;
}
.sc-conf-seatpick-msg[hidden] { display: none; }

/* Posto assegnato nel riquadro esito del check-in: chi accoglie deve leggerlo
   a un metro di distanza, quindi è il testo più grande dopo il nome. */
.sc-checkin-seats {
    display: inline-flex;
    align-items: baseline;
    gap: 10px;
    margin-top: 12px;
    padding: 8px 16px;
    border-radius: var(--sc-lay-r-box);
    background: rgba(255, 255, 255, .22);
}
.sc-checkin-seats-lbl {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    opacity: .85;
}
.sc-checkin-seats-val {
    font-size: 30px;
    font-weight: 800;
    letter-spacing: .02em;
    line-height: 1.1;
}
/* Non un posto ma una frase («Posto libero», «Da assegnare a mano»): a 30px
   sembrerebbe il numero di una sedia e si leggerebbe di corsa come tale. */
.sc-checkin-seats.is-nota .sc-checkin-seats-val {
    font-size: 17px;
    font-weight: 700;
}


/* Quante persone nel riquadro esito del check-in: senza posti assegnati è
   l'unico dato che dice a chi accoglie quante persone stanno entrando. */
.sc-checkin-persone {
    margin-top: 10px;
    font-size: 15px;
    font-weight: 700;
    opacity: .9;
}
.sc-iscr-col-persone { text-align: center; font-weight: 700; color: #374151; }

/* ── Sezione 4 dell'editor conferenza: dettagli ─────────────────────────── */

/* Testo esplicativo di un sottogruppo (il titolo ha già la sua regola). */
.sc-editor-subgroup-desc {
    margin: -4px 0 14px;
    max-width: 760px;
    color: var(--sc-muted, #6b7280);
    font-size: 12px;
    line-height: 1.5;
}

/* Righe «campi che compongono il numero»: non più dei chip, perché ogni scelta
   ora porta con sé una regola e un numero. Una riga per campo, i comandi della
   regola compaiono solo quando è selezionato — a schermo resta l'elenco dei
   campi, non un muro di controlli spenti. */
.sc-persone-regole {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 4px;
}

.sc-persone-regola {
    border: 1px solid #e5e7eb;
    border-radius: var(--sc-lay-r-ctl);
    background: #fff;
    transition: border-color .15s, background .15s;
}
.sc-persone-regola.is-on { border-color: #c7d2fe; background: #f8faff; }

/* `.sc-conf-field label` è a blocco, 12px, a tutta larghezza (0,1,1): batte una
   classe secca, quindi la testata va riscritta per intero. */
.sc-conf-field .sc-persone-regola label.sc-persone-regola-head {
    display: flex;
    align-items: center;
    gap: 10px;
    width: auto;
    margin: 0;
    padding: 9px 12px;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.3;
    color: #374151;
    cursor: pointer;
}

/* `.sc-conf-field input` (0,1,1) impone `width:100%` e `height:34px` a *ogni*
   campo del pannello: senza questa guardia la casella di spunta diventa una
   barra blu a tutta riga e spinge nome e tipo a destra. Serve un selettore più
   specifico, non basta una classe. */
.sc-conf-field .sc-persone-regola input[type="checkbox"] {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    min-width: 16px;
    margin: 0;
    padding: 0;
    border-radius: 4px;
}

.sc-persone-regola-nome { font-weight: 600; min-width: 0; overflow-wrap: anywhere; }

.sc-persone-regola-tipo {
    flex: 0 0 auto;
    margin-left: auto;
    padding: 2px 7px;
    border-radius: 4px;
    background: #f3f4f6;
    color: #4b5563;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.sc-persone-regola-conf {
    display: flex;
    align-items: center;
    gap: 10px 12px;
    flex-wrap: wrap;
    padding: 0 12px 10px 38px;   /* 12 di padding + 16 di casella + 10 di gap: i comandi cadono sotto il nome, non sotto la spunta */
}
/* `display:flex` scavalcherebbe l'attributo `hidden` */
.sc-persone-regola-conf[hidden] { display: none; }

.sc-persone-regola-solo { font-size: 12px; color: #6b7280; }

.sc-persone-soglia-wrap {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #6b7280;
}
.sc-persone-soglia-wrap[hidden] { display: none; }

.sc-conf-field .sc-persone-regola input.sc-persone-soglia {
    width: 72px;
    min-width: 0;
    text-align: center;
}

/* La nota accanto ai posti: è una spiegazione, non un avviso — tono informativo
   e nessun colore d'allarme, o sembrerebbe che qualcosa sia andato storto. */
.sc-conf-posti-nota {
    margin: 0 0 14px;
    padding: 9px 12px;
    border-left: 3px solid #c7d2fe;
    border-radius: 0 var(--sc-lay-r-ctl) var(--sc-lay-r-ctl) 0;
    background: #f5f7ff;
    color: #4b5563;
    font-size: 13px;
    line-height: 1.45;
}
.sc-conf-posti-nota.is-standalone { margin: 18px 0; }
.sc-conf-posti-nota.is-inline { display: block; margin: 6px 0 0; padding: 0; border: 0; background: none; }

/* Modo «lo assegna il sistema»: non c'è una sala da cliccare, e senza una riga
   che lo dica l'assenza della mappa sembra una dimenticanza. */
.sc-conf-posti-info {
    margin: 18px 0;
    padding: 11px 14px;
    border-radius: var(--sc-lay-r-ctl);
    background: #f5f7ff;
    border: 1.5px solid #e0e7ff;
    color: #4b5563;
    font-size: 13.5px;
    line-height: 1.45;
}

/* Rinuncia al posto (modalità facoltativa). Sta **sopra** la pianta: sotto una
   sala da centinaia di posti la si incontrerebbe solo dopo aver scorso tutta la
   mappa, cioè dopo aver fatto la cosa che si voleva evitare.

   Verde, non grigio: è una scelta valida quanto quella sulla mappa, e un
   riquadro spento accanto a una sala colorata si legge come «non disponibile».
   Il testo usa `#15803d` e non `#16a34a`: quest'ultimo su bianco sta a 3,3:1,
   sotto il minimo AA — stessa regola già applicata a profitti e badge stock. */
.sc-conf-seatskip { margin: 0 0 16px; }
/* «oppure»: dice che le strade sono due e una va presa, senza una frase di
   istruzioni che nessuno legge. Sta sopra il pulsante, dopo la mappa. */
.sc-conf-seatskip-or {
    display: block;
    margin: 0 0 9px;
    text-align: center;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: #64748b;
}
.sc-conf-seatskip-or[hidden] { display: none; }
/* Dentro la mappa il margine esterno non serve: lo da' il piede */
.sc-seatmap-footer.sc-conf-seatskip { margin: 14px 0 0; }
.sc-conf-seatskip-btn {
    /* appearance/font espliciti: in wp-admin (iscrizione manuale) un <button>
       nudo eredita il rendering nativo del browser e non quello della pagina. */
    -webkit-appearance: none;
    appearance: none;
    font-family: inherit;
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 14px 16px;
    border-radius: 10px;
    border: 1.5px solid #86efac;
    background: #f0fdf4;
    color: #15803d;
    font-size: 14.5px;
    font-weight: 600;
    line-height: 1.4;
    text-align: left;
    cursor: pointer;
    transition: border-color .15s, background .15s, box-shadow .15s;
}
@media (hover: hover) {
.sc-conf-seatskip-btn:hover {
    border-color: #15803d;
    background: #dcfce7;
    box-shadow: 0 2px 8px rgba(21, 128, 61, .12);
}
}
.sc-conf-seatskip-btn[hidden] { display: none; }
.sc-conf-seatskip-txt { flex: 1 1 auto; }

/* A riposo un **anello vuoto**, come una casella da spuntare: dice «puoi
   sceglierlo», non «è già scelto». Una spunta piena qui faceva sembrare il
   pulsante già premuto — che è il contrario di quello che deve comunicare.
   La spunta piena resta al riquadro di conferma (`.is-done`). */
.sc-conf-seatskip-ic {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px; height: 22px;
    flex: 0 0 auto;
    border-radius: 50%;
    border: 2px solid #86efac;
    background: #fff;
    color: #15803d;
    font-size: 13px;
    font-weight: 700;
    transition: border-color .15s, background .15s;
}
@media (hover: hover) {
.sc-conf-seatskip-btn:hover .sc-conf-seatskip-ic { border-color: #15803d; }
}
.sc-conf-seatskip-ic.is-done {
    width: 26px; height: 26px;
    border-color: #15803d;
    background: #15803d;
    color: #fff;
    font-size: 14px;
}

/* Dopo la rinuncia: cosa succederà, e la strada per tornare indietro. */
.sc-conf-seatskip-done {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding: 14px 16px;
    border-radius: 10px;
    border: 1.5px solid #15803d;
    background: #f0fdf4;
}
.sc-conf-seatskip-done[hidden] { display: none; }
.sc-conf-seatskip-esito {
    flex: 1 1 200px;
    font-size: 14px;
    font-weight: 600;
    color: #15803d;
}
.sc-conf-seatskip-undo {
    -webkit-appearance: none;
    appearance: none;
    font-family: inherit;
    padding: 9px 14px;
    border-radius: 8px;
    border: 1.5px solid #86efac;
    background: #fff;
    color: #15803d;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}
@media (hover: hover) {
.sc-conf-seatskip-undo:hover { border-color: #15803d; background: #dcfce7; }
}

/* Campo numerico corto: un valore da 1 a 20 in una casella larga mezza pagina
   sembra un errore di layout. */
.sc-conf-field input.sc-input-num { max-width: 110px; }

/* ── Campo contatore (± ) del form iscrizione ─────────────────────────────
   Prende i valori degli altri campi del modulo — bordo 1.5px #e5e7eb, raggio
   10px, fondo #f9fafb, 14px — invece di una scala propria: è un campo come gli
   altri, deve stare nella stessa riga senza saltare all'occhio. L'altezza di
   44px è quella che gli altri campi raggiungono da padding + interlinea. */
.sc-conf-form-field .sc-campo-stepper,
.sc-campo-stepper {
    display: inline-flex;
    align-items: stretch;
    height: 44px;
    box-sizing: border-box;
    border: 1.5px solid #e5e7eb;
    border-radius: 10px;
    background-color: #f9fafb;
    overflow: hidden;
    transition: border-color .18s, background .18s, box-shadow .18s;
}
/* Il fuoco si comporta come sugli altri campi: è l'input dentro a riceverlo,
   quindi la cornice la accende il contenitore con :focus-within. */
.sc-conf-form-field .sc-campo-stepper:focus-within,
.sc-campo-stepper:focus-within {
    border-color: var(--sc-blue, #2563eb);
    background-color: #fff;
    box-shadow: 0 0 0 4px rgba(37,99,235,.10);
}

/* Bersagli da 44px: il modulo pubblico si compila quasi sempre dal telefono. */
.sc-conf-form-field .sc-campo-stepper button,
.sc-campo-stepper button {
    width: 44px;
    min-width: 44px;
    padding: 0;
    border: none;
    background: none;
    color: var(--sc-muted, #6b7280);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    transition: background-color .14s, color .14s;
}
@media (hover: hover) {
.sc-conf-form-field .sc-campo-stepper button:hover,
.sc-campo-stepper button:hover { background-color: rgba(37,99,235,.08); color: var(--sc-blue, #2563eb); }
}
.sc-campo-stepper button:focus-visible { outline: 2px solid var(--sc-blue, #2563eb); outline-offset: -2px; }

/* Scoped sui contenitori dei moduli: `.sc-conf-form-field input:not(...)` è
   (0,3,1) e `.sc-manreg-form-card …` (0,4,1), quindi una regola a classe secca
   perderebbe e il valore tornerebbe una casella a tutta larghezza. Le frecce
   native del number sono tolte: sarebbero un secondo comando accanto ai tasti. */
.sc-campo-stepper input[type="number"],
.sc-conf-form-field .sc-campo-stepper input[type="number"],
.sc-manreg-form-card .sc-conf-form-field .sc-campo-stepper input[type="number"] {
    width: 64px;
    height: auto;   /* ci pensa align-items:stretch del contenitore */
    margin: 0;
    padding: 0;
    border: none;
    border-left: 1.5px solid #e5e7eb;
    border-right: 1.5px solid #e5e7eb;
    border-radius: 0;
    background: none;
    box-shadow: none;
    color: #111827;
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    -moz-appearance: textfield;
}
.sc-campo-stepper input[type="number"]:focus { outline: none; box-shadow: none; }
.sc-campo-stepper input[type="number"]::-webkit-outer-spin-button,
.sc-campo-stepper input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Nell'iscrizione manuale i campi hanno fondo bianco: il contatore lo segue. */
.sc-manreg-form-card .sc-conf-form-field .sc-campo-stepper { background-color: #fff; }

/* Nell'anteprima del form builder il campo è solo illustrativo */
.sc-campo-stepper input[readonly] { color: var(--sc-muted, #6b7280); }

/* Nota di configurazione accanto al badge del tipo, nella lista campi del form
   builder: dice come è impostato un campo senza doverne aprire il modale. */
.sc-fb-card-meta {
    margin-left: 6px;
    padding: 2px 7px;
    border-radius: 999px;
    background: #f1f5f9;
    color: #4b5563;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}

/* ── Freccia dei menu a tendina ─────────────────────────────────────────────
   Stessa ragione spiegata in sc-global.css: le regole che stilano i select con
   la forma abbreviata `background:` cancellano la freccia di wp-admin, che la
   disegna come immagine di sfondo insieme a `appearance: none`. Qui la variabile
   è ridichiarata perché questo foglio viene caricato **da solo** sul frontend
   (shortcode di iscrizione), dove sc-global.css non c'è. */
:root {
    --sc-select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%236b7280' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.sc-conf-field select,
.sc-conf-form-field select,
select.sc-input,
.sc-ci-conf-sel select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding-right: 30px;
    background-image: var(--sc-select-arrow);
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 11px 7px;
}

/* Il form pubblico ha campi più generosi: la freccia sta più larga. */
.sc-conf-form-field select { padding-right: 36px; background-position: right 14px center; }

/* ── Disposizione dei campi del modulo ───────────────────────────────────────
   I campi personalizzati vivono in una griglia a due colonne: per impostazione
   predefinita ognuno occupa la riga intera, con `is-half` ne occupa metà. Griglia
   invece di accoppiarli a due a due in PHP: una sequenza qualsiasi di interi e
   metà si sistema da sola, e un «metà» isolato resta a sinistra senza buchi. */
.sc-conf-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 14px;
}
.sc-conf-form-grid > .sc-conf-form-field { grid-column: span 2; }
.sc-conf-form-grid > .sc-conf-form-field.is-half { grid-column: span 1; }

/* Colonna FISSATA, non lasciata all'incolonnamento automatico. La logica
   condizionale nasconde i campi con `display:none`, e un campo che sparisce
   toglie il suo posto dalla griglia: tutti i campi a metà che seguono
   scalavano di lato, e le coppie pensate dall'admin («Età 1° figlio» a
   sinistra, «Età 2° figlio» a destra) si riaccostavano a caso a seconda di
   cosa era nascosto in quel momento. Con la colonna esplicita — calcolata in
   PHP da sc_conf_campi_colonne() sul modulo COMPLETO — un campo nascosto
   lascia il suo posto vuoto e gli altri non si muovono. A modulo tutto
   visibile il risultato è identico a prima. */
.sc-conf-form-grid > .sc-conf-form-field.is-half.is-col1 { grid-column: 1 / span 1; }
.sc-conf-form-grid > .sc-conf-form-field.is-half.is-col2 { grid-column: 2 / span 1; }

/* Sotto i 480px tutto a riga intera: due colonne di campi non ci stanno.
   Vanno ripetute anche le due classi di colonna, che sono più specifiche. */
@media (max-width: 480px) {
    .sc-conf-form-grid > .sc-conf-form-field.is-half,
    .sc-conf-form-grid > .sc-conf-form-field.is-half.is-col1,
    .sc-conf-form-grid > .sc-conf-form-field.is-half.is-col2 { grid-column: span 2; }
}

/* Opzioni in orizzontale: ognuna larga quanto il suo contenuto (`flex: 0 0 auto`),
   così le scelte brevi stanno in fila invece di occupare una riga a testa. */
.sc-campo-radios.is-oriz,
.sc-campo-checkboxes.is-oriz {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px;
}
.sc-campo-radios.is-oriz .sc-campo-opt-label,
.sc-campo-checkboxes.is-oriz .sc-campo-opt-label {
    flex: 0 0 auto;
    width: auto;
}

/* ══════════════════════════════════════════════════════════════════════════
   FORM BUILDER — lista campi come mappa del modulo
   La lista è una griglia a due colonne identica a quella del modulo: una card a
   metà riga si vede a metà riga. Prima la larghezza era un'impostazione sepolta
   nel modale e in lista non lasciava traccia, quindi si scopriva solo aprendo
   l'anteprima.
   ══════════════════════════════════════════════════════════════════════════ */

.sc-fb-items {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
}
.sc-fb-items > * { grid-column: span 2; }
.sc-fb-field-card { margin-bottom: 0; }
.sc-fb-field-card.is-half { grid-column: span 1; }

@media (max-width: 782px) {
    .sc-fb-items > .sc-fb-field-card.is-half { grid-column: span 2; }
}

/* Maniglia di trascinamento: due colonne di puntini, come le righe brano. */
.sc-fb-card-handle {
    width: 16px;
    height: 22px;
    flex-shrink: 0;
    cursor: grab;
    border-radius: 4px;
    background-image: radial-gradient(circle, #cbd5e1 1.5px, transparent 1.6px);
    background-size: 7px 6px;
    background-position: center;
    background-repeat: repeat;
}
.sc-fb-card-handle:active { cursor: grabbing; }
.sc-fb-field-card.is-dragging { opacity: .45; border-color: var(--sc-blue, #2563eb); }

/* Scorciatoia della larghezza: si cambia dalla card, senza aprire il modale. */
.sc-fb-card-w {
    min-width: 28px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.sc-fb-card-w.is-on {
    border-color: var(--sc-blue, #2563eb);
    background: var(--sc-blue-light, #eff6ff);
    color: var(--sc-blue-dark, #1d4ed8);
}

/* ── Segmented control del modale ──────────────────────────────────────────
   Due opzioni non meritano una tendina: a bottoni si vede subito qual è attiva
   e quali alternative esistono. */
.sc-fb-seg { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.sc-fb-seg button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border: 1px solid var(--sc-border-gray, #d1d5db);
    border-radius: var(--sc-lay-r-ctl, 8px);
    background: #fff;
    color: #374151;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: border-color .14s, background .14s, color .14s;
}
@media (hover: hover) {
.sc-fb-seg button:hover  { border-color: var(--sc-blue, #2563eb); }
}
.sc-fb-seg button.is-on  { border-color: var(--sc-blue, #2563eb); background: var(--sc-blue-light, #eff6ff); color: var(--sc-blue-dark, #1d4ed8); }

/* Miniatura della larghezza dentro il bottone: il concetto si legge a colpo
   d'occhio meglio di quanto lo spieghi l'etichetta. */
.sc-fb-seg-art {
    width: 26px;
    height: 12px;
    border-radius: 3px;
    background: #cbd5e1;
}
.sc-fb-seg button.is-on .sc-fb-seg-art { background: var(--sc-blue, #2563eb); }
.sc-fb-seg-art.is-half {
    background: linear-gradient(to right, #cbd5e1 0 12px, transparent 12px 100%);
}
.sc-fb-seg button.is-on .sc-fb-seg-art.is-half {
    background: linear-gradient(to right, var(--sc-blue, #2563eb) 0 12px, transparent 12px 100%);
}

/* Nota sotto un controllo del modale (l'hint inline vive dentro l'etichetta). */
.sc-fb-row-note {
    margin: 8px 0 0;
    color: var(--sc-muted, #6b7280);
    font-size: 12px;
    line-height: 1.45;
}

/* ══════════════════════════════════════════════════════════════════════════
   MODULO DI ISCRIZIONE — coerenza fra gli elementi
   Campi, opzioni, consenso e contatore condividono lo stesso linguaggio: bordo
   1.5px #e5e7eb, raggio 10px, fondo #f9fafb, e in stato attivo bordo blu con
   fondo #eff6ff. Prima ognuno aveva la sua sfumatura — il consenso era un
   riquadro ambra, le opzioni un grigio leggermente diverso dai campi.
   ══════════════════════════════════════════════════════════════════════════ */

/* Un elemento è «acceso» quando ci si scrive dentro **o** quando contiene il
   comando che ha il fuoco: le opzioni e il consenso ricevono il fuoco su una
   radio annidata, quindi serve :focus-within, non :focus. */
.sc-campo-opt-label:focus-within,
.sc-campo-consenso:focus-within,
.sc-conf-form-field .sc-campo-stepper:focus-within {
    border-color: var(--sc-blue, #2563eb);
    box-shadow: 0 0 0 4px rgba(37, 99, 235, .10);
}

/* Le opzioni respirano come i campi: stessa distanza dall'etichetta. */
.sc-campo-radios,
.sc-campo-checkboxes { margin-top: 0; }

/* Anteprima del modulo: la finestra segue la larghezza reale del form, o
   mostrerebbe due colonne più strette di quelle che vedrà chi si iscrive. */
#sc-form-preview-modal .sc-modal-box { max-width: 760px; }

/* Il consenso è una frase da leggere, non un'etichetta di campo: peso normale.
   Serve dirlo perché il tema del sito può impostare un peso sui <label>. */
.sc-conf-form-field .sc-campo-consenso { font-weight: 400; }
.sc-conf-form-field .sc-campo-consenso strong,
.sc-conf-form-field .sc-campo-consenso b { font-weight: 700; }

/* ══════════════════════════════════════════════════════════════════════════
   PIANTA POSTI — vista adattabile nel modulo di iscrizione
   Su un modulo largo 680px una sala a tre navate non ci sta: prima se ne vedeva
   solo il primo blocco e nulla lasciava capire che si potesse scorrere. Ora la
   sala si adatta alla larghezza e si può ingrandire per scegliere con precisione.
   ══════════════════════════════════════════════════════════════════════════ */

.sc-seatmap-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}
.sc-seatmap-bar-hint {
    color: var(--sc-muted, #6b7280);
    font-size: 12px;
    line-height: 1.3;
}
.sc-seatmap-zoombtns {
    display: inline-flex;
    align-items: stretch;
    margin-left: auto;
    border: 1.5px solid #e5e7eb;
    border-radius: 10px;
    background-color: #f9fafb;
    overflow: hidden;
}
.sc-seatmap-zoombtn {
    width: 38px;
    border: none;
    background: none;
    color: #374151;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    transition: background-color .14s, color .14s;
}
@media (hover: hover) {
.sc-seatmap-zoombtn:hover { background-color: #eff6ff; color: var(--sc-blue, #2563eb); }
}
.sc-seatmap-zoomval {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 52px;
    padding: 0 6px;
    border-left: 1.5px solid #e5e7eb;
    border-right: 1.5px solid #e5e7eb;
    color: var(--sc-muted, #6b7280);
    font-size: 12px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* La finestra sulla sala: l'altezza la impone il JS, perché `transform: scale()`
   non cambia il box di layout e sotto resterebbe un vuoto alto quanto la sala
   a grandezza naturale. */
.sc-seatmap-viewport {
    overflow: auto;
    border-radius: 10px;
    background-color: #fbfcfd;
    -webkit-overflow-scrolling: touch;
}
/* Il contenitore prende la dimensione **resa** (la calcola il JS) e centra la
   sala quando è più stretta della finestra. */
.sc-seatmap-zoom { position: relative; margin-inline: auto; }
/* Fuori dal flusso e scalata dall'angolo in alto a sinistra: così la sua
   dimensione naturale non entra nel calcolo dell'area scorrevole. `max-content`
   non è legato al contenitore, quindi non si crea alcun giro nelle misure. */
.sc-seatmap-sala { width: max-content; padding: 14px; box-sizing: border-box; }

/* Solo nella vista con zoom la sala esce dal flusso: lì il contenitore lo
   dimensiona il JS. Senza zoom resta in flusso, o la mappa sparirebbe. */
.sc-seatmap-zoom.is-zoomable .sc-seatmap-sala {
    position: absolute;
    top: 0;
    left: 0;
    transform-origin: top left;
}

/* Vista d'insieme: via i numeri, resta la forma della sala. */
.sc-seatmap.is-mini .sc-seat { font-size: 0; }

/* Dentro la vista adattabile lo scorrimento lo gestisce la finestra: due aree
   che scorrono una dentro l'altra sarebbero ingestibili col dito. */
.sc-seatmap-viewport .sc-seatmap-scroll { overflow: visible; }

/* Riepilogo dei posti scelti sotto la mappa: adattata alla larghezza, i numeri
   sui posti si fanno piccoli, quindi la scelta va ripetuta per nome. */
.sc-conf-seatpick-scelti {
    margin: 12px 0 0;
    padding: 10px 14px;
    border: 1.5px solid #bfdbfe;
    border-radius: 10px;
    background-color: #eff6ff;
    color: #1d4ed8;
    font-size: 14px;
    font-weight: 600;
}
.sc-conf-seatpick-scelti[hidden] { display: none; }

/* ── Modulo di iscrizione sul telefono ─────────────────────────────────────
   Il modulo pubblico si compila quasi sempre da mobile. Il problema principale
   erano i **padding annidati**: card 28 + blocco posti 16 + sala 14 mangiavano
   116px di larghezza sui due lati prima ancora di disegnare un posto. Qui il
   padding della card diventa più stretto e la pianta va **a filo**, recuperando
   un centinaio di pixel su uno schermo da 360. */
@media (max-width: 600px) {
    .sc-conf-form {
        --sc-form-pad: 14px;
        padding: 18px var(--sc-form-pad) 16px;
        border-radius: 14px;
    }
    .sc-conf-titolo { font-size: 18px; }
    .sc-conf-luogo, .sc-conf-data { font-size: 13px; }

    /* Campi un filo più stretti ai lati, ma altezza invariata: il bersaglio
       da toccare non si tocca. */
    .sc-conf-form-field input:not([type=radio]):not([type=checkbox]),
    .sc-conf-form-field select,
    .sc-conf-form-field textarea,
    .sc-campo-opt-label,
    .sc-campo-consenso { padding-left: 12px; padding-right: 12px; }

    /* Blocco della pianta a filo della card, e la finestra della mappa a filo
       del blocco: è l'elemento che più soffre la larghezza. */
    .sc-conf-seatpick {
        margin-inline: calc(-1 * var(--sc-form-pad, 0px));
        padding-inline: var(--sc-form-pad, 14px);
        border-inline: none;
        border-radius: 0;
    }
    .sc-conf-seatpick .sc-seatmap-viewport {
        margin-inline: calc(-1 * var(--sc-form-pad, 0px));
        border-radius: 0;
    }
    .sc-seatmap-sala { padding: 8px; }

    /* La barra dello zoom va a due righe: il suggerimento sopra, i comandi sotto
       e a tutta larghezza, così si toccano senza mirare. */
    .sc-seatmap-bar { flex-wrap: wrap; gap: 8px; }
    .sc-seatmap-bar-hint { flex: 1 0 100%; }
    .sc-seatmap-zoombtns { margin-left: 0; width: 100%; }
    .sc-seatmap-zoombtn { flex: 1; height: 44px; font-size: 18px; }
    .sc-seatmap-zoomval { flex: 0 0 auto; min-width: 58px; }

    /* La sala non si mangia la pagina: oltre i due terzi dello schermo scorre
       dentro la sua finestra invece di allungare il modulo all'infinito. */
    .sc-seatmap-viewport { max-height: 66vh; }

    .sc-seatmap-legend { gap: 8px 14px; justify-content: flex-start; }
    .sc-seatmap-legend-txt { font-size: 11px; }
    .sc-conf-seatpick-scelti { font-size: 15px; }

    /* Contatore: i tasti restano da 44px, si accorcia solo la casella del numero */
    .sc-campo-stepper input[type="number"],
    .sc-conf-form-field .sc-campo-stepper input[type="number"] { width: 56px; }
}

/* Schermi molto stretti: si recupera l'ultimo spazio utile. */
@media (max-width: 400px) {
    .sc-conf-form { --sc-form-pad: 12px; }
    .sc-seatmap-sala { padding: 6px; }
    .sc-seatmap-zoombtn { font-size: 16px; }
}

/* ── Pianta a schermo intero ───────────────────────────────────────────────
   Sovrapposizione CSS e non API Fullscreen: su iOS Safari quella non vale per
   elementi diversi da un video e dentro un iframe è spesso bloccata — i due casi
   in cui questa mappa finisce più spesso. */
.sc-seatmap.is-fullscreen {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 14px;
    background: #fff;
    box-sizing: border-box;
}
.sc-seatmap.is-fullscreen .sc-seatmap-viewport {
    flex: 1 1 auto;
    max-height: none;
    min-height: 0;
}
.sc-seatmap.is-fullscreen .sc-seatmap-legend { margin-top: 12px; padding-top: 12px; }

/* Il gesto a due dita è nostro; a un dito resta al browser, che trascina. */
.sc-seatmap-viewport { touch-action: pan-x pan-y; }

/* ═══════════════════════════════════════════════════════════════════════════
   Conferenze su schermi touch
   ═══════════════════════════════════════════════════════════════════════════
   Qui il dito non è un'eventualità ma il caso normale: il modulo pubblico si
   compila quasi sempre col telefono, e il check-in si fa alla porta con il
   telefono in mano mentre la gente aspetta. Valgono le stesse due regole della
   cassa (vedi libreria.css), per le stesse ragioni:

   1. NESSUN CAMPO SOTTO I 16px — sotto quella soglia iOS ingrandisce la pagina
      appena si tocca il campo, e da lì in poi il modulo è fuori scala. Erano
      tutti sotto: 14px il modulo pubblico (nome, cognome, email, telefono,
      contatore), 15px il token del check-in, 13px l'editor, i filtri iscrizioni
      e il selettore della conferenza.
   2. BERSAGLI ABBASTANZA GRANDI — i ± del contatore, le opzioni a scelta
      singola/multipla e i comandi di zoom della pianta erano sotto i 40px.
   ------------------------------------------------------------------------- */
@media (pointer: coarse) {
    /* — Modulo pubblico — */
    .sc-conf-form-field input:not([type=radio]):not([type=checkbox]),
    .sc-conf-form-field select,
    .sc-conf-form-field textarea,
    .sc-campo-stepper input[type="number"],
    .sc-conf-form-field .sc-campo-stepper input[type="number"] { font-size: 16px; }

    /* — Check-in: è la pagina che si usa in piedi, col telefono — */
    .sc-checkin-token-input { font-size: 16px; }
    .sc-ci-conf-sel select { font-size: 16px; min-height: 46px; }

    /* — Aree admin raggiungibili anche da tablet — */
    .sc-conf-field input,
    .sc-conf-field select,
    .sc-conf-field textarea,
    .sc-input,
    .sc-layout-editor input.sc-layout-row-label,
    .sc-layout-editor input.sc-layout-sector-name { font-size: 16px; }

    /* — Bersagli — */
    .sc-campo-stepper button { min-width: 44px; min-height: 44px; }
    .sc-campo-opt-label { min-height: 44px; }
    .sc-conf-seatskip-btn { min-height: 48px; }
    .sc-conf-seatskip-undo { min-height: 44px; }
    .sc-campo-consenso { min-height: 44px; }
    .sc-seatmap-zoombtn { min-width: 40px; min-height: 34px; }
    .sc-conf-submit { min-height: 52px; font-size: 16px; }

    /* Niente doppio tap che ingrandisce, niente lampo grigio, niente selezione
       del testo tenendo premuto su un comando. Sul contenitore, così vale per
       tutto quello che contiene. */
    .sc-conf-shortcode,
    .sc-ci-app { touch-action: manipulation; }
    .sc-conf-shortcode button,
    .sc-ci-app button,
    .sc-seat,
    .sc-seatmap-zoombtn { -webkit-tap-highlight-color: transparent; }
    .sc-campo-opt-label,
    .sc-campo-consenso,
    .sc-conf-submit { -webkit-user-select: none; user-select: none; }
}