.presa-stepper {
    display: grid;
    grid-template-columns: repeat(7, minmax(90px, 1fr));
    gap: .55rem;
    overflow-x: auto;
    padding-bottom: .4rem;
}
.presa-step {
    min-width: 90px;
    border: 1px solid #d9e1e7;
    border-radius: .8rem;
    padding: .7rem;
    background: #fff;
    color: #5c6c76;
    text-decoration: none;
    text-align: center;
}
.presa-step strong { display: block; color: #263943; }
.presa-step.is-active { border-color: #0d6efd; background: #eef5ff; }
.presa-step.is-complete { border-color: #86b99d; background: #f0faf4; }
.presa-step.is-incomplete { border-color: #d68a8a; background: #fdecea; color: #7a2118; }
.presa-step.is-incomplete strong { color: #7a2118; }
/* Lo stepper ha 7 colonne per i 7 passaggi di compilazione: il riepilogo e'
   l'ottava card e senza questa regola andrebbe a capo occupando un settimo di
   riga. Su mobile la griglia e' una striscia a scorrimento orizzontale, dove
   una card larga sette colonne sarebbe illeggibile: li' resta di misura. */
.presa-step-riepilogo { grid-column: 1 / -1; }
.presa-section { border: 0; box-shadow: 0 .25rem 1rem rgba(26, 48, 60, .07); }
.presa-section .card-header { background: transparent; border-bottom: 1px solid #edf0f2; }
.presa-autosave { min-height: 1.5rem; }
.presa-document-card { border-left: 4px solid #0d6efd; }
@media (max-width: 767.98px) {
    .presa-stepper { grid-template-columns: repeat(7, 150px); }
    .presa-step-riepilogo { grid-column: auto; }
}
.presa-iban-grid { display: flex; flex-wrap: wrap; gap: .3rem; }
.presa-iban-box {
    width: 2.1rem;
    height: 2.5rem;
    padding: 0;
    text-align: center;
}

.presa-doc-upload { display: flex; gap: .5rem; flex-wrap: wrap; }
.presa-doc-camera-btn { display: none; }
@media (pointer: coarse) {
    .presa-doc-camera-btn { display: inline-block; }
}
.presa-doc-thumb {
    width: 3.5rem;
    height: 3.5rem;
    object-fit: cover;
    border: 1px solid #ccd5db;
    border-radius: .4rem;
    background: #fff;
    flex-shrink: 0;
}

/* Link ai documenti di riferimento nelle "prese visione" del wizard: finche'
   la documentazione non e' stata individuata puntano a "#" (placeholder). */
.presa-doc-link { text-decoration: underline dashed; }
.presa-doc-link[href="#"] { color: #b3261e; }

/* Segnala i campi davvero obbligatori (stessa lista di
   validate_pratica_for_documents in prese_servizio_service.py) direttamente
   nel wizard, invece di scoprirlo solo dall'elenco errori al passo finale. */
.presa-required::after {
    content: " *";
    color: #b3261e;
    font-weight: 700;
}

/* Canvas di firma grafica (Fase 4): touch-action none evita che il trascico
   sul canvas faccia scorrere la pagina su mobile. */
.presa-firma-canvas {
    display: block;
    width: 100%;
    max-width: 480px;
    height: 180px;
    touch-action: none;
    background: #fff;
    border: 1px solid #ccd5db;
    border-radius: .5rem;
    cursor: crosshair;
}
.presa-firma-hint { color: #5c6c76; }

/* Checkbox del wizard piu' marcate: il bordo di default di Bootstrap
   (1px, grigio chiaro) sparisce quasi alla vista su schermi piccoli o in
   stampa, rendendo poco chiaro dove flaggare. */
.presa-section .form-check-input {
    border: 2px solid #4a5a66;
}
.presa-section .form-check-input:checked {
    border-color: #0d6efd;
}

/* Editor LaTeX dei modelli/macro (Fase 8 della migrazione WeasyPrint/HTML ->
   LaTeX): due colonne ridimensionabili, editor di codice a sinistra,
   anteprima PDF a destra. Sostituisce il vecchio .presa-modello-* pensato
   per il contenteditable HTML. */
.presa-latex-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    padding: .75rem 1rem;
    border-bottom: 1px solid #dee2e6;
    background: #f8fafc;
}
.presa-latex-toolbar button {
    min-height: 2.15rem;
    border: 1px solid #cbd5e1;
    border-radius: .4rem;
    background: #fff;
    color: #243746;
    padding: .3rem .6rem;
    font-size: .85rem;
}
.presa-latex-toolbar button:hover,
.presa-latex-toolbar button:focus-visible {
    border-color: #0d6efd;
    color: #0a4fb5;
}
.presa-latex-toolbar-separator {
    width: 1px;
    margin: .15rem .25rem;
    background: #d7dee5;
}
.presa-modello-campi { display: flex; flex-wrap: wrap; gap: .5rem; align-items: end; }

.presa-latex-editor {
    --presa-latex-colonna-sorgente: 50%;
    display: flex;
    align-items: stretch;
    min-height: 32rem;
    border-top: 1px solid #dee2e6;
}
.presa-latex-editor-macro { min-height: 18rem; }
.presa-latex-editor-colonna {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.presa-latex-editor-sorgente { width: var(--presa-latex-colonna-sorgente); }
.presa-latex-editor-anteprima { flex: 1 1 auto; background: #f5f6f8; }
.presa-latex-editor-divisore {
    flex: 0 0 6px;
    cursor: col-resize;
    background: #e5e9ec;
    touch-action: none;
}
.presa-latex-editor-divisore:hover,
.presa-latex-editor-divisore:focus-visible { background: #b8c4cc; }

.presa-latex-codemirror { flex: 1 1 auto; overflow: auto; }
.presa-latex-codemirror .cm-editor { height: 100%; font-size: .9rem; }
.presa-latex-codemirror .cm-scroller { font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace; }

.presa-latex-anteprima-toolbar {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .6rem .9rem;
    border-bottom: 1px solid #dee2e6;
    background: #fff;
}
.presa-latex-anteprima-stato { font-size: .8rem; color: #5c6c76; }
.presa-latex-anteprima-errore {
    margin: 0;
    padding: .6rem .9rem;
    background: #fdecea;
    color: #7a2118;
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
    font-size: .82rem;
    white-space: pre-wrap;
    border-bottom: 1px solid #f3c2bb;
}
.presa-latex-anteprima-frame {
    flex: 1 1 auto;
    width: 100%;
    border: 0;
    background: #e9ecef;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 1rem;
}
/* Renderizzata via PDF.js su <canvas> (non piu' un <iframe> col
   visualizzatore nativo del browser: su Safari ignorava del tutto i
   parametri di zoom/posizione nell'URL, restando sempre centrato invece di
   ancorato in alto): ogni pagina e' un canvas impilato normalmente nel
   flusso del documento, quindi parte sempre dall'alto del contenitore. */
.presa-latex-anteprima-frame canvas {
    display: block;
    width: 100%;
    height: auto;
    margin: 0 auto 1rem;
    background: #fff;
    box-shadow: 0 .1rem .4rem rgba(26, 48, 60, .18);
}
.presa-latex-anteprima-frame canvas:last-child { margin-bottom: 0; }

@media (max-width: 991.98px) {
    .presa-latex-editor { flex-direction: column; }
    .presa-latex-editor-sorgente { width: 100% !important; }
    .presa-latex-editor-divisore { display: none; }
    .presa-latex-codemirror { min-height: 18rem; }
    .presa-latex-anteprima-frame { min-height: 24rem; }
}