/*
 * CurriculumSmart — stile.css
 *
 * Foglio di stile unico condiviso da tutte le pagine della piattaforma
 * (landing, login, registrazione, dashboard, editor CV, admin, CV pubblico).
 * Scritto a mano, nessuna dipendenza esterna: caricamento più veloce e
 * nessun rischio legato a CDN lenti o irraggiungibili, in linea con la
 * scelta di stack "PHP nativo, niente framework pesanti" del progetto.
 *
 * Approccio mobile-first: gli stili di base sono pensati per schermi
 * piccoli, le media query (in fondo al file) aggiungono spazio e layout
 * più ampi per schermi più grandi — mai il contrario.
 *
 * Stile scelto: professionale/corporate (blu navy, sobrio), adatto a un
 * pubblico di recruiter, HR e aziende.
 */

/* ------------------------------------------------------------
   Variabili di design — un solo punto da cui regolare colori,
   spaziature e raggi in tutta la piattaforma.
   ------------------------------------------------------------ */
:root {
    /* Colori principali */
    --colore-primario: #1a3a5c;
    --colore-primario-scuro: #0f2540;
    --colore-primario-chiaro: #eaf2f6;
    --colore-accento: #2d7a9e;
    --colore-accento-chiaro: #eaf2f6;

    /* Colori di stato */
    --colore-successo: #2d7a4f;
    --colore-successo-sfondo: #e3f3e8;
    --colore-errore: #b3432e;
    --colore-errore-sfondo: #fbe9e6;

    /* Superfici e testo */
    --colore-sfondo: #f4f6f8;
    --colore-superficie: #ffffff;
    --colore-testo: #1e2a35;
    --colore-testo-secondario: #5a6b7a;
    --colore-testo-chiaro: #8b98a3;
    --colore-bordo: #d8dfe5;
    --colore-bordo-chiaro: #eef1f4;

    /* Tipografia */
    --font-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

    /* Forma */
    --raggio: 6px;
    --raggio-grande: 10px;
    --ombra-scheda: 0 1px 3px rgba(0, 0, 0, 0.06);
    --ombra-scheda-hover: 0 4px 12px rgba(0, 0, 0, 0.08);

    /* Larghezza massima del contenuto sulle pagine "documento"
       (dashboard, editor, admin) — le pagine "scheda" (login,
       registrati) restano più strette, vedi .scheda-auth */
    --larghezza-contenuto: 900px;
}

/* ------------------------------------------------------------
   Reset di base e impostazioni globali
   ------------------------------------------------------------ */
* {
    box-sizing: border-box;
}

html {
    /* Evita che iOS ingrandisca automaticamente il testo quando
       l'utente ruota lo schermo in orizzontale. */
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    font-family: var(--font-base);
    background: var(--colore-sfondo);
    color: var(--colore-testo);
    font-size: 16px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
    font-weight: 700;
    letter-spacing: -0.3px;
    margin: 0 0 8px;
    color: var(--colore-testo);
}

h1 { font-size: 24px; }
h2 { font-size: 19px; margin-top: 32px; }
h3 { font-size: 16px; }

p {
    margin: 0 0 12px;
    color: var(--colore-testo-secondario);
}

a {
    color: var(--colore-accento);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

/* ------------------------------------------------------------
   Header di navigazione — usato sulle pagine pubbliche
   (landing, login, registrati, CV pubblico)
   ------------------------------------------------------------ */
.intestazione-pubblica {
    background: var(--colore-superficie);
    border-bottom: 1px solid var(--colore-bordo-chiaro);
    padding: 16px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.logo-piattaforma {
    display: inline-flex;
    align-items: center;
    gap: 0;
    font-size: 23px;
    font-weight: 700;
    color: var(--colore-primario);
    letter-spacing: -0.3px;
}

.logo-piattaforma-icona {
    height: 28px;
    width: auto;
    display: block;
}

.logo-piattaforma span {
    color: var(--colore-accento);
}

/* ------------------------------------------------------------
   Schede di autenticazione (login, registrati) — layout
   centrato, larghezza contenuta, pensato per form brevi.
   ------------------------------------------------------------ */
.pagina-auth {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 60vh; /* centra verticalmente il form senza spingere il footer fuori dallo schermo */
    padding: 24px 16px;
}

.scheda-auth {
    background: var(--colore-superficie);
    border: 1px solid var(--colore-bordo);
    border-radius: var(--raggio-grande);
    padding: 28px 24px;
    width: 100%;
    max-width: 400px;
    box-shadow: var(--ombra-scheda);
}

.scheda-auth h1 {
    font-size: 22px;
}

.scheda-auth .sottotitolo {
    color: var(--colore-testo-secondario);
    font-size: 14px;
    margin-bottom: 24px;
}

.badge-etichetta {
    display: inline-block;
    background: var(--colore-primario-chiaro);
    color: var(--colore-accento);
    font-size: 11px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 4px;
    margin-bottom: 14px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

/* ------------------------------------------------------------
   Form — campi, etichette, pulsanti, usati ovunque
   ------------------------------------------------------------ */
label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--colore-testo);
    margin-bottom: 6px;
    margin-top: 16px;
}

label:first-child {
    margin-top: 0;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="date"],
input[type="file"],
select,
textarea {
    width: 100%;
    padding: 11px 12px;
    border: 1px solid var(--colore-bordo);
    border-radius: var(--raggio);
    font-size: 15px;
    font-family: var(--font-base);
    background: var(--colore-superficie);
    color: var(--colore-testo);
    transition: border-color 0.15s, box-shadow 0.15s;
}

textarea {
    resize: vertical;
    min-height: 90px;
}

input:focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: var(--colore-accento);
    box-shadow: 0 0 0 3px rgba(45, 122, 158, 0.12);
}

input::placeholder,
textarea::placeholder {
    color: var(--colore-testo-chiaro);
}

.testo-aiuto {
    font-size: 13px;
    color: var(--colore-testo-chiaro);
    margin-top: 4px;
}

/* Contenitore aggiunto automaticamente da password-toggle.js intorno
   a ogni campo password, per posizionare l'icona occhio in overlay
   senza alterare il layout del form. */
.campo-password-contenitore {
    position: relative;
}

.campo-password-contenitore input[type="password"],
.campo-password-contenitore input[type="text"] {
    padding-right: 42px;
}

.campo-password-toggle {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    width: 34px;
    height: 34px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: var(--colore-testo-chiaro);
    cursor: pointer;
    border-radius: var(--raggio);
}

.campo-password-toggle:hover {
    color: var(--colore-testo-secondario);
    background: var(--colore-primario-chiaro);
}

/* Pulsanti */
button,
.pulsante {
    font-family: var(--font-base);
    font-size: 15px;
    font-weight: 600;
    padding: 12px 20px;
    border-radius: var(--raggio);
    cursor: pointer;
    border: none;
    display: inline-block;
    text-align: center;
    transition: background 0.15s, opacity 0.15s;
}

.pulsante-primario,
button[type="submit"] {
    background: var(--colore-primario);
    color: #fff;
    width: 100%;
}

.pulsante-primario:hover,
button[type="submit"]:hover {
    background: var(--colore-primario-scuro);
}

button.pulsante-secondario,
.pulsante-secondario {
    background: var(--colore-superficie);
    color: var(--colore-primario);
    border: 1px solid var(--colore-bordo);
}

button.pulsante-secondario:hover,
.pulsante-secondario:hover {
    background: var(--colore-primario-chiaro);
}

.pulsante-piccolo {
    padding: 7px 12px;
    font-size: 13px;
    width: auto;
}

button.pulsante-pericolo,
.pulsante-pericolo {
    background: var(--colore-errore);
    color: #fff;
}

button.pulsante-pericolo:hover,
.pulsante-pericolo:hover {
    opacity: 0.88;
}

button.pulsante-successo,
.pulsante-successo {
    background: var(--colore-successo);
    color: #fff;
}

button.pulsante-successo:hover,
.pulsante-successo:hover {
    opacity: 0.88;
}

.link-secondario {
    text-align: center;
    margin-top: 18px;
    font-size: 14px;
    color: var(--colore-testo-secondario);
}

.link-secondario a {
    font-weight: 600;
}

/* Checkbox con etichetta affiancata (es. privacy) */
.riga-checkbox {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 16px;
}

.riga-checkbox input[type="checkbox"] {
    width: auto;
    margin-top: 3px;
    flex-shrink: 0;
}

.riga-checkbox label {
    margin: 0;
    font-weight: 400;
    font-size: 14px;
    color: var(--colore-testo-secondario);
}

/* ------------------------------------------------------------
   Messaggi di stato (errore, successo) — usati nei form
   e nel salvataggio AJAX dell'editor
   ------------------------------------------------------------ */
.messaggio-stato {
    padding: 10px 14px;
    border-radius: var(--raggio);
    font-size: 14px;
    margin-bottom: 16px;
    display: none;
}

.messaggio-stato.ok {
    background: var(--colore-successo-sfondo);
    color: var(--colore-successo);
    display: block;
}

.messaggio-stato.errore {
    background: var(--colore-errore-sfondo);
    color: var(--colore-errore);
    display: block;
}

/* ------------------------------------------------------------
   Layout pagine "documento" (dashboard, editor CV, admin):
   menu laterale + contenuto. Su mobile il menu si impila sopra
   il contenuto invece di stare a fianco (vedi media query).
   ------------------------------------------------------------ */
.layout-app {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.menu-laterale {
    background: var(--colore-superficie);
    border-bottom: 1px solid var(--colore-bordo-chiaro);
    padding: 16px 20px;
}

.menu-laterale .logo-piattaforma {
    margin-bottom: 16px;
}

.menu-laterale nav a {
    display: block;
    padding: 10px 12px;
    border-radius: var(--raggio);
    color: var(--colore-testo-secondario);
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 2px;
}

.menu-laterale nav a:hover {
    background: var(--colore-primario-chiaro);
    text-decoration: none;
}

.menu-laterale nav a.attiva {
    background: var(--colore-primario-chiaro);
    color: var(--colore-primario);
}

.menu-laterale nav a.esci {
    margin-top: 16px;
    color: var(--colore-errore);
}

.contenuto-app {
    flex: 1;
    padding: 20px 16px 60px;
    max-width: var(--larghezza-contenuto);
    width: 100%;
    margin: 0 auto;
}

/* ------------------------------------------------------------
   Righe repeater (esperienze, formazione, competenze...)
   usate nell'editor CV
   ------------------------------------------------------------ */
.riga-repeater {
    background: var(--colore-superficie);
    border: 1px solid var(--colore-bordo);
    border-radius: var(--raggio-grande);
    padding: 16px;
    margin-bottom: 12px;
    position: relative;
}

.riga-repeater .rimuovi-riga {
    position: absolute;
    top: 12px;
    right: 12px;
    background: var(--colore-errore-sfondo);
    color: var(--colore-errore);
    border: none;
    border-radius: var(--raggio);
    padding: 5px 10px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    width: auto;
}

.pulsante-aggiungi {
    background: var(--colore-superficie);
    color: var(--colore-primario);
    border: 1px dashed var(--colore-bordo);
    padding: 10px 16px;
    border-radius: var(--raggio);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    width: 100%;
    margin-bottom: 16px;
}

.pulsante-aggiungi:hover {
    background: var(--colore-primario-chiaro);
    border-color: var(--colore-accento);
}

/* ------------------------------------------------------------
   Blocchi collassabili (esperienze, formazione, esperienze
   sintetiche): stato "chiuso" con riepilogo + maniglia di
   trascinamento, stato "aperto" con il form di modifica.
   ------------------------------------------------------------ */
.blocco-elemento {
    background: var(--colore-superficie);
    border: 1px solid var(--colore-bordo);
    border-radius: var(--raggio-grande);
    margin-bottom: 12px;
    overflow: hidden;
}

.blocco-elemento.in-trascinamento {
    opacity: 0.4;
}

.blocco-elemento.zona-rilascio {
    border-color: var(--colore-accento);
    box-shadow: 0 0 0 2px rgba(45, 122, 158, 0.15);
}

/* Riepilogo (stato chiuso) */
.blocco-riepilogo {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
}

.blocco-maniglia {
    cursor: grab;
    color: var(--colore-testo-chiaro);
    font-size: 18px;
    line-height: 1;
    padding: 4px;
    flex-shrink: 0;
    touch-action: none; /* evita che il trascinamento scrolli la pagina su mobile */
    user-select: none;
}

.blocco-maniglia:active {
    cursor: grabbing;
}

.blocco-info {
    flex: 1;
    min-width: 0; /* permette al testo di andare in ellissi invece di spingere il layout */
}

.blocco-titolo {
    font-weight: 700;
    font-size: 15px;
    color: var(--colore-testo);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.blocco-sottotitolo {
    font-size: 13px;
    color: var(--colore-testo-secondario);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.blocco-azioni {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}

/* Corpo (stato aperto: il form) — nascosto finché il blocco non
   viene aperto in modifica */
.blocco-corpo {
    display: none;
    padding: 0 16px 16px;
    border-top: 1px solid var(--colore-bordo-chiaro);
}

.blocco-corpo.aperto {
    display: block;
    padding-top: 16px;
}

/* ------------------------------------------------------------
   Card generiche (usate in dashboard, admin, elenco sezioni)
   ------------------------------------------------------------ */
.scheda {
    background: var(--colore-superficie);
    border: 1px solid var(--colore-bordo);
    border-radius: var(--raggio-grande);
    padding: 20px;
    margin-bottom: 16px;
}

/* ------------------------------------------------------------
   Box "Il tuo CV pubblico" in dashboard — il link da condividere è
   il cuore del prodotto, quindi ha una presentazione più marcata di
   una semplice card, con azioni rapide copia/condividi sempre a
   portata di tocco.
   ------------------------------------------------------------ */
.scheda-link-cv {
    background: var(--colore-primario-chiaro);
    border: 1px solid var(--colore-accento);
    border-radius: var(--raggio-grande);
    padding: 18px 20px;
    margin-bottom: 16px;
}

.scheda-link-cv-etichetta {
    font-size: 13px;
    font-weight: 700;
    color: var(--colore-primario);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin-bottom: 10px;
}

.scheda-link-cv-riga {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.scheda-link-cv-url {
    font-size: 15px;
    font-weight: 600;
    word-break: break-all;
    color: var(--colore-primario);
}

.scheda-link-cv-azioni {
    display: flex;
    gap: 8px;
}

.scheda-link-cv-pulsante {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    background: #ffffff;
    border: 1px solid var(--colore-accento);
    color: var(--colore-primario);
    border-radius: var(--raggio);
    padding: 10px 14px;
    font-size: 14px;
    font-weight: 600;
    font-family: var(--font-base);
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.scheda-link-cv-pulsante:hover {
    background: var(--colore-accento);
    color: #ffffff;
}

.scheda-link-cv-pulsante.scheda-link-cv-pulsante-ok {
    background: var(--colore-successo);
    border-color: var(--colore-successo);
    color: #ffffff;
}

.griglia-schede {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}

/* ------------------------------------------------------------
   Pagina "Aspetto" — scelta del template grafico (card radio) e
   della palette colori (pallini radio).
   ------------------------------------------------------------ */
.griglia-template-scelta {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    margin-bottom: 16px;
}

.scheda-template-scelta {
    display: block;
    position: relative;
    background: var(--colore-superficie);
    border: 2px solid var(--colore-bordo);
    border-radius: var(--raggio-grande);
    padding: 16px 18px;
    cursor: pointer;
    transition: border-color 0.15s;
}

.scheda-template-scelta input[type="radio"] {
    position: absolute;
    top: 16px;
    right: 16px;
    width: auto;
}

.scheda-template-scelta.selezionata {
    border-color: var(--colore-accento);
    background: var(--colore-primario-chiaro);
}

.scheda-template-scelta:not(.bloccata):not(.selezionata):hover {
    border-color: var(--colore-accento);
    background: var(--colore-primario-chiaro);
}

.scheda-template-scelta.bloccata {
    opacity: 0.6;
    cursor: not-allowed;
}

.scheda-template-nome {
    font-size: 15px;
    font-weight: 700;
    color: var(--colore-testo);
    margin-bottom: 4px;
    padding-right: 28px;
}

.scheda-template-descrizione {
    font-size: 13px;
    color: var(--colore-testo-secondario);
    margin: 0;
}

.griglia-palette-scelta {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin: 12px 0 8px;
}

.pallino-palette-scelta {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    width: 76px;
    text-align: center;
}

.pallino-palette-scelta input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.pallino-palette-cerchio {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--pallino-colore);
    border: 3px solid transparent;
    box-shadow: 0 0 0 1px var(--colore-bordo);
    transition: box-shadow 0.15s, border-color 0.15s, transform 0.15s;
}

.pallino-palette-scelta:not(.selezionata):hover .pallino-palette-cerchio {
    box-shadow: 0 0 0 1px var(--colore-accento);
    transform: scale(1.1);
}

.pallino-palette-scelta.selezionata .pallino-palette-cerchio {
    border-color: #ffffff;
    box-shadow: 0 0 0 2px var(--pallino-colore);
}

.pallino-palette-etichetta {
    font-size: 11px;
    color: var(--colore-testo-secondario);
    line-height: 1.3;
}

.scheda-link {
    display: block;
    background: var(--colore-superficie);
    border: 1px solid var(--colore-bordo);
    border-radius: var(--raggio-grande);
    padding: 18px;
    color: var(--colore-testo);
    transition: box-shadow 0.15s, border-color 0.15s;
}

.scheda-link:hover {
    box-shadow: var(--ombra-scheda-hover);
    border-color: var(--colore-accento);
    text-decoration: none;
}

.scheda-link .titolo-scheda {
    font-weight: 700;
    font-size: 15px;
    margin-bottom: 4px;
    color: var(--colore-primario);
}

.scheda-link .descrizione-scheda {
    font-size: 13px;
    color: var(--colore-testo-secondario);
    margin: 0;
}

/* Avatar circolare per foto profilo */
.avatar-anteprima {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid var(--colore-bordo);
}

/* ------------------------------------------------------------
   Utility generiche
   ------------------------------------------------------------ */
.testo-centrato { text-align: center; }
.margine-sopra-grande { margin-top: 32px; }
.margine-sotto-zero { margin-bottom: 0; }

/* ------------------------------------------------------------
   Landing page — sezioni di vendita pubbliche (hero, come funziona,
   privacy, prezzi). Sezioni a piena larghezza con contenuto centrato
   e larghezza massima leggibile, alternando sfondo per separarle
   visivamente senza bisogno di bordi.
   ------------------------------------------------------------ */
.landing-sezione {
    padding: 56px 20px;
}

.landing-sezione.sfondo-alternato {
    background: var(--colore-superficie);
}

.landing-contenitore {
    max-width: 880px;
    margin: 0 auto;
}

.landing-contenitore-stretto {
    max-width: 640px;
    margin: 0 auto;
}

.landing-hero {
    text-align: center;
    padding: 48px 20px 40px;
}

.landing-hero h1 {
    font-size: 30px;
    line-height: 1.25;
    margin-bottom: 16px;
}

.landing-hero .landing-sottotitolo {
    font-size: 17px;
    color: var(--colore-testo-secondario);
    margin-bottom: 28px;
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
}

.landing-titolo-sezione {
    font-size: 24px;
    text-align: center;
    margin-bottom: 12px;
}

.landing-sottotitolo-sezione {
    font-size: 16px;
    color: var(--colore-testo-secondario);
    text-align: center;
    max-width: 560px;
    margin: 0 auto 40px;
}

/* Blocco con illustrazione a fianco del testo (sezione "il problema").
   Mobile-first: impilati (immagine sopra, testo sotto); da tablet in su
   diventano due colonne affiancate, immagine a sinistra. */
.landing-blocco-illustrato {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 28px;
}

.landing-illustrazione {
    width: 100%;
    max-width: 420px;
    height: auto;
    display: block;
}

.landing-blocco-illustrato-testo {
    text-align: center;
}

/* Varianti allineate a sinistra per titolo/sottotitolo dentro il
   blocco illustrato — le versioni base restano centrate per le altre
   sezioni della landing che non hanno un'immagine a fianco. */
.landing-titolo-sezione-sx {
    text-align: center;
}

.landing-sottotitolo-sezione-sx {
    text-align: center;
    margin-left: 0;
    margin-right: 0;
    max-width: none;
}

/* Varianti per l'hero quando affiancato all'illustrazione (stesso
   pattern mobile-centrato / desktop-a-sinistra delle altre sezioni) */
.landing-hero-titolo-sx {
    font-size: 26px;
    line-height: 1.25;
    margin-bottom: 16px;
    text-align: center;
}

.landing-sottotitolo-sx {
    font-size: 17px;
    color: var(--colore-testo-secondario);
    margin-bottom: 24px;
    text-align: center;
}

.landing-cta-hero {
    max-width: 280px;
    margin: 0 auto;
    display: block;
}

/* Passaggi "come funziona" */
.landing-passaggi {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
}

.landing-passaggio {
    text-align: center;
}

.landing-passaggio-numero {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--colore-primario);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 16px;
    margin: 0 auto 14px;
}

.landing-passaggio h3 {
    font-size: 17px;
    margin-bottom: 6px;
}

.landing-passaggio p {
    font-size: 14px;
    margin: 0;
}

/* Blocco privacy/OTP, con icona e testo affiancati su desktop */
.landing-privacy-blocco {
    display: flex;
    flex-direction: column;
    gap: 24px;
    align-items: center;
}

.landing-privacy-icona {
    font-size: 48px;
    line-height: 1;
}

.landing-privacy-testo {
    text-align: center;
}

.landing-privacy-testo h2 {
    font-size: 22px;
    margin-bottom: 10px;
}

.landing-lista-punti {
    list-style: none;
    padding: 0;
    margin: 20px 0 0;
    text-align: left;
    max-width: 460px;
    margin-left: auto;
    margin-right: auto;
}

.landing-lista-punti li {
    padding: 8px 0 8px 28px;
    position: relative;
    font-size: 15px;
    color: var(--colore-testo-secondario);
}

.landing-lista-punti li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--colore-successo);
    font-weight: 700;
}

/* Prezzi */
.landing-piani {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    max-width: 680px;
    margin: 0 auto;
}

.landing-piano {
    background: var(--colore-superficie);
    border: 1px solid var(--colore-bordo);
    border-radius: var(--raggio-grande);
    padding: 28px 24px;
    text-align: center;
}

.landing-piano.in-evidenza {
    border-color: var(--colore-accento);
    box-shadow: 0 4px 16px rgba(45, 122, 158, 0.12);
    position: relative;
}

.landing-piano-badge {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--colore-accento);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 4px 12px;
    border-radius: 20px;
}

.landing-piano-nome {
    font-size: 15px;
    font-weight: 700;
    color: var(--colore-testo-secondario);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin-bottom: 8px;
}

.landing-piano-prezzo {
    font-size: 36px;
    font-weight: 800;
    color: var(--colore-testo);
    margin-bottom: 4px;
}

.landing-piano-prezzo span {
    font-size: 15px;
    font-weight: 500;
    color: var(--colore-testo-chiaro);
}

.landing-piano-nota {
    font-size: 13px;
    color: var(--colore-testo-chiaro);
    margin-bottom: 20px;
}

.landing-piano ul {
    list-style: none;
    padding: 0;
    margin: 0 0 24px;
    text-align: left;
}

.landing-piano ul li {
    padding: 6px 0 6px 24px;
    position: relative;
    font-size: 14px;
    color: var(--colore-testo-secondario);
}

.landing-piano ul li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--colore-successo);
    font-weight: 700;
}

.landing-cta-finale {
    background: var(--colore-primario);
    padding: 56px 20px 64px;
    text-align: center;
}

.landing-cta-finale h2 {
    font-size: 26px;
    color: #ffffff;
    margin-bottom: 24px;
}

.landing-cta-finale-pulsante {
    background: #ffffff;
    color: var(--colore-primario);
    max-width: 280px;
    margin: 0 auto;
    display: block;
}

.landing-cta-finale-pulsante:hover {
    background: #f0f4f7;
}

/* ------------------------------------------------------------
   Pagine legali (Privacy Policy, Termini di utilizzo) — testo
   scorrevole, larghezza contenuta per la leggibilità, tabelle
   responsive per il riepilogo dei trattamenti dati.
   ------------------------------------------------------------ */
.pagina-legale {
    max-width: 720px;
    margin: 0 auto;
    padding: 32px 20px 60px;
}

.pagina-legale h1 {
    font-size: 26px;
    margin-bottom: 4px;
}

.pagina-legale h2 {
    font-size: 18px;
    margin-top: 32px;
    margin-bottom: 10px;
    color: var(--colore-primario);
}

.pagina-legale p,
.pagina-legale li {
    font-size: 15px;
    line-height: 1.6;
    color: var(--colore-testo-secondario);
}

.pagina-legale ul {
    padding-left: 20px;
    margin: 10px 0;
}

.pagina-legale li {
    margin-bottom: 6px;
}

.pagina-legale a {
    color: var(--colore-accento);
}

/* Tabelle di riepilogo trattamenti — su mobile scorrono in
   orizzontale invece di schiacciarsi, dato che il contenuto
   (specialmente la colonna "Finalità") non si presta a interruzioni
   di riga aggressive senza perdere leggibilità. */
.tabella-legale-contenitore {
    overflow-x: auto;
    margin: 16px 0;
}

.tabella-legale {
    width: 100%;
    min-width: 640px;
    border-collapse: collapse;
    font-size: 13px;
}

.tabella-legale th,
.tabella-legale td {
    border: 1px solid var(--colore-bordo);
    padding: 10px 12px;
    text-align: left;
    vertical-align: top;
}

.tabella-legale th {
    background: var(--colore-primario-chiaro);
    color: var(--colore-primario);
    font-weight: 700;
}

.tabella-legale td {
    color: var(--colore-testo-secondario);
}

/* ------------------------------------------------------------
   Footer — presente su tutte le pagine pubbliche (landing, CV
   pubblico, login/registrati tramite Layout::apriPaginaPubblica).
   Mobile-first: colonna centrata, poi riga su desktop.
   ------------------------------------------------------------ */
.footer-pubblico {
    background: var(--colore-primario-scuro);
    color: #c7d3dc;
    padding: 32px 20px;
}

.footer-contenitore {
    max-width: 880px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    text-align: center;
}

.footer-copyright {
    font-size: 13px;
    color: #9db0bd;
}

.footer-link-elenco {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
    font-size: 13px;
}

.footer-link-elenco a {
    color: #c7d3dc;
    margin: 0 8px;
}

.footer-link-elenco a:hover {
    color: #ffffff;
}

.footer-social-elenco {
    display: flex;
    gap: 12px;
}

.footer-social-icona {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 15px;
    transition: background 0.15s;
}

.footer-social-icona:hover {
    background: rgba(255, 255, 255, 0.2);
    text-decoration: none;
}


.cv-pubblico {
    max-width: 720px;
    margin: 0 auto;
    padding: 32px 20px 60px;
}

.cv-intestazione {
    text-align: center;
    margin-bottom: 32px;
}

.cv-foto-profilo {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--colore-superficie);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
    cursor: pointer;
    margin-bottom: 16px;
    transition: transform 0.15s;
}

.cv-foto-profilo:hover {
    transform: scale(1.03);
}

.cv-foto-segnaposto {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: var(--colore-primario-chiaro);
    color: var(--colore-primario);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 40px;
    font-weight: 700;
    margin: 0 auto 16px;
}

.cv-nome {
    font-size: 26px;
    font-weight: 800;
    margin-bottom: 4px;
    letter-spacing: -0.5px;
}

.cv-headline {
    font-size: 16px;
    color: var(--colore-accento);
    font-weight: 600;
    margin-bottom: 6px;
}

.cv-localita {
    font-size: 14px;
    color: var(--colore-testo-secondario);
}

.cv-sezione {
    margin-bottom: 32px;
}

.cv-sezione-titolo {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--colore-testo-chiaro);
    border-bottom: 2px solid var(--colore-bordo-chiaro);
    padding-bottom: 8px;
    margin-bottom: 18px;
}

.cv-profilo-testo {
    font-size: 15px;
    line-height: 1.6;
    color: var(--colore-testo);
    white-space: pre-line;
}

/* Contatti — mostrati solo dopo sblocco OTP */
.cv-contatti {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.cv-contatto-riga {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
}

.cv-contatto-riga a {
    font-weight: 600;
}

/* Voci esperienza/formazione */
.cv-voce {
    margin-bottom: 22px;
    padding-left: 16px;
    border-left: 2px solid var(--colore-bordo-chiaro);
}

.cv-voce:last-child {
    margin-bottom: 0;
}

.cv-voce-titolo {
    font-size: 16px;
    font-weight: 700;
    color: var(--colore-testo);
}

.cv-voce-sottotitolo {
    font-size: 14px;
    color: var(--colore-accento);
    font-weight: 600;
    margin-bottom: 2px;
}

.cv-voce-periodo {
    font-size: 13px;
    color: var(--colore-testo-chiaro);
    margin-bottom: 8px;
}

.cv-voce-descrizione {
    font-size: 14px;
    line-height: 1.6;
    color: var(--colore-testo-secondario);
    white-space: pre-line;
}

/* Esperienze sintetiche — riga compatta, non la timeline con bordo */
.cv-voce-sintetica {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--colore-bordo-chiaro);
    font-size: 14px;
}

.cv-voce-sintetica:last-child {
    border-bottom: none;
}

.cv-voce-sintetica .cv-voce-sintetica-nome {
    font-weight: 600;
    color: var(--colore-testo);
}

.cv-voce-sintetica .cv-voce-sintetica-periodo {
    color: var(--colore-testo-chiaro);
    white-space: nowrap;
}

/* Certificazioni */
.cv-certificazione {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    background: var(--colore-superficie);
    border: 1px solid var(--colore-bordo);
    border-radius: var(--raggio);
    padding: 12px 16px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}

.cv-certificazione a {
    font-weight: 600;
}

.cv-badge-scadenza-piccolo {
    font-size: 11px;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: 4px;
    white-space: nowrap;
}

.cv-badge-scadenza-piccolo.valida { background: var(--colore-successo-sfondo); color: var(--colore-successo); }
.cv-badge-scadenza-piccolo.in_scadenza { background: #fdf1d6; color: #8a6412; }
.cv-badge-scadenza-piccolo.scaduta { background: var(--colore-errore-sfondo); color: var(--colore-errore); }

/* Competenze e interessi — badge tondeggianti */
.cv-badge-elenco {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.cv-badge {
    display: inline-block;
    background: var(--colore-primario-chiaro);
    color: var(--colore-primario);
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 600;
}

/* Lingue */
.cv-lingua-riga {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid var(--colore-bordo-chiaro);
}

.cv-lingua-riga:last-child {
    border-bottom: none;
}

.cv-lingua-nome {
    font-size: 15px;
    font-weight: 600;
}

.cv-lingua-livello {
    font-size: 13px;
    color: var(--colore-testo-secondario);
}

.cv-lingua-dettaglio {
    font-size: 12px;
    color: var(--colore-testo-chiaro);
    margin-top: 2px;
}

/* Piè di pagina del CV: data ultimo aggiornamento e dicitura privacy,
   sempre in fondo, testo discreto per non competere visivamente con
   il contenuto del curriculum. */
.cv-piede-pagina {
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px solid var(--colore-bordo-chiaro);
    text-align: center;
}

.cv-data-aggiornamento {
    font-size: 12px;
    color: var(--colore-testo-chiaro);
    margin: 0 0 6px;
}

.cv-dicitura-privacy {
    font-size: 11px;
    color: var(--colore-testo-chiaro);
    margin: 0;
    line-height: 1.5;
}

/* ------------------------------------------------------------
   Template "Header colorato" — fascia scura in alto (colore da
   variabili CSS impostate inline in base alla palette scelta),
   corpo bianco sotto. Le variabili --cv-tema-* sono definite nel
   blocco <style> generato da TemplateHeaderRenderer.
   ------------------------------------------------------------ */
.cv-header-fascia {
    background: var(--cv-tema-scuro);
    padding: 32px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    text-align: center;
}

.cv-header-foto {
    width: 84px;
    height: 84px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid rgba(255, 255, 255, 0.25);
    cursor: zoom-in;
}

.cv-header-foto-segnaposto {
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.15);
    color: #ffffff;
    font-size: 30px;
    font-weight: 700;
    cursor: default;
}

.cv-header-testo {
    color: #ffffff;
}

.cv-header-nome {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 4px;
}

.cv-header-sottotitolo {
    font-size: 15px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: 4px;
}

.cv-header-localita {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.65);
}

.cv-header-corpo {
    background: var(--colore-superficie);
    padding: 28px 20px 40px;
}

/* Titoli di sezione e badge colorati secondo la palette — usati sia
   dal template Header sia dal template Sidebar, dato che condividono
   lo stesso meccanismo di variabili --cv-tema-*. */
.cv-titolo-tema {
    font-size: 13px;
    font-weight: 700;
    color: var(--cv-tema-scuro);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--cv-tema-accento-chiaro);
}

.cv-voce-sottotitolo-tema {
    font-size: 14px;
    font-weight: 600;
    color: var(--cv-tema-accento-testo);
    margin-bottom: 2px;
}

.cv-badge-tema {
    display: inline-block;
    background: var(--cv-tema-accento-chiaro);
    color: var(--cv-tema-accento-testo);
    font-size: 13px;
    font-weight: 600;
    padding: 5px 12px;
    border-radius: 14px;
    margin: 0 6px 6px 0;
}

/* ------------------------------------------------------------
   Template "Sidebar" — colonna laterale scura + colonna principale
   bianca. Mobile-first: le due colonne si impilano su schermi
   stretti (sidebar sopra, corpo sotto), si affiancano da tablet.
   ------------------------------------------------------------ */
.cv-pubblico-larga {
    max-width: 900px;
}

.cv-sidebar-layout {
    display: flex;
    flex-direction: column;
}

.cv-sidebar-colonna {
    background: var(--cv-tema-scuro);
    color: #ffffff;
    padding: 32px 24px;
    text-align: center;
}

.cv-sidebar-foto {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid rgba(255, 255, 255, 0.25);
    margin: 0 auto 16px;
    display: block;
    cursor: zoom-in;
}

.cv-sidebar-foto-segnaposto {
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.15);
    font-size: 34px;
    font-weight: 700;
    cursor: default;
}

.cv-sidebar-nome {
    font-size: 19px;
    font-weight: 700;
    margin-bottom: 4px;
}

.cv-sidebar-headline {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 4px;
}

.cv-sidebar-blocco {
    margin-top: 24px;
    text-align: left;
}

.cv-sidebar-titolo {
    font-size: 11px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.55);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

.cv-sidebar-riga {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 6px;
    word-break: break-word;
}

.cv-sidebar-principale {
    background: var(--colore-superficie);
    padding: 28px 24px;
}

/* Lightbox foto */
.cv-lightbox-overlay {
    display: none;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(15, 37, 64, 0.9);
    z-index: 1000;
    align-items: center;
    justify-content: center;
    padding: 20px;
    cursor: zoom-out;
}

.cv-lightbox-overlay.aperto {
    display: flex;
}

.cv-lightbox-overlay img {
    max-width: 100%;
    max-height: 90vh;
    border-radius: 8px;
}

/* ------------------------------------------------------------
   Cookie banner — fisso in basso, sopra ogni altro contenuto,
   mobile-first: testo e pulsanti impilati, poi affiancati da tablet.
   ------------------------------------------------------------ */
#cookie-banner {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2000;
    background: var(--colore-primario-scuro);
    color: #e5eaee;
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.15);
}

.cookie-banner-testo {
    font-size: 13px;
    line-height: 1.5;
    max-width: 720px;
}

.cookie-banner-testo a {
    color: #ffffff;
    text-decoration: underline;
}

.cookie-banner-azioni {
    display: flex;
    gap: 10px;
}

.cookie-banner-azioni .pulsante {
    width: auto;
    flex: 1;
    padding: 10px 18px;
    font-size: 14px;
}

.cookie-banner-rifiuta {
    background: transparent;
    color: #e5eaee;
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.cookie-banner-rifiuta:hover {
    background: rgba(255, 255, 255, 0.1);
}



/* Tablet e desktop piccoli: il layout app passa da "impilato"
   a "menu laterale fisso + contenuto affiancato" */
@media (min-width: 768px) {
    .layout-app {
        flex-direction: row;
    }

    .griglia-template-scelta {
        grid-template-columns: repeat(3, 1fr);
    }

    .cv-sidebar-layout {
        flex-direction: row;
        align-items: stretch;
    }

    .cv-sidebar-colonna {
        width: 220px;
        flex-shrink: 0;
    }

    .cv-sidebar-principale {
        flex: 1;
        padding: 32px 36px;
    }

    .scheda-link-cv-riga {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

    .scheda-link-cv-azioni {
        flex-shrink: 0;
    }

    .scheda-link-cv-pulsante {
        flex: none;
    }

    #cookie-banner {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        padding: 16px 32px;
    }

    .cookie-banner-azioni {
        flex-shrink: 0;
    }

    .cookie-banner-azioni .pulsante {
        flex: none;
    }

    .footer-contenitore {
        flex-direction: row;
        justify-content: space-between;
        text-align: left;
    }

    .footer-link-elenco {
        justify-content: flex-start;
    }

    .menu-laterale {
        width: 230px;
        flex-shrink: 0;
        border-bottom: none;
        border-right: 1px solid var(--colore-bordo-chiaro);
        min-height: 100vh;
        padding: 24px 16px;
    }

    .contenuto-app {
        padding: 32px 40px 60px;
    }

    .scheda-auth {
        padding: 36px 32px;
    }

    /* Da due colonne in su per le card della dashboard */
    .griglia-schede {
        grid-template-columns: repeat(2, 1fr);
    }

    .cv-pubblico {
        padding: 48px 20px 80px;
    }

    .cv-foto-profilo,
    .cv-foto-segnaposto {
        width: 150px;
        height: 150px;
    }

    .cv-nome {
        font-size: 32px;
    }

    .landing-hero h1 {
        font-size: 40px;
    }

    .landing-blocco-illustrato {
        flex-direction: row;
        align-items: center;
        gap: 48px;
    }

    /* Variante con immagine a destra invece che a sinistra: nel markup
       l'immagine resta prima del testo (ordine di lettura naturale su
       mobile, dove sono sempre impilati); su desktop invertiamo solo
       l'ordine VISIVO con flex row-reverse, senza toccare l'HTML. */
    .landing-blocco-illustrato-invertito {
        flex-direction: row-reverse;
    }

    .landing-illustrazione {
        max-width: 380px;
        flex-shrink: 0;
    }

    .landing-blocco-illustrato-testo {
        text-align: left;
    }

    .landing-titolo-sezione-sx,
    .landing-sottotitolo-sezione-sx {
        text-align: left;
    }

    .landing-hero-titolo-sx,
    .landing-sottotitolo-sx {
        text-align: left;
    }

    .landing-cta-hero {
        margin: 0;
    }

    .landing-passaggi {
        grid-template-columns: repeat(3, 1fr);
    }

    .landing-privacy-blocco {
        flex-direction: row;
        text-align: left;
        gap: 40px;
    }

    .landing-privacy-testo {
        text-align: left;
    }

    .landing-lista-punti {
        margin-left: 0;
    }

    .landing-piani {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Desktop più ampio: tre colonne per le card, un po' più di respiro */
@media (min-width: 1024px) {
    .griglia-schede {
        grid-template-columns: repeat(3, 1fr);
    }

    .contenuto-app {
        padding: 40px 60px 60px;
    }
}