/* Strumenti (templates/shared/strumenti, voce "Strumenti" nelle tre aree): il collage e l'editor PDF,
   che dal 25/09/2026 è un banco di lavoro a oggetti: palette degli strumenti a sinistra, al centro
   la tela con la pagina e i suoi oggetti, a destra il pannello delle proprietà. Prefisso .sp-.
   Solo token di tokens.css e colors.css: i colori d'area arrivano da --color-primary sul <body>,
   quindi lo stesso foglio va bene per admin, azienda e consulente. Stile bianco: la tela è
   --color-bg-tertiary, la pagina --color-white, gli accenti --color-primary, le guide --color-danger.

   Qui stanno SOLO i componenti che il design system non ha: zona di caricamento, palette, barra
   del documento, tela, oggetti e maniglie, guide, ritaglio, barra di stato, striscia delle pagine,
   i campi del pannello, la fotocamera. Card, pulsanti, progress, dropdown, campi e spaziature sono
   quelli dell'area e di Bootstrap (regola dell'utente, 24/09/2026: niente CSS nuovo dove esiste
   una classe riutilizzabile). Gli id e le classi che editor.js e fotocamera.js cercano o creano
   sono il contratto in .claude/docs/specs/2026-09-25-editor-pdf-oggetti-design.md § 10. */

/* ===== Zona di caricamento (è anche .sp-upload-zone: drop-anywhere.js la lascia in pace) ===== */

.sp-drop {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 320px;
    padding: var(--k-space-10);
    border: 2px dashed var(--color-border-light);
    border-radius: var(--k-radius);
    text-align: center;
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease;
}

.sp-drop:hover,
.sp-drop.attivo,
#spArea.attivo .sp-drop {
    border-color: var(--color-primary);
    background: var(--color-bg-secondary);
}

/* La zona principale: tinta dell'area, così è lei l'azione grande della pagina vuota */
.sp-drop-principale {
    border-color: var(--color-primary);
    background: color-mix(in srgb, var(--color-primary) 6%, var(--color-white));
}

.sp-drop-icona {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    margin-bottom: var(--k-space-3);
    border-radius: var(--k-radius);
    background: var(--color-primary);
    color: var(--color-primary-solid-testo);
    font-size: 1.8rem;
}

/* Il colore globale dei PDF allegati non deve tingere l'icona dell'editor. */
.pagina-testata-sigla .fa-file-pdf,
.sp-banco .fa-file-pdf {
    color: var(--color-primary-solid-testo);
}

/* ===== Icona e tessera compatta della vetrina strumenti ===== */

.sp-servizi-grid > div {
    display: flex;
}

.sp-servizio {
    width: 220px;
    min-height: 190px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: var(--k-space-4);
    padding: var(--k-space-6);
    text-align: left;
}

.sp-servizio-icona {
    align-self: flex-start;
    font-size: 48px;
    line-height: 1;
}

.sp-servizio .fa-file-pdf {
    color: var(--color-primary-solid);
}

.sp-servizio-testo {
    display: grid;
    gap: var(--k-space-2);
}

.sp-servizio-testo > span:first-child {
    font-size: var(--k-text-md);
}

.sp-servizio-testo .small {
    font-size: var(--k-text-xs);
    line-height: 1.35;
}

/* ===== Barra di avanzamento dello scarico ===== */

.sp-progresso {
    height: 6px;
}

.sp-progresso .progress-bar {
    background: var(--color-primary);
}

/* ===== Il banco: palette | centro | pannello ===== */

.sp-banco {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr) 300px;
    gap: var(--k-space-3);
    align-items: start;
}

/* ===== Palette degli strumenti (come .tool-palette della planimetria, in colonna) ===== */

.sp-palette {
    position: sticky;
    top: var(--k-space-3);
    display: flex;
    flex-direction: column;
    gap: var(--k-space-1);
    padding: var(--k-space-1);
    background: var(--color-white);
    border: 1px solid var(--color-border-light);
    border-radius: var(--k-radius);
    box-shadow: var(--k-shadow);
}

.sp-palette-sep {
    flex: 0 0 auto;
    height: 1px;
    margin: var(--k-space-1) var(--k-space-2);
    background: var(--color-border-light);
}

/* 62px: la colonna è 72px meno il padding e il bordo della palette */
.sp-tessera {
    flex: 0 0 auto;
    width: 62px;
    height: 60px;
    padding: 0;
    border: none;
    border-radius: var(--k-radius);
    background: transparent;
    color: var(--color-text-secondary);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--k-space-1);
    font-size: var(--k-text-2xs);
    font-weight: 600;
    line-height: 1.1;
    cursor: pointer;
    transition: background-color .15s, color .15s;
}

.sp-tessera i {
    font-size: 1.25rem;
}

.sp-tessera:hover:not(.attivo) {
    background: var(--color-bg-secondary);
    color: var(--color-text-primary);
}

.sp-tessera.attivo {
    background: var(--color-primary);
    color: var(--color-primary-solid-testo);
}

/* ===== Centro: barra del documento, tela, stato, striscia ===== */

.sp-centro {
    display: grid;
    gap: var(--k-space-3);
    min-width: 0;
}

.sp-barra-doc {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--k-space-2);
    padding: var(--k-space-2) var(--k-space-3);
    background: var(--color-white);
    border: 1px solid var(--color-border-light);
    border-radius: var(--k-radius);
    font-size: var(--k-text-sm);
}

.sp-barra-doc-nome {
    font-weight: 700;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sp-barra-doc-meta {
    color: var(--color-text-muted);
    white-space: nowrap;
}

.sp-barra-doc-spazio,
.sp-stato-spazio {
    flex: 1;
}

.sp-icona-btn {
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    background: transparent;
    border-radius: var(--k-radius);
    color: inherit;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.sp-icona-btn:hover {
    background: var(--color-bg-secondary);
}

.sp-icona-btn:disabled {
    opacity: .35;
    cursor: default;
}

.sp-icona-btn:disabled:hover {
    background: transparent;
}

.sp-icona-btn.pericolo:hover {
    color: var(--color-danger-solid);
}

/* La cornice tiene insieme la tela che scorre e la barra di stato sotto */
.sp-vista {
    background: var(--color-white);
    border: 1px solid var(--color-border-light);
    border-radius: var(--k-radius);
    overflow: hidden;
}

.sp-tela {
    position: relative;
    height: min(70vh, 720px);
    padding: var(--k-space-6);
    overflow: auto;
    background: var(--color-bg-tertiary);
}

/* File trascinati sulla tela quando c'è già un documento */
.sp-tela.attivo,
#spArea.attivo .sp-tela {
    outline: 2px dashed var(--color-primary);
    outline-offset: -4px;
}

/* Il foglio: misure in px messe dal JS; centrato finché sta nella tela, poi scorre */
.sp-foglio {
    position: relative;
    margin: 0 auto;
    background: var(--color-white);
    box-shadow: var(--k-shadow-lg);
    user-select: none;
    touch-action: none;
}

.sp-foglio > canvas {
    display: block;
    width: 100%;
    height: 100%;
}

.sp-livello {
    position: absolute;
    inset: 0;
}

/* ===== Oggetti sulla pagina (li crea il JS) ===== */

.sp-oggetto {
    position: absolute;
    box-sizing: border-box;
    cursor: move;
    touch-action: none;
    transform-origin: center;
}

.sp-oggetto.selezionato {
    outline: 1.5px solid var(--color-primary);
    outline-offset: 0;
}

.sp-menu-contestuale {
    position: fixed;
    z-index: var(--z-preview);
    display: flex;
    flex-direction: column;
    min-width: 176px;
    padding: var(--k-space-1);
    background: var(--color-white);
    border: 1px solid var(--color-border-light);
    border-radius: var(--k-radius);
    box-shadow: var(--k-shadow-lg);
}

.sp-menu-contestuale button {
    padding: var(--k-space-2) var(--k-space-3);
    border: 0;
    border-radius: calc(var(--k-radius) - 2px);
    background: transparent;
    color: var(--color-text-primary);
    text-align: left;
    cursor: pointer;
}

.sp-menu-contestuale button:hover:not(:disabled),
.sp-menu-contestuale button:focus-visible {
    background: var(--color-bg-secondary);
    outline: none;
}

.sp-menu-contestuale button:disabled {
    color: var(--color-text-muted);
    cursor: default;
}

.sp-menu-separatore {
    height: 1px;
    margin: var(--k-space-1) 0;
    background: var(--color-border-light);
}

/* «Su tutte le pagine» (filigrana, intestazione, numeri): un tratteggio leggero quando non è selezionato */
.sp-oggetto.sp-comune:not(.selezionato) {
    outline: 1px dashed color-mix(in srgb, var(--color-primary) 45%, transparent);
}

.sp-oggetto-immagine img {
    display: block;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.sp-oggetto-testo {
    white-space: pre;
    overflow: visible;
    line-height: 1.2;
}

.sp-oggetto-linea svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
}

.sp-oggetto-evidenzia {
    mix-blend-mode: multiply;
}

/* ===== Testo del PDF selezionabile (strumento Seleziona): trasparente, si vede solo la selezione ===== */

.sp-testo-pdf {
    position: absolute;
    inset: 0;
    user-select: text;
    -webkit-user-select: text;
    cursor: text;
}

.sp-testo-riga {
    position: absolute;
    display: flex;
    align-items: flex-end;
    white-space: pre;
    line-height: 1;
    color: transparent;
    transform-origin: center;
}

.sp-testo-riga span {
    transform-origin: left bottom;
}

.sp-testo-riga.scelta {
    outline: 1.5px solid var(--color-primary);
    background: color-mix(in srgb, var(--color-primary) 8%, transparent);
    cursor: move;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
}

.sp-testo-pdf ::selection {
    background: color-mix(in srgb, var(--color-primary) 30%, transparent);
    color: transparent;
}

/* ===== Immagini del PDF (Seleziona): zona cliccabile che le stacca e le rende oggetti ===== */

.sp-elemento-pdf {
    position: absolute;
    box-sizing: border-box;
    cursor: move;
    touch-action: none;
    transform-origin: center;
}

.sp-elemento-pdf:hover {
    outline: 1px dashed var(--color-primary);
    background: color-mix(in srgb, var(--color-primary) 6%, transparent);
}

/* ===== Cerca: fissa nella barra del documento, e i ritrovamenti sulla pagina ===== */

.sp-cerca {
    display: flex;
    align-items: center;
    gap: var(--k-space-1);
    flex: 0 1 340px;
    min-width: 200px;
}

.sp-cerca input {
    flex: 1 1 auto;
    min-width: 0;
}

.sp-cerca-conta {
    color: var(--color-text-secondary);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.sp-trovato {
    position: absolute;
    box-sizing: border-box;
    background: color-mix(in srgb, var(--color-warning) 35%, transparent);
    mix-blend-mode: multiply;
    border-radius: 2px;
    pointer-events: none;
    transform-origin: center;
}

.sp-trovato.attivo {
    background: color-mix(in srgb, var(--color-warning) 70%, transparent);
    outline: 2px solid var(--color-primary);
}

/* ===== Modifica testo: le righe del PDF, la loro correzione e il campo sopra la riga ===== */

/* La riga corretta, anche fuori dallo strumento: copre l'originale col colore di fondo campionato */
.sp-correzione {
    position: absolute;
    box-sizing: border-box;
    display: flex;
    align-items: flex-end;
    white-space: pre;
    overflow: visible;
    line-height: 1;
    pointer-events: none;
    transform-origin: center;
}

.sp-riga {
    position: absolute;
    box-sizing: border-box;
    border-radius: 2px;
    cursor: text;
    transform-origin: center;
}

.sp-riga:hover {
    outline: 1px dashed var(--color-primary);
    background: color-mix(in srgb, var(--color-primary) 8%, transparent);
}

.sp-riga.corretta {
    outline: 1.5px solid color-mix(in srgb, var(--color-primary) 60%, transparent);
}

.sp-riga-input {
    position: absolute;
    box-sizing: border-box;
    min-width: 40px;
    padding: 0 2px;
    border: 0;
    border-radius: 2px;
    outline: 1.5px solid var(--color-primary);
    line-height: 1;
    transform-origin: center;
}

/* Maniglie: quadrate, bianche col bordo dell'area; quella di rotazione è tonda sopra il centro */
.sp-maniglia {
    position: absolute;
    width: 12px;
    height: 12px;
    background: var(--color-white);
    border: 1.5px solid var(--color-primary);
    touch-action: none;
}

.sp-maniglia.nw { left: -6px; top: -6px; cursor: nwse-resize; }
.sp-maniglia.ne { right: -6px; top: -6px; cursor: nesw-resize; }
.sp-maniglia.sw { left: -6px; bottom: -6px; cursor: nesw-resize; }
.sp-maniglia.se { right: -6px; bottom: -6px; cursor: nwse-resize; }
.sp-maniglia.n { left: calc(50% - 6px); top: -6px; cursor: ns-resize; }
.sp-maniglia.s { left: calc(50% - 6px); bottom: -6px; cursor: ns-resize; }
.sp-maniglia.w { left: -6px; top: calc(50% - 6px); cursor: ew-resize; }
.sp-maniglia.e { right: -6px; top: calc(50% - 6px); cursor: ew-resize; }

.sp-maniglia.rot {
    left: calc(50% - 6px);
    top: -28px;
    border-radius: var(--k-circle);
    cursor: grab;
}

/* La gambetta che unisce la maniglia di rotazione al bordo dell'oggetto */
.sp-maniglia.rot::before {
    content: "";
    position: absolute;
    left: calc(50% - 0.75px);
    top: 100%;
    width: 1.5px;
    height: 17px;
    background: var(--color-primary);
}

/* Guide di allineamento al centro della pagina: .on le accende */
.sp-guida {
    position: absolute;
    background: var(--color-danger);
    opacity: 0;
    pointer-events: none;
    transition: opacity .1s;
}

.sp-guida.v { top: 0; bottom: 0; left: 50%; width: 1px; }
.sp-guida.h { left: 0; right: 0; top: 50%; height: 1px; }

.sp-guida.on {
    opacity: .8;
}

/* Riquadro del ritaglio: fuori dal riquadro la pagina si scurisce */
.sp-ritaglio {
    position: absolute;
    box-sizing: border-box;
    border: 2px dashed var(--color-white);
    outline: 1px dashed color-mix(in srgb, var(--color-black) 50%, transparent);
    box-shadow: 0 0 0 9999px color-mix(in srgb, var(--color-black) 35%, transparent);
    cursor: move;
    touch-action: none;
}

/* ===== Barra di stato: coordinate e misure in mm, pagina, zoom ===== */

.sp-stato {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--k-space-4);
    padding: var(--k-space-1) var(--k-space-3);
    background: var(--color-white);
    border-top: 1px solid var(--color-border-light);
    font-family: var(--k-font-mono);
    font-size: var(--k-text-sm);
    letter-spacing: .02em;
    color: var(--color-text-muted);
}

.sp-stato b {
    color: var(--color-text-primary);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.sp-zoom {
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

.sp-zoom b {
    min-width: 3.5em;
    text-align: center;
}

.sp-zoom button {
    width: 26px;
    height: 24px;
    padding: 0;
    border: 0;
    border-radius: var(--k-radius);
    background: transparent;
    color: var(--color-text-secondary);
    font: inherit;
    font-size: var(--k-text-md);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.sp-zoom button:hover {
    background: var(--color-bg-secondary);
    color: var(--color-text-primary);
}

/* ===== Striscia delle pagine: miniature trascinabili, numero sotto, azioni sotto quella aperta ===== */

.sp-striscia {
    display: flex;
    align-items: flex-start;
    gap: var(--k-space-3);
    padding: var(--k-space-3) var(--k-space-3) var(--k-space-12);
    background: var(--color-white);
    border: 1px solid var(--color-border-light);
    border-radius: var(--k-radius);
    overflow-x: auto;
    scrollbar-width: thin;
}

.sp-striscia-lab {
    flex-shrink: 0;
    align-self: center;
    font-size: var(--k-text-2xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--color-text-muted);
}

.sp-striscia-lista {
    display: flex;
    align-items: flex-start;
    gap: var(--k-space-3);
    flex-shrink: 0;
}

.sp-thumb {
    position: relative;
    flex-shrink: 0;
    width: 54px;
    background: var(--color-white);
    border: 1.5px solid var(--color-border-light);
    border-radius: var(--k-radius);
    cursor: pointer;
    touch-action: none;
    transition: border-color .15s;
}

.sp-thumb canvas {
    display: block;
    width: 100%;
    height: auto;
    border-radius: calc(var(--k-radius) - 2px);
}

.sp-thumb:hover:not(.attiva) {
    border-color: var(--color-gray-400);
}

.sp-thumb.attiva {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px var(--color-primary-light);
}

.sp-thumb.trascinata {
    opacity: .5;
}

.sp-thumb-num {
    position: absolute;
    top: 100%;
    left: -4px;
    right: -4px;
    margin-top: 2px;
    text-align: center;
    font-size: var(--k-text-2xs);
    line-height: 1.2;
    color: var(--color-text-muted);
}

.sp-thumb-azioni {
    position: absolute;
    top: calc(100% + 16px);
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 0;
}

.sp-thumb-azioni .sp-icona-btn {
    width: 24px;
    height: 24px;
    font-size: var(--k-text-xs);
    color: var(--color-text-secondary);
}

.sp-thumb-piu {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 76px;
    padding: 0;
    border-style: dashed;
    background: transparent;
    color: var(--color-text-muted);
    font-size: var(--k-text-2xl);
    font-weight: 400;
    line-height: 1;
    cursor: pointer;
}

.sp-thumb-piu:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

/* ===== Pannello delle proprietà: card dell'area, sticky a destra; in basso su telefono ===== */

.sp-pannello {
    min-width: 0;
}

#spProp {
    min-width: 0;
    width: 100%;
}

.sp-pdf-dialogo {
    max-height: calc(100dvh - 2rem);
    overflow-y: auto;
}

.sp-pdf-attesa[hidden] {
    display: none;
}

.sp-pdf-attesa-barra {
    height: 8px;
    margin-top: var(--k-space-5);
    overflow: hidden;
}

.sp-pdf-attesa-indeterminata .progress-bar {
    width: 35%;
    animation: sp-pdf-attesa-scorri 1.4s ease-in-out infinite;
}

@keyframes sp-pdf-attesa-scorri {
    from { transform: translateX(-100%); }
    to { transform: translateX(300%); }
}

@media (prefers-reduced-motion: reduce) {
    .sp-pdf-attesa-indeterminata .progress-bar {
        width: 100%;
        animation: none;
        opacity: .5;
    }
}

.sp-pdf-dialogo-corpo {
    min-width: 0;
    margin-top: var(--k-space-4);
}

.sp-pdf-dialogo-corpo .form-control {
    width: 100%;
    min-width: 0;
    max-width: 100%;
}

.sp-pdf-dialogo-corpo .sp-nota {
    margin: var(--k-space-3) 0 0;
}

.sp-pdf-dialogo-campi:not([hidden]) {
    display: grid;
    gap: var(--k-space-2);
}

.sp-pdf-dialogo-campi .form-label {
    margin: var(--k-space-2) 0 0;
}

.sp-pdf-dialogo-errore:not([hidden]) {
    margin: var(--k-space-2) 0 0;
    color: var(--color-danger-testo-tinta);
    font-size: var(--k-text-sm);
}

.sp-pdf-dialogo .dialogo-azioni {
    flex-wrap: wrap;
}

.sp-pdf-dialogo .dialogo-azioni .btn {
    flex: 1 1 auto;
    padding-inline: var(--k-space-3);
}

.sp-pannello-maniglia {
    display: none;
}

#spProp:empty {
    display: none;
}

.sp-campo {
    display: flex;
    flex-direction: column;
    gap: var(--k-space-1);
}

.sp-campo > label {
    font-size: var(--k-text-sm);
    font-weight: 600;
    margin: 0;
}

.sp-prop-sezione {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    min-width: 0;
    gap: var(--k-space-3);
    padding-bottom: var(--k-space-3);
    border-bottom: 1px solid var(--color-border-light);
}

.sp-prop-sezione .form-control,
.sp-prop-sezione .form-select {
    min-width: 0;
    max-width: 100%;
}

.sp-prop-sezione > button {
    min-width: 0;
    max-width: 100%;
    white-space: normal;
}

.sp-prop-sezione:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.sp-prop-titoletto {
    font-size: var(--k-text-2xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--color-text-muted);
}

.sp-griglia2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--k-space-2);
}

/* Campo in millimetri: input piccolo con l'unità a destra */
.sp-campo-mm {
    display: flex;
    align-items: center;
    gap: var(--k-space-1);
}

.sp-campo-mm .form-control {
    min-width: 0;
    font-variant-numeric: tabular-nums;
}

.sp-unita {
    flex-shrink: 0;
    font-size: var(--k-text-2xs);
    color: var(--color-text-muted);
}

.sp-nota {
    margin: 0;
    font-size: var(--k-text-xs);
    color: var(--color-text-muted);
}

@media (min-width: 1025px) {
    .sp-pannello {
        position: sticky;
        top: var(--k-space-3);
    }
}

/* ===== Fotocamera dal vivo (fotocamera.js la monta sul body) ===== */

.sp-fotocamera {
    position: fixed;
    inset: 0;
    z-index: var(--z-preview);
    display: flex;
    flex-direction: column;
    background: var(--color-black);
    color: var(--color-white);
}

.sp-fotocamera-testata {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--k-space-3);
    padding: calc(var(--k-space-3) + env(safe-area-inset-top, 0px)) var(--k-space-4) var(--k-space-3);
    font-size: var(--k-text-md);
}

.sp-fotocamera-centro {
    flex: 1;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sp-fotocamera-centro video,
.sp-fotocamera-centro canvas {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.sp-fotocamera-suggerimento {
    padding: var(--k-space-2) var(--k-space-4);
    text-align: center;
    font-size: var(--k-text-sm);
    opacity: .85;
}

.sp-fotocamera-piede {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--k-space-6);
    padding: var(--k-space-4) var(--k-space-4) calc(var(--k-space-4) + env(safe-area-inset-bottom, 0px));
}

.sp-fotocamera-scatto {
    width: 72px;
    height: 72px;
    padding: 0;
    border: 4px solid var(--color-gray-500);
    border-radius: var(--k-circle);
    background: var(--color-white);
    box-shadow: 0 0 0 2px var(--color-white);
    cursor: pointer;
    transition: transform .1s;
}

.sp-fotocamera-scatto:active {
    transform: scale(.94);
}

.sp-fotocamera-btn {
    padding: var(--k-space-2) var(--k-space-4);
    border: 1px solid var(--color-white);
    border-radius: var(--k-pill);
    background: transparent;
    color: var(--color-white);
    font: inherit;
    font-weight: 500;
    cursor: pointer;
}

.sp-fotocamera-btn.pieno {
    background: var(--color-white);
    color: var(--color-black);
}

.sp-fotocamera-btn:disabled {
    opacity: .5;
    cursor: default;
}

/* ===== Telefono e tablet: in colonna, palette in riga, pannello ancorato in basso ===== */

@media (max-width: 1024px) {
    .sp-banco {
        display: block;
    }

    .sp-palette {
        position: static;
        flex-direction: row;
        overflow-x: auto;
        scrollbar-width: thin;
        margin-bottom: var(--k-space-3);
    }

    .sp-palette-sep {
        width: 1px;
        height: auto;
        align-self: stretch;
        margin: var(--k-space-2) var(--k-space-1);
    }

    .sp-tela {
        height: 60vh;
    }

    /* Il pannello resta ancorato in basso mentre la tela e la striscia scorrono sopra */
    .sp-pannello {
        position: sticky;
        bottom: 0;
        margin: var(--k-space-3) -16px 0;
        border-radius: var(--k-radius) var(--k-radius) 0 0;
        border-width: 1px 0 0;
        box-shadow: 0 -8px 24px color-mix(in srgb, var(--color-black) 8%, transparent);
        max-height: 60vh;
        overflow-y: auto;
    }

    .sp-pannello-maniglia {
        display: block;
        width: 36px;
        height: 4px;
        margin: 0 auto;
        border-radius: var(--k-pill);
        background: var(--color-gray-300);
    }

    /* Chiuso: restano maniglia, titolo, progress e la riga di scarico; il titolo apre e chiude (editor.js) */
    .sp-pannello .sp-pannello-titolo {
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .sp-pannello .sp-pannello-titolo::after {
        content: "\f077";
        font-family: "Font Awesome 6 Free";
        font-weight: 900;
        font-size: var(--k-text-xs);
        color: var(--color-text-secondary);
    }

    .sp-pannello.chiuso .sp-pannello-titolo::after {
        content: "\f078";
    }

    /* !important: le utility di Bootstrap (d-flex) sui figli lo sono già */
    .sp-pannello.chiuso > div > :not(.sp-pannello-maniglia):not(.sp-pannello-titolo):not(.sp-progresso):not(#spScaricaRiga) {
        display: none !important;
    }
}

@media (max-width: 575px) {
    .sp-drop {
        padding: var(--k-space-6);
    }

    .sp-tessera {
        width: 52px;
        height: 52px;
    }

    .sp-tela {
        height: 50vh;
        padding: var(--k-space-3);
    }

    .sp-stato {
        gap: var(--k-space-2);
    }
}

@media (prefers-reduced-motion: reduce) {
    .sp-drop,
    .sp-tessera,
    .sp-thumb,
    .sp-guida,
    .sp-fotocamera-scatto {
        transition: none;
    }
}