/* ==========================================================================
   PRESTA365 - demo su richiesta (try.presta365.com)
   Stessa lingua grafica del sito: bianco e nero, viola #6E56A8, pastello
   #ECE6F6, IBM Plex Sans, raggio 2px, bottoni neri pieni e a filo.
   I token ricalcano quelli di themes/cavallini/assets/css/presta365.css.
   ========================================================================== */

:root {
    --bg: #FFFFFF;
    --whisper: #FAFAFA;
    --pastello: #ECE6F6;
    --lavanda: #D9CDEC;
    --ink: #0B0B0C;
    --dark: #0B0B0C;
    --viola-scuro: #1A1230;
    --text: #0B0B0C;
    --dim: #4D4D4D;
    --line: rgba(0, 0, 0, .14);
    --viola: #6E56A8;
    --viola-chiaro: #C9B6E4;
    --on-dark: #FFFFFF;
    --on-dark-dim: #D0D0D0;
    --on-dark-line: rgba(255, 255, 255, .18);
    --errore: #C41A1A;
    --errore-fondo: #FDF1F1;
    --font: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    --radius: 2px;
    --gutter: clamp(18px, 4vw, 64px);
    --max: 1280px;
    --s1: 8px;
    --s2: 16px;
    --s3: 24px;
    --s4: 40px;
    --s5: 64px;
    --pad: clamp(28px, 3.5vw, 48px);
    --bridge: 56px;
    color-scheme: light;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font);
    font-size: 16px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

main { flex: 1 0 auto; }
.g-foot { margin-top: auto; }

h1, h2, h3 {
    font-weight: 600;
    letter-spacing: -.025em;
    line-height: 1.1;
    margin: 0;
    text-wrap: balance;
}

p { margin: 0 0 var(--s2); }
ul { margin: 0; padding: 0; list-style: none; }
a { color: var(--ink); }
strong { font-weight: 600; }

code {
    font-family: ui-monospace, 'SF Mono', 'Cascadia Mono', Menlo, Consolas, monospace;
    font-size: .94em;
}

:focus-visible {
    outline: 2px solid var(--viola);
    outline-offset: 2px;
    border-radius: var(--radius);
}

.g-skip {
    position: absolute;
    left: -9999px;
    top: 0;
    background: var(--ink);
    color: #fff;
    padding: 10px 16px;
    z-index: 20;
    text-decoration: none;
}
.g-skip:focus { left: var(--s2); top: var(--s2); }

.g-in {
    max-width: var(--max);
    margin: 0 auto;
    padding-inline: var(--gutter);
}

/* ---- Testata ------------------------------------------------------------ */
.g-head { background: var(--bg); border-bottom: 1px solid var(--ink); }
.g-head__in {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s2) var(--s3);
    padding-block: 14px;
    flex-wrap: wrap;
}
.g-brand { display: flex; align-items: center; gap: var(--s2); min-width: 0; }
.g-brand a { display: block; line-height: 0; }
.g-brand img { height: 30px; width: auto; display: block; }
.g-brand__claim {
    font-size: 12.5px;
    color: var(--dim);
    padding-left: var(--s2);
    border-left: 1px solid var(--line);
    line-height: 1.3;
}

.p365-langs {
    display: inline-flex;
    border: 1px solid var(--ink);
    border-radius: var(--radius);
    overflow: hidden;
    flex: none;
}
.p365-langs a {
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: .02em;
    padding: 6px 11px;
    border-right: 1px solid var(--ink);
    line-height: 1.3;
    text-decoration: none;
    color: var(--ink);
    background: var(--bg);
}
.p365-langs a:last-child { border-right: 0; }
.p365-langs a.is-on { background: var(--ink); color: #fff; }
.p365-langs a:not(.is-on):hover { background: var(--pastello); }

/* ---- Fascia di apertura -------------------------------------------------- */
.g-hero {
    background: linear-gradient(200deg, var(--dark) 45%, var(--viola-scuro) 100%);
    color: var(--on-dark);
    padding-top: var(--pad);
    padding-bottom: calc(var(--bridge) + var(--s4));
}
.g-hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(280px, 1fr);
    gap: clamp(24px, 4vw, 72px);
    align-items: end;
}
.g-eyebrow {
    display: inline-block;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--pastello);
    border: 1px solid var(--on-dark-line);
    border-radius: var(--radius);
    padding: 4px 9px;
    margin-bottom: var(--s3);
}
.g-hero h1 {
    font-size: clamp(30px, 4.4vw, 52px);
    color: #fff;
    max-width: 17ch;
}
.g-hero h1 em { font-style: normal; color: var(--pastello); display: block; }
.g-hero__text p {
    font-size: clamp(16px, 1.4vw, 19px);
    color: var(--on-dark-dim);
    max-width: 46ch;
    margin-bottom: 0;
}
.g-facts {
    margin-top: var(--s4);
    padding-top: var(--s3);
    border-top: 1px solid var(--on-dark-line);
    display: flex;
    flex-wrap: wrap;
    gap: var(--s1) var(--s3);
    font-size: 13px;
    color: var(--on-dark-dim);
}
.g-facts li { display: flex; align-items: center; gap: var(--s1); }
.g-facts li::before {
    content: "";
    width: 8px;
    height: 8px;
    background: var(--pastello);
    flex: none;
}

/* ---- Le due colonne, agganciate alla fascia scura ------------------------ */
.g-deck {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    gap: clamp(20px, 2.6vw, 40px);
    align-items: start;
    margin-top: calc(-1 * var(--bridge));
    margin-bottom: var(--s5);
}

.g-card {
    background: var(--bg);
    border: 1px solid var(--ink);
    border-radius: var(--radius);
    display: flex;
    flex-direction: column;
    min-width: 0;
}
/* il riquadro che vogliamo far cliccare: blocco pieno di colore dietro */
.g-card--own { box-shadow: 10px 10px 0 var(--lavanda); }

.g-card__head {
    padding: var(--s3) var(--s3) var(--s2);
    border-bottom: 1px solid var(--ink);
}
.g-card--own .g-card__head { background: var(--viola); color: #fff; border-bottom-color: var(--ink); }
.g-card__kicker {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--dim);
    margin-bottom: 6px;
}
.g-card--own .g-card__kicker { color: var(--pastello); }
.g-card__head h2 { font-size: clamp(21px, 2.1vw, 27px); }
.g-card--own .g-card__head h2 { color: #fff; }
.g-card__head p {
    margin: var(--s1) 0 0;
    font-size: 15px;
    color: var(--dim);
    max-width: 46ch;
}
.g-card--own .g-card__head p { color: #EFEAF7; }

.g-card__body { padding: var(--s3); flex: 1 1 auto; }
.g-card__foot {
    padding: var(--s2) var(--s3);
    border-top: 1px solid var(--line);
    background: var(--whisper);
    font-size: 12.5px;
    color: var(--dim);
}
.g-card__foot p:last-child { margin-bottom: 0; }

/* numeri grossi della demo pubblica */
.g-stats li {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--s2);
    align-items: baseline;
    padding: 14px 0;
    border-bottom: 1px solid var(--line);
    font-size: 13.5px;
    color: var(--dim);
}
.g-stats li:first-child { padding-top: 0; }
.g-stats li:last-child { border-bottom: 0; padding-bottom: 0; }
.g-stats b {
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--viola);
    white-space: nowrap;
    min-width: 4.6ch;
    line-height: 1.1;
}

/* elenco con il quadratino viola */
.g-list li {
    display: flex;
    gap: var(--s2);
    align-items: flex-start;
    font-size: 15px;
    margin-bottom: 10px;
}
.g-list li::before {
    content: "";
    width: 8px;
    height: 8px;
    background: var(--viola);
    flex: none;
    margin-top: 8px;
}
.g-list li:last-child { margin-bottom: 0; }

/* ---- Bottoni ------------------------------------------------------------ */
.g-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--s1);
    padding: 12px var(--s3);
    border: 1.5px solid transparent;
    border-radius: var(--radius);
    font: inherit;
    font-weight: 500;
    font-size: 16px;
    line-height: 1.3;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
}
.g-btn--pieno { background: var(--ink); color: #fff; border-color: var(--ink); }
.g-btn--pieno:hover { background: var(--ink); color: var(--viola-chiaro); }
.g-btn--filo { background: transparent; color: var(--ink); border-color: var(--ink); }
.g-btn--filo:hover { background: var(--ink); color: #fff; }
.g-btn--largo { width: 100%; padding-block: 15px; font-size: 17px; font-weight: 600; }
.g-btn[disabled] { opacity: .5; cursor: not-allowed; }
.g-azioni { display: flex; flex-wrap: wrap; gap: var(--s2); }

/* ---- Modulo di avvio ---------------------------------------------------- */
.g-campo { margin-bottom: var(--s2); }
.g-campo label { display: block; font-weight: 600; font-size: 14px; margin-bottom: 6px; }
.g-campo input[type=email] {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    font-family: var(--font);
    font-size: 16px;
    background: var(--bg);
    color: var(--text);
}
.g-campo input[type=email]:focus { border-color: var(--ink); }
.g-campo input[type=email]::placeholder { color: #6B6B6B; }
.g-aiuto { font-size: 12.5px; color: var(--dim); margin: 6px 0 0; }
.cf-turnstile { margin: var(--s2) 0; min-height: 65px; }

.g-liberi {
    display: flex;
    align-items: center;
    gap: var(--s1);
    font-size: 13.5px;
    color: var(--dim);
    margin: var(--s2) 0 0;
}
.g-liberi::before {
    content: "";
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #1F7A3D;
    flex: none;
}
.g-liberi strong { color: var(--text); }

/* ---- Postazioni occupate ------------------------------------------------ */
.g-attesa {
    display: flex;
    align-items: baseline;
    gap: var(--s2);
    padding: var(--s2) 0 var(--s3);
    border-bottom: 1px solid var(--line);
    margin-bottom: var(--s3);
}
.g-attesa b {
    font-size: clamp(40px, 6vw, 58px);
    font-weight: 700;
    letter-spacing: -.03em;
    line-height: 1;
    color: var(--viola);
}
.g-attesa span { font-size: 14px; color: var(--dim); max-width: 24ch; }

/* ---- Errore ------------------------------------------------------------- */
.g-alert {
    border: 1px solid var(--errore);
    border-radius: var(--radius);
    background: var(--errore-fondo);
    padding: var(--s2) var(--s3);
    margin-bottom: var(--s3);
}
/* con l'avviso in cima, i riquadri non salgono piu' sopra la fascia scura */
.g-in--avviso .g-alert { margin-top: var(--s4); }
.g-in--avviso .g-deck { margin-top: var(--s3); }
.g-alert h2 {
    font-size: 15px;
    color: var(--errore);
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    gap: var(--s1);
}
.g-alert h2::before { content: ""; width: 8px; height: 8px; background: var(--errore); flex: none; }
.g-alert p { margin: 0; font-size: 15px; }

/* ---- Fascia di chiusura -------------------------------------------------- */
.g-band { background: var(--pastello); border-top: 1px solid var(--line); }
.g-band__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    gap: clamp(24px, 4vw, 72px);
    padding-block: var(--s5);
    align-items: start;
}
.g-band h2 { font-size: clamp(22px, 2.4vw, 30px); margin-bottom: var(--s2); }
.g-band p { color: var(--dim); max-width: 52ch; }
.g-band h3 { font-size: 15px; margin-bottom: var(--s1); }

.g-chips { display: flex; flex-wrap: wrap; gap: var(--s1); margin-top: var(--s2); }
.g-chips li {
    font-size: 13px;
    font-weight: 500;
    border: 1px solid var(--ink);
    border-radius: var(--radius);
    padding: 5px 10px;
    color: var(--ink);
    background: transparent;
}
.g-chips li.is-first { background: var(--ink); color: #fff; }

.g-limiti {
    background: var(--bg);
    border: 1px solid var(--ink);
    border-radius: var(--radius);
    padding: var(--s3);
}
.g-limiti ul { margin: var(--s2) 0; }
.g-limiti li {
    display: flex;
    gap: var(--s2);
    align-items: flex-start;
    font-size: 14.5px;
    color: var(--text);
    padding: 7px 0;
    border-bottom: 1px solid var(--line);
}
.g-limiti li:last-child { border-bottom: 0; }
.g-limiti li::before { content: "\00d7"; color: var(--errore); font-weight: 700; line-height: 1.4; }
.g-limiti p:last-child { margin: 0; font-size: 13px; color: var(--dim); }

/* ---- Piede -------------------------------------------------------------- */
.g-foot {
    background: var(--dark);
    color: var(--on-dark-dim);
    border-top: 1px solid var(--on-dark-line);
    font-size: 13.5px;
}
.g-foot__in {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s2) var(--s4);
    padding-block: var(--s4);
    flex-wrap: wrap;
}
.g-foot__brand { display: flex; align-items: center; gap: var(--s2); }
.g-foot__brand img { width: 34px; height: 34px; display: block; border-radius: var(--radius); }
.g-foot__brand p { margin: 0; max-width: 42ch; }
.g-foot nav { display: flex; gap: var(--s3); flex-wrap: wrap; }
.g-foot a { color: #fff; text-decoration: none; }
.g-foot a:hover { color: var(--pastello); text-decoration: underline; text-underline-offset: 3px; }
.g-foot :focus-visible { outline-color: #fff; }

/* ==========================================================================
   PAGINA DELLA SESSIONE
   ========================================================================== */
.g-conto {
    display: inline-flex;
    align-items: baseline;
    gap: 10px;
    border: 1px solid var(--on-dark-line);
    border-radius: var(--radius);
    padding: 10px 16px;
    background: rgba(255, 255, 255, .06);
    margin-top: var(--s3);
}
.g-conto span { font-size: 13px; color: var(--on-dark-dim); }
.g-conto strong {
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--pastello);
    font-variant-numeric: tabular-nums;
}

.g-ripresa { margin-top: var(--s3); }
.g-ripresa p { font-size: 13px; color: var(--on-dark-dim); margin-bottom: var(--s1); }
.g-ripresa__riga { display: flex; gap: var(--s1); flex-wrap: wrap; align-items: stretch; }
.g-ripresa input {
    flex: 1 1 210px;
    min-width: 0;
    font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
    font-size: 13px;
    padding: 9px 12px;
    border: 1px solid var(--on-dark-line);
    border-radius: var(--radius);
    background: rgba(255, 255, 255, .06);
    color: #fff;
}
.g-copia {
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    padding: 9px 16px;
    border: 1px solid #fff;
    border-radius: var(--radius);
    background: transparent;
    color: #fff;
    cursor: pointer;
}
.g-copia:hover { background: #fff; color: var(--ink); }

.g-dati { width: 100%; border-collapse: collapse; }
.g-dati th, .g-dati td {
    text-align: left;
    padding: 13px 0;
    border-bottom: 1px solid var(--line);
    vertical-align: baseline;
}
.g-dati tr:last-child th, .g-dati tr:last-child td { border-bottom: 0; }
.g-dati th {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--dim);
    width: 34%;
    padding-right: var(--s2);
}
.g-dati td { font-size: 15.5px; word-break: break-word; }
.g-dati td a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.g-dati code {
    background: var(--pastello);
    border-radius: var(--radius);
    padding: 3px 8px;
    font-size: 15px;
}

.g-numeri { counter-reset: passo; }
.g-numeri li {
    counter-increment: passo;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--s2);
    align-items: baseline;
    padding: 12px 0;
    border-bottom: 1px solid var(--line);
    font-size: 15px;
}
.g-numeri li:last-child { border-bottom: 0; }
.g-numeri li::before {
    content: counter(passo);
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    background: var(--viola);
    border-radius: var(--radius);
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: start;
    margin-top: 1px;
}

/* pagina della sessione scaduta */
.g-solo {
    max-width: 620px;
    margin: 0 auto;
    padding-block: clamp(48px, 8vw, 96px);
}

/* ==========================================================================
   SCHERMI STRETTI
   ========================================================================== */
@media (max-width: 980px) {
    .g-hero__grid { grid-template-columns: 1fr; align-items: start; gap: var(--s3); }
    .g-hero h1 { max-width: 20ch; }
    .g-deck { grid-template-columns: 1fr; }
    .g-card--own { order: -1; }
    .g-band__grid { grid-template-columns: 1fr; padding-block: var(--s4); }
}

@media (max-width: 620px) {
    :root { --bridge: 32px; }
    .g-brand__claim { display: none; }
    .g-head__in { padding-block: 12px; }
    .g-card--own { box-shadow: 6px 6px 0 var(--lavanda); }
    .g-azioni .g-btn { width: 100%; }
    .g-foot__in { flex-direction: column; align-items: flex-start; }
    .g-dati th { width: auto; display: block; padding-bottom: 2px; border-bottom: 0; }
    .g-dati td { display: block; padding-top: 0; }
    .g-dati tr { display: block; border-bottom: 1px solid var(--line); padding: 12px 0; }
    .g-dati th, .g-dati td { border-bottom: 0; padding-block: 2px; }
    .g-dati tr:last-child { border-bottom: 0; }
}

@media print {
    .g-hero { background: none; color: #000; }
    .g-hero h1, .g-hero h1 em, .g-conto strong { color: #000; }
}

/* la pagina della sessione: la colonna con le credenziali e' la piu' larga */
.g-deck--sess { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
@media (max-width: 980px) { .g-deck--sess { grid-template-columns: 1fr; } }