/* Kindo Pro — linguaggio visivo del design system «Kindo Mamme» (prototipo professionisti, colors_and_type.css).
   Token e caratteri sono quelli del prototipo; dove un colore del prototipo non raggiunge il contrasto AA (4,5:1 per il testo,
   3:1 per bordi dei campi e fuochi) c'è la variante scurita qui sotto, con il motivo accanto. I caratteri sono ospitati dal portale
   (wwwroot/fonts, licenza in LICENSE.md): nessuna richiesta a CDN esterne. */

@font-face { font-family: "Quicksand"; font-weight: 400; font-style: normal; font-display: swap; src: url("../fonts/Quicksand-Regular.ttf") format("truetype"); }
@font-face { font-family: "Quicksand"; font-weight: 500; font-style: normal; font-display: swap; src: url("../fonts/Quicksand-Medium.ttf") format("truetype"); }
@font-face { font-family: "Quicksand"; font-weight: 600; font-style: normal; font-display: swap; src: url("../fonts/Quicksand-SemiBold.ttf") format("truetype"); }
@font-face { font-family: "Quicksand"; font-weight: 700; font-style: normal; font-display: swap; src: url("../fonts/Quicksand-Bold.ttf") format("truetype"); }
@font-face { font-family: "Nunito"; font-weight: 400; font-style: normal; font-display: swap; src: url("../fonts/Nunito-Regular.ttf") format("truetype"); }
@font-face { font-family: "Nunito"; font-weight: 600; font-style: normal; font-display: swap; src: url("../fonts/Nunito-SemiBold.ttf") format("truetype"); }
@font-face { font-family: "Nunito"; font-weight: 700; font-style: normal; font-display: swap; src: url("../fonts/Nunito-Bold.ttf") format("truetype"); }

:root {
    /* Palette del prototipo. */
    --km-blush-50: #FCF3F1;
    --km-blush-100: #F8E6EA;
    --km-blush-200: #F3C9D1;
    --km-blush-400: #EAA7B5;
    --km-blush-500: #D98A9C;
    --km-mauve-600: #8E6A71;
    --km-mauve-800: #5F4B4F;
    --km-mauve-900: #3D3133;
    --km-cream: #FAF3EE;
    --km-cream-2: #F5ECE5;
    --km-paper: #FFFFFF;

    /* Ruoli. Testo secondario: il mauve-600 del prototipo su crema fa 4,3:1 (sotto AA), qui #7A5A61 = 5,5:1. */
    --fg-1: var(--km-mauve-800);          /* 7,3:1 su crema */
    --fg-2: #7A5A61;
    --fg-strong: var(--km-mauve-900);
    --fg-on-dark: var(--km-cream);
    --bg-canvas: var(--km-cream);
    --bg-surface: var(--km-paper);
    --bg-tint: var(--km-blush-100);
    --bg-dark: var(--km-mauve-800);
    --accent: var(--km-blush-400);        /* pulsante principale: testo scuro (6,3:1); il bianco farebbe 1,9:1 */
    --accent-strong: var(--km-blush-500);
    --link: #A24E66;                      /* 5,0:1 su crema, 5,5:1 su bianco */
    --focus: var(--km-mauve-900);
    --field-border: #9E888C;              /* 3,3:1 su bianco: bordo dei campi (WCAG 1.4.11) */
    --border-soft: #EFE2DC;
    --border-tint: #F4D9DF;

    /* Stati: fondo tenue e testo scuro, mai bianco su colore. */
    --ok-bg: #E8F2E4;  --ok-fg: #2F5E37;
    --warn-bg: #F7ECD9; --warn-fg: #6B4A0E;
    --danger-bg: #F6E1DF; --danger-fg: #7A2E2E;
    --danger-text: #9C2F2F;
    --info-bg: #F1ECF3; --info-fg: #4A3F57;

    --r-sm: 10px;
    --r-md: 16px;
    --r-lg: 22px;
    --r-pill: 999px;

    --shadow-1: 0 1px 2px rgba(95, 75, 79, 0.06);
    --shadow-2: 0 4px 14px rgba(95, 75, 79, 0.08);

    --font-display: "Quicksand", "Nunito", system-ui, -apple-system, sans-serif;
    --font-body: "Quicksand", "Nunito", system-ui, -apple-system, sans-serif;
    --font-mono: ui-monospace, "SF Mono", Menlo, monospace;
}

html, body {
    background: var(--bg-canvas);
    color: var(--fg-1);
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 500;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

/* Il fuoco da tastiera si vede sempre (AA: 2.4.7) e ha contrasto 3:1 sia su crema sia su bianco.
   MudBlazor toglie il contorno a link, pulsanti e voci di menu: qui lo si rimette con !important, altrimenti sparisce. */
:focus-visible,
a:focus-visible,
button:focus-visible,
.mud-link:focus-visible,
.mud-nav-link:focus-visible,
.mud-button-root:focus-visible,
.mud-icon-button:focus-visible {
    outline: 3px solid var(--focus) !important;
    outline-offset: 2px !important;
}

/* Un titolo o un avviso a cui il portale porta il fuoco (dopo una navigazione o un invio) non è un comando: niente cornice,
   nemmeno con la regola forzata qui sopra. */
[tabindex="-1"]:focus-visible { outline: none !important; }

/* Nei campi MudBlazor (testo, area di testo, data, ora, numero, menu a tendina) il segno del fuoco è UNO: il bordo arrotondato del campo,
   2 px nel rosa del brand (5,5:1 su bianco, oltre i 3:1 di WCAG 1.4.11). Il contorno forzato qui sopra, sull'input o sull'area di testo
   interni, farebbe un secondo rettangolo squadrato fuori dal bordo: lì si toglie. */
.mud-input-control .mud-input-slot:focus-visible,
.mud-input-control:not(.mud-input-control-boolean-input) input:focus-visible,
.mud-input-control textarea:focus-visible,
.mud-input-control select:focus-visible { outline: none !important; }

.mud-input.mud-input-outlined:focus-within > .mud-input-outlined-border,
.mud-input.mud-input-outlined:focus-within .mud-shrink > .mud-input-outlined-border {
    border-width: 2px;
    border-color: var(--link);
}

/* Caselle, interruttori e radio: MudBlazor 9 porta il fuoco sull'<input> interno, trasparente (opacità 0), quindi il contorno forzato sopra non si vede
   e resta solo un disco grigio al 4%. Il segno va sul controllo che si vede (il bottone tondo della casella e della radio, la pista dell'interruttore):
   3 px nel rosa del brand (5,5:1 su bianco, 5,0:1 su crema), solo da tastiera, mai al clic. L'etichetta comincia subito dopo il controllo:
   l'anello sta DENTRO il controllo (offset negativo), mai fuori, altrimenti copre la prima lettera; e fra controllo ed etichetta c'è un
   piccolo spazio, perché l'anello non tocchi nemmeno il bordo della parola. */
.mud-checkbox .mud-icon-button:has(input:focus-visible),
.mud-radio .mud-icon-button:has(input:focus-visible),
.mud-switch-span:has(input:focus-visible) {
    outline: 3px solid var(--link);
    outline-offset: -3px;
}

.mud-switch-span:has(input:focus-visible) { border-radius: 14px; }

.mud-checkbox .mud-typography,
.mud-radio .mud-typography,
.mud-switch .mud-typography { margin-inline-start: 4px; }

a { color: var(--link); }

/* ---------- Impaginazione ---------- */

.pro-page {
    width: 100%;
    max-width: 960px;           /* regola 1: colonna centrata, 960 px */
    margin: 0 auto;
    padding: 24px 24px 96px;
}

@media (max-width: 599.98px) {
    .pro-page { padding: 16px 16px 96px; }
}

.pro-appbar.mud-appbar {
    background: var(--bg-canvas);   /* crema come il prototipo, non bianca */
    color: var(--fg-1);
    border-bottom: 1px solid var(--border-soft);
    box-shadow: none;
}

.pro-brand {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.25rem;
    letter-spacing: -0.01em;
    color: var(--fg-1);
    text-decoration: none;
}

/* Menu a schede (regola 4 e prototipo): due voci affiancate, la corrente piena. */
.pro-tabs.mud-navmenu {
    display: flex;
    flex-direction: row;
    gap: 8px;
    padding: 0 0 8px;
    margin: 0 0 16px;
    flex-wrap: wrap;
}

.pro-tabs .mud-nav-item { flex: 0 1 auto; width: auto; min-width: 0; }

.pro-tabs .mud-nav-item .mud-nav-link {
    border-radius: var(--r-pill);
    padding: 8px 18px;
    min-height: 44px;
    background: var(--bg-surface);
    border: 1px solid var(--border-tint);
    color: var(--fg-1);
    font-family: var(--font-display);
    font-weight: 600;
}

.pro-tabs.mud-navmenu .mud-nav-item .mud-nav-link.active:not(.mud-nav-link-disabled),
.pro-tabs.mud-navmenu .mud-nav-item .mud-nav-link.active:not(.mud-nav-link-disabled):hover {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--fg-strong);
}

.pro-tabs.mud-navmenu .mud-nav-item .mud-nav-link.active .mud-nav-link-icon { color: var(--fg-strong); }

.pro-tabs .mud-nav-link .mud-nav-link-text { font-weight: inherit; }

/* ---------- Tipografia ---------- */

h1, h2, h3, h4, .mud-typography-h4, .mud-typography-h5, .mud-typography-h6 {
    font-family: var(--font-display);
    color: var(--fg-1);
}

.pro-title {
    font: 700 1.75rem/1.2 var(--font-display);
    letter-spacing: -0.01em;
    margin: 0 0 8px;
}

.pro-lead { color: var(--fg-2); margin: 0 0 16px; }

.pro-overline {
    font: 700 0.6875rem/1.2 var(--font-body);
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--fg-2);
    margin: 0 0 8px;
}

/* ---------- Schede, sezioni, griglia ---------- */

.pro-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-soft);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-1);
    padding: 24px;
}

@media (max-width: 599.98px) {
    .pro-card { padding: 16px; border-radius: var(--r-md); }
}

.pro-banner {
    background: var(--bg-dark);
    color: var(--fg-on-dark);
    border-radius: var(--r-lg);
    padding: 20px 24px;
}

.pro-banner .pro-overline, .pro-banner .pro-lead { color: var(--km-blush-200); }
.pro-banner h1, .pro-banner h2 { color: var(--fg-on-dark); }

/* Regola 3: ogni gruppo del modulo è una scheda con titolo numerato e una riga di spiegazione. */
.pro-section { margin: 0 0 24px; }

.pro-section-head { display: flex; align-items: center; gap: 12px; margin: 0 0 4px; }

.pro-section-head h2 { font: 600 1.125rem/1.3 var(--font-display); margin: 0; }

.pro-step {
    flex: none;
    width: 28px; height: 28px;
    border-radius: 50%;
    background: var(--bg-tint);
    color: var(--fg-1);
    font: 700 0.8125rem/28px var(--font-display);
    text-align: center;
}

.pro-section-note { color: var(--fg-2); font-size: 0.875rem; margin: 0 0 16px 40px; }

@media (max-width: 599.98px) {
    .pro-section-note { margin-left: 0; }
}

/* Regola 2: griglia a 12 colonne; sotto i 600 px una colonna sola. */
.pro-fields {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 16px;
}

.pro-fields > * { grid-column: span 12; min-width: 0; }
.pro-fields > .span-8 { grid-column: span 8; }
.pro-fields > .span-6 { grid-column: span 6; }
.pro-fields > .span-4 { grid-column: span 4; }
.pro-fields > .span-3 { grid-column: span 3; }

@media (max-width: 599.98px) {
    .pro-fields > .span-8, .pro-fields > .span-6, .pro-fields > .span-4, .pro-fields > .span-3 { grid-column: span 12; }
    /* Coppie corte (orari, età): restano affiancate anche sul telefono. */
    .pro-fields > .pair-keep { grid-column: span 6; }
}

/* ---------- Pulsanti: a pillola, ruolo chiaro ---------- */

.mud-button-root.mud-button {
    text-transform: none;
    letter-spacing: 0;
    font-family: var(--font-display);
    font-weight: 600;
    border-radius: var(--r-pill);
    min-height: 44px;
    padding: 8px 22px;
    box-shadow: none;
}

.mud-button-filled.mud-button-filled-primary {
    background: var(--accent);
    color: var(--fg-strong);
}

.mud-button-filled.mud-button-filled-primary:hover { background: var(--accent-strong); }

.mud-button-filled.mud-button-filled-primary.mud-disabled,
.mud-button-filled.mud-button-filled-primary:disabled {
    background: var(--km-blush-100);
    color: var(--fg-2);
}

.mud-button-outlined.mud-button-outlined-primary {
    background: var(--km-blush-100);
    border-color: var(--km-blush-200);
    color: var(--fg-1);
}

.mud-button-outlined.mud-button-outlined-primary:hover { background: var(--km-blush-200); }

.mud-button-text.mud-button-text-primary { color: var(--link); }
.mud-button-text.mud-button-text-error { color: var(--danger-text); }

.mud-button-filled.mud-button-filled-error { background: var(--danger-text); color: #fff; }

/* ---------- Campi ---------- */

.mud-input-control .mud-input-label { font-weight: 600; }

.mud-input-outlined .mud-input-outlined-border { border-color: var(--field-border); border-radius: var(--r-sm); }
.mud-input-outlined:hover .mud-input-outlined-border { border-color: var(--fg-1); }
.mud-input.mud-input-outlined { background: var(--bg-surface); border-radius: var(--r-sm); }

.mud-input-helper-text, .mud-input-error { font-size: 0.8125rem; }
.mud-input-helper-text.mud-input-error { color: var(--danger-text); }
/* Il contatore «n / 120» sta su una riga anche quando l'aiuto accanto è lungo (campo «Promo Kindo»): è l'aiuto che va a capo, non il contatore. */
.mud-input-helper-text .ms-auto { white-space: nowrap; padding-inline-start: 12px; }

/* ---------- Avvisi ---------- */

.mud-alert { border-radius: var(--r-md); font-weight: 500; }
.mud-alert-text-info, .mud-alert-text-normal { background: var(--info-bg); color: var(--info-fg); }
.mud-alert-text-success { background: var(--ok-bg); color: var(--ok-fg); }
.mud-alert-text-warning { background: var(--warn-bg); color: var(--warn-fg); }
.mud-alert-text-error { background: var(--danger-bg); color: var(--danger-fg); }
.mud-alert .mud-alert-icon { color: inherit; }

/* ---------- Etichette di stato (regola 8: lo stesso colore ovunque) ---------- */

.pro-pill {
    display: inline-block;
    padding: 2px 12px;
    border-radius: var(--r-pill);
    font: 700 0.75rem/1.6 var(--font-body);
    background: var(--km-cream-2);
    color: var(--fg-1);
}

.pro-pill.ok { background: var(--ok-bg); color: var(--ok-fg); }
.pro-pill.wait { background: var(--warn-bg); color: var(--warn-fg); }
.pro-pill.no { background: var(--danger-bg); color: var(--danger-fg); }
.pro-pill.tint { background: var(--bg-tint); color: var(--fg-1); }

/* Solo per chi usa lo screen reader. */
.pro-sr-only {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

@media (prefers-reduced-motion: reduce) {
    * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ---------- Stati comuni ---------- */

.pro-loading { padding: 8px 0; }
.pro-state { margin: 8px 0 16px; }
.pro-empty { text-align: center; padding: 32px 24px; }
.pro-empty-text { margin: 0 0 16px; color: var(--fg-2); }

.pro-field-error { color: var(--danger-text); display: block; margin: 4px 0 0 14px; }

/* Barra delle azioni (regola 5): in fondo al modulo, a pillola, resta in vista mentre si scorre il modulo. */
.pro-actionbar {
    position: sticky;
    bottom: 16px;
    z-index: 5;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    padding: 12px 16px;
    margin: 8px 0 16px;
    background: var(--bg-surface);
    border: 1px solid var(--border-tint);
    border-radius: var(--r-pill);
    box-shadow: var(--shadow-2);
}

.pro-actionbar .pro-actionbar-end { margin-left: auto; }

@media (max-width: 599.98px) {
    .pro-actionbar { border-radius: var(--r-lg); padding: 12px; }
    .pro-actionbar .mud-button-root { flex: 1 1 100%; }
    .pro-actionbar .pro-actionbar-end { margin-left: 0; }
}

/* Intestazione della struttura: nome, tipo e città, stato. */
.pro-venue-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.pro-venue-head .pro-venue-name { font: 700 1.5rem/1.2 var(--font-display); margin: 0 0 4px; }
.pro-venue-head .pro-lead { margin: 0; }
.pro-form { margin-top: 24px; margin-bottom: 40px; }
.pro-actionbar-note { color: var(--fg-2); font-size: 0.875rem; }

/* Foto e video della scheda. */
.pro-media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.pro-media-grid:empty { display: none; }

.pro-media-tile {
    border: 1px solid var(--border-soft);
    border-radius: var(--r-md);
    overflow: hidden;
    background: var(--km-cream-2);
}

.pro-media-tile img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.pro-media-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px; flex-wrap: wrap; }
.pro-media-removed { margin: 0; padding: 12px; color: var(--danger-fg); font-size: 0.875rem; }

.pro-media-list { display: flex; flex-direction: column; gap: 8px; }
.pro-media-row { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border: 1px solid var(--border-soft); border-radius: var(--r-md); background: var(--km-cream-2); flex-wrap: wrap; }
.pro-media-url { flex: 1 1 200px; min-width: 0; overflow-wrap: anywhere; font-size: 0.875rem; }

.pro-media-add { margin-top: 16px; }

/* Campo file nativo nascosto ma focalizzabile; l'etichetta è il pulsante. */
.pro-upload { position: relative; margin-top: 8px; }
.pro-file-label {
    display: inline-block;
    padding: 10px 22px;
    min-height: 44px;
    border: 1px solid var(--km-blush-200);
    border-radius: var(--r-pill);
    background: var(--km-blush-100);
    color: var(--fg-1);
    font: 600 0.9375rem/1.5 var(--font-display);
    cursor: pointer;
}
.pro-file-label:hover { background: var(--km-blush-200); }
.pro-file-label.is-disabled { background: var(--km-cream-2); color: var(--fg-2); cursor: not-allowed; }
.pro-file:focus-visible + .pro-file-label { outline: 3px solid var(--focus); outline-offset: 2px; }

.pro-inline { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: start; }
@media (max-width: 599.98px) {
    .pro-inline { grid-template-columns: 1fr; }
    .pro-inline .mud-button-root { width: 100%; }
}

@media (max-width: 599.98px) {
    .pro-tabs.mud-navmenu { gap: 6px; }
    .pro-tabs .mud-nav-item .mud-nav-link { padding: 8px 12px; }
    .pro-media-url { flex-basis: 100%; }
}

/* Testata di pagina: titolo e azione principale sulla stessa riga. */
.pro-pagehead { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.pro-pagehead .pro-title { margin: 0; }

/* Elenco degli eventi. */
.pro-event-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 719.98px) { .pro-event-list { grid-template-columns: 1fr; } }

.pro-event { position: relative; padding: 20px; }
.pro-event-top { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.pro-event-title { font: 600 1.125rem/1.3 var(--font-display); margin: 0 0 4px; overflow-wrap: anywhere; }
.pro-event-title a { color: var(--fg-1); text-decoration: none; }
.pro-event-title a:hover { text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; }
.pro-event-title a::after { content: ""; position: absolute; inset: 0; border-radius: var(--r-lg); }
.pro-event-title a:focus-visible { outline: none !important; }   /* il contorno è quello della scheda intera, qui sotto */
.pro-event-title a:focus-visible::after { outline: 3px solid var(--focus); outline-offset: 2px; }
.pro-event-when { margin: 0 0 8px; color: var(--fg-1); }
.pro-event-meta { margin: 0; display: flex; gap: 4px 16px; flex-wrap: wrap; color: var(--fg-2); font-size: 0.875rem; }

/* Modulo evento: titoli in maiuscoletto sopra le schede (prototipo «Nuovo evento»). */
.pro-section-overline { margin: 0 0 8px 4px; }
.pro-fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.pro-fieldset > legend { padding: 0; margin: 0 0 8px; color: var(--fg-2); font-size: 0.875rem; font-weight: 600; }
.pro-fieldset .pro-fields { gap: 12px; }
/* Campo senza etichetta propria (Posti): MudBlazor dà 8 px di margine sopra solo se l'etichetta c'è; qui si rida per stare in linea con l'età. */
.pro-fieldset > .mud-input-control { margin-top: 8px; }
.pro-back { display: inline-block; margin-bottom: 8px; font-weight: 600; }
.pro-danger-card { border-color: var(--danger-bg); background: var(--bg-surface); margin-bottom: 24px; }
.pro-danger-card .pro-danger-note { color: var(--fg-2); margin: 0 0 12px; }

/* Iscritte. */
.pro-iscritte { margin-top: 8px; }
.pro-iscritte-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.pro-iscritte-count { margin: 0; font-weight: 600; }
.pro-num { font-variant-numeric: tabular-nums; }
.pro-terms-privacy { margin: 4px 0 0 0; font-size: 0.8125rem; }
.pro-terms a { text-decoration: underline; }
.pro-actionrow { display: flex; gap: 12px; flex-wrap: wrap; }
.pro-table-wrap { overflow-x: auto; }
.pro-table.mud-simple-table { background: transparent; box-shadow: none; }
.pro-table.mud-simple-table th {
    font: 700 0.6875rem/1.2 var(--font-body);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--fg-2);
    text-align: left;
}
.pro-table.mud-simple-table td, .pro-table.mud-simple-table th { padding: 10px 12px; border-bottom: 1px solid var(--border-soft); }
.pro-code { font-family: var(--font-mono); font-weight: 700; letter-spacing: 0.08em; }

/* Home. */
.pro-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 16px 0; }
.pro-tile { background: var(--bg-surface); border: 1px solid var(--border-soft); border-radius: var(--r-md); box-shadow: var(--shadow-1); padding: 16px; text-align: center; display: flex; flex-direction: column; gap: 4px; }
.pro-tile-value { font: 700 1.75rem/1.1 var(--font-display); color: var(--fg-1); }
.pro-tile .pro-overline { margin: 0; }

.pro-shortcuts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 0 0 32px; }
@media (max-width: 599.98px) { .pro-shortcuts { grid-template-columns: 1fr; } }
.pro-shortcut { display: flex; flex-direction: column; gap: 4px; text-decoration: none; color: var(--fg-1); padding: 20px; }
.pro-shortcut:hover { border-color: var(--accent); }
.pro-shortcut-title { font: 600 1.125rem/1.3 var(--font-display); }
.pro-shortcut-note { color: var(--fg-2); font-size: 0.875rem; }

.pro-upcoming { list-style: none; margin: 0; padding: 0; }
.pro-upcoming-row { display: flex; justify-content: space-between; align-items: center; gap: 8px 16px; flex-wrap: wrap; padding: 12px 0; border-bottom: 1px solid var(--border-soft); }
.pro-upcoming-row:last-child { border-bottom: 0; }
.pro-upcoming-row a { display: flex; flex-direction: column; text-decoration: none; color: var(--fg-1); }
.pro-upcoming-row a:hover .pro-upcoming-title { text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; }
.pro-upcoming-title { font: 600 1rem/1.3 var(--font-display); }
.pro-upcoming-when { color: var(--fg-2); font-size: 0.875rem; }
.pro-upcoming-count { color: var(--fg-2); font-size: 0.875rem; }
@media (max-width: 599.98px) { .pro-upcoming-count { flex-basis: 100%; } }

/* Locandina dell'evento (spec 29 §6.11): anteprima a larghezza del modulo, con un tetto all'altezza; nessun ritaglio. */
.pro-poster-img { display: block; max-width: 100%; max-height: 360px; width: auto; height: auto; border: 1px solid var(--border-soft); border-radius: var(--r-md); background: var(--km-cream-2); }
.pro-poster-staged { margin: 0 0 8px; overflow-wrap: anywhere; font-size: 0.875rem; }
.pro-poster-status { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 12px; font-size: 0.875rem; }
.pro-poster-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

/* Accesso e registrazione: metà marchio, metà modulo. La frase grande è un paragrafo, l'unico h1 resta il titolo della pagina.
   --pro-accesso-accento è l'unica variabile nuova: il malva dell'accento, solo su quel testo (≥ 24 px). */
html:has(.pro-accesso),
body:has(.pro-accesso) {
    margin: 0;
    overflow-x: clip;
    background: var(--km-paper);
}
.pro-accesso {
    --pro-accesso-accento: var(--km-mauve-800);
    box-sizing: border-box;
    display: flex;
    width: 100%;
    max-width: 100%;
    min-height: 100vh;
    min-height: 100dvh;
    margin: 0;
    padding: 0;
    background: var(--km-paper);
}
.pro-accesso *, .pro-accesso *::before, .pro-accesso *::after { box-sizing: border-box; }
.pro-accesso-vetrina {
    position: relative;
    flex: 1.15 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    overflow: hidden;
    padding: 2.75rem 3.25rem 3rem;
    background:
        radial-gradient(ellipse 52% 42% at 8% 92%, var(--km-blush-100) 0%, transparent 70%),
        radial-gradient(ellipse 38% 32% at 92% 8%, var(--km-cream) 0%, transparent 68%),
        linear-gradient(155deg, var(--km-blush-400) 0%, var(--km-blush-200) 52%, var(--km-blush-100) 100%);
}
.pro-accesso-decoro { position: absolute; inset: 0; pointer-events: none; }
.pro-accesso-blob { position: absolute; display: block; }
.pro-accesso-blob-a {
    width: 18rem; height: 13rem; top: -3.5rem; left: -4rem;
    border-radius: 58% 42% 62% 38%;
    background: var(--km-blush-100);
    opacity: 0.72;
}
.pro-accesso-blob-b {
    width: 11rem; height: 11rem; right: 8%; bottom: 10%;
    border-radius: 50%;
    background: var(--km-cream);
    opacity: 0.45;
}
.pro-accesso-blob-c {
    width: 7.5rem; height: 6.5rem; top: 42%; left: 46%;
    border-radius: 46% 54% 42% 58%;
    background: var(--km-blush-50);
    opacity: 0.85;
}
.pro-accesso-simbolo {
    position: absolute;
    width: min(28rem, 88%);
    right: -10%;
    bottom: -12%;
    opacity: 0.28;
    user-select: none;
}
.pro-accesso-scheda {
    --rot: -8deg;
    position: absolute;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 5.75rem;
    height: 5.75rem;
    border-radius: 1.5rem;
    background: var(--km-paper);
    box-shadow: var(--shadow-2), 0 18px 36px color-mix(in srgb, var(--km-mauve-800) 16%, transparent);
    transform: rotate(var(--rot));
    animation: pro-accesso-entra 0.7s ease both;
}
.pro-accesso-scheda img { width: 2.85rem; height: 2.85rem; object-fit: contain; }
.pro-accesso-scheda-1 { top: 11%; right: 7%; --rot: 9deg; animation-delay: 0.08s; }
.pro-accesso-scheda-2 { bottom: 12%; left: 6%; --rot: -8deg; animation-delay: 0.16s; }
.pro-accesso-scheda-3 { bottom: 28%; right: 8%; --rot: 4deg; animation-delay: 0.24s; }
.pro-accesso-logo {
    position: relative;
    z-index: 2;
    align-self: flex-start;
    padding: 0.45rem 0.8rem 0.35rem;
    background: var(--km-paper);
    border-radius: 1.15rem;
    box-shadow: var(--shadow-2);
}
.pro-accesso .pro-brand {
    display: block;
    height: 3.6rem;
    width: auto;
    max-width: min(17rem, 100%);
    object-fit: contain;
    object-position: left center;
}
.pro-accesso-frase {
    --rot: 0deg;
    position: relative;
    z-index: 2;
    margin: auto 0;
    max-width: min(16ch, 68%);
    font: 700 clamp(1.5rem, 4.6vw, 3.6rem)/1.05 var(--font-display);
    letter-spacing: -0.025em;
    color: var(--km-mauve-900);
    text-wrap: balance;
    overflow-wrap: break-word;
    animation: pro-accesso-entra 0.6s ease both;
}
.pro-accesso-accento { color: var(--pro-accesso-accento); }
@keyframes pro-accesso-entra {
    from { opacity: 0; transform: translateY(12px) rotate(var(--rot, 0deg)); }
    to { opacity: 1; transform: translateY(0) rotate(var(--rot, 0deg)); }
}
@media (prefers-reduced-motion: reduce) {
    .pro-accesso-scheda, .pro-accesso-frase { animation: none; }
}
.pro-accesso-modulo {
    flex: 0.9 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: var(--km-paper);
    padding: 2.5rem clamp(1.25rem, 4vw, 4rem);
}
.pro-accesso-modulo-inner { width: min(26rem, 100%); margin-inline: auto; padding-inline: 0.5rem; }
.pro-accesso h1 { margin: 0 0 0.75rem; font: 700 1.75rem/1.2 var(--font-display); color: var(--fg-1); overflow-wrap: anywhere; }
@media (max-width: 768px) {
    .pro-accesso { flex-direction: column; }
    .pro-accesso-vetrina {
        flex: none;
        width: 100%;
        min-height: 0;
        padding: 1.15rem 1.15rem 1.35rem;
    }
    .pro-accesso-simbolo, .pro-accesso-scheda { display: none; }
    .pro-accesso-frase { margin: 0.85rem 0 0; max-width: min(18ch, 100%); }
    .pro-accesso-modulo { flex: 1 0 auto; width: 100%; justify-content: flex-start; padding: 0.75rem 1.15rem 2.5rem; }
}
.pro-accesso-error { margin: 0 0 1rem; padding: 0.75rem 1rem; background: var(--danger-bg); color: var(--danger-text); border-radius: var(--r-sm); }
.pro-accesso-error[hidden] { display: none; }
.pro-accesso-error p { margin: 0 0 0.75rem; }
.pro-accesso-retry, .pro-accesso-error button {
    display: inline-block;
    margin: 0;
    padding: 0.6rem 1rem;
    border: 0;
    border-radius: var(--r-sm);
    background: var(--link);
    color: #fff;
    font: 600 1rem/1.2 var(--font-body);
    text-decoration: none;
    cursor: pointer;
}
.pro-accesso a:focus-visible, .pro-accesso button:focus-visible { outline: 3px solid var(--focus) !important; outline-offset: 2px; }
.pro-accesso-privacy {
    display: inline-flex;
    align-items: baseline;
    margin: 0;
    padding: 0;
    color: var(--km-mauve-900);
    font: 500 0.75rem/16px var(--font-display);
    white-space: nowrap;
}
.pro-accesso-privacy a { color: var(--km-mauve-900); font: inherit; line-height: 16px; text-decoration: none; }
.pro-accesso #pro-accesso-mount { width: 100%; max-width: 100%; }