/* Rinfrescata grafica comune a tutti i congressi (2026-10-24): caricato DOPO il CSS del congresso e leggibilita.css (layouts/layout.tpl).
   Non porta colori propri: sfumature e ombre si appoggiano al colore che il tema di ciascun congresso ha gia' scelto (currentColor / background-color).
   Solo forma: angoli, ombre, bottoni, tabelle, titoli, riquadri. Per tornare indietro basta togliere il <link> dal layout. */

:root { --rf-r: 14px; --rf-r-sm: 10px; --rf-ease: cubic-bezier(.2, .7, .2, 1);
        --rf-shadow: 0 1px 2px rgba(20, 20, 40, .06), 0 6px 16px -6px rgba(20, 20, 40, .14);
        --rf-1: #3a3f51; --rf-2: #6b7288; --rf-b1: #3a3f51; --rf-b2: #2b2f3d; /* neutri, per un congresso senza colori propri qui sotto */
        --rf-shadow-up: 0 2px 4px rgba(20, 20, 40, .08), 0 14px 28px -10px rgba(20, 20, 40, .22); }

/* bottoni: tutti a pillola (anche piatti, di contorno e link; restano tondi solo i btn-floating) */
.btn:not(.btn-floating) { border-radius: 999px; }
/* quelli pieni: stesso colore del tema, con luce in alto e ombra sotto; piu' fiato ai lati perche' la pillola non tagli il testo */
.btn:not(.btn-flat):not(.btn-floating):not(.btn-link):not([class*="btn-outline"]) {
  font-weight: 600; letter-spacing: .05em; padding-left: 1.5rem; padding-right: 1.5rem;
  background-image: linear-gradient(135deg, rgba(255, 255, 255, .26), rgba(255, 255, 255, 0) 52%, rgba(0, 0, 0, .14));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), 0 1px 2px rgba(20, 20, 40, .22), 0 8px 16px -8px rgba(20, 20, 40, .35);
  transition: transform .18s var(--rf-ease), box-shadow .18s var(--rf-ease), filter .18s var(--rf-ease);
}
.btn:not(.btn-flat):not(.btn-floating):not(.btn-link):not([class*="btn-outline"]):hover { transform: translateY(-2px); filter: brightness(1.06);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 2px 4px rgba(20, 20, 40, .25), 0 14px 22px -8px rgba(20, 20, 40, .42); }
.btn:not(.btn-flat):not(.btn-floating):not(.btn-link):not([class*="btn-outline"]):active { transform: translateY(0); filter: none;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .2), 0 1px 2px rgba(20, 20, 40, .2); }
/* bottoni principali (info / primary / secondary): testo bianco su gradiente piu' profondo del congresso (--rf-b1 -> --rf-b2), contrasto >= 4,5:1 */
.btn.btn-info:not(.btn-flat):not(.btn-floating):not(.btn-link):not([class*="btn-outline"]),
.btn.btn-primary:not(.btn-flat):not(.btn-floating):not(.btn-link):not([class*="btn-outline"]),
.btn.btn-secondary:not(.btn-flat):not(.btn-floating):not(.btn-link):not([class*="btn-outline"]) {
  color: #fff; border-color: transparent; background-color: var(--rf-b1);
  background-image: linear-gradient(135deg, var(--rf-b1), var(--rf-b2)); }
/* dentro le card i bottoni principali sono gradiente sul colore primario del congresso (--rf-p1 -> piu' scuro), testo bianco */
.card .btn.btn-info:not(.btn-flat):not(.btn-floating):not(.btn-link):not([class*="btn-outline"]),
.card .btn.btn-primary:not(.btn-flat):not(.btn-floating):not(.btn-link):not([class*="btn-outline"]),
.card .btn.btn-secondary:not(.btn-flat):not(.btn-floating):not(.btn-link):not([class*="btn-outline"]) {
  background-color: var(--rf-p1, var(--rf-1));
  background-image: linear-gradient(135deg, var(--rf-p1, var(--rf-1)), color-mix(in srgb, var(--rf-p1, var(--rf-1)) 62%, #000)); }
.btn:focus-visible { outline: 3px solid currentColor; outline-offset: 3px; }

/* riquadri: angoli morbidi, ombra a due livelli; l'area dei pulsanti non ha piu' il filetto duro */
.card { border-radius: var(--rf-r); box-shadow: var(--rf-shadow); border: 0; overflow: hidden; }
.card .card-action { border-top: 1px solid rgba(60, 70, 110, .10); }
/* il grigio pieno solo sulla striscia dei pulsanti in fondo (le altre card-action sono sezioni della scheda di dettaglio) */
.card > .card-action:last-child { background: rgba(60, 70, 110, .09); }

/* stesso respiro in tutti i congressi (il tema di Sclerotherapy lo ha a 15px): serve alle intestazioni qui sotto, che arrivano al bordo */
.card > .card-content { padding: 24px; }

/* titoli dei riquadri: intestazione della scheda, a tutta larghezza (come la striscia dei pulsanti in fondo), con il gradiente primary -> secondary del congresso al 50% e testo scuro */
.card .card-title h5, .card .card-title:not(:has(h5)) {
  display: block; margin: -24px -24px 1.1rem; padding: .8rem 24px; line-height: 1.3;
  font-size: 1.25rem; font-weight: 600; letter-spacing: .01em; color: #1d2030;
  background-image: linear-gradient(100deg, color-mix(in srgb, var(--rf-1) 50%, #fff), color-mix(in srgb, var(--rf-2) 50%, #fff));
  border-bottom: 1px solid rgba(60, 70, 110, .10); }
/* nella scheda di dettaglio i titoli di sezione stanno dentro righe con altro padding: li lascio come etichette sfumate */
.card h6.font-weight-bold:not(.text-uppercase) {
  display: inline-block; max-width: 100%; margin: 0 0 .8rem; padding: .35rem 1rem; border-radius: 999px; line-height: 1.3;
  font-size: .95rem; font-weight: 600; letter-spacing: .01em; color: #1d2030;
  background-image: linear-gradient(100deg, color-mix(in srgb, var(--rf-1) 50%, #fff), color-mix(in srgb, var(--rf-2) 50%, #fff)); }

/* sfondo delle pagine: piu' scuro del bianco, cosi' i riquadri bianchi si staccano; anche <main>, che ha il suo bianco e copriva quello del body */
body, main { background-color: #eceef4; }
.modal-content { border-radius: var(--rf-r); border: 0; box-shadow: var(--rf-shadow-up); overflow: hidden; }
.alert { border-radius: var(--rf-r-sm); border: 0; box-shadow: var(--rf-shadow); }

/* riquadri colorati (avvisi, «Desideri effettuare piu' di 5 iscrizioni?»): stessi colori, bordi arrotondati e ombra */
section .row > [class*="col-"].bg-info, section .row > [class*="col-"].bg-warning, section .row > [class*="col-"].bg-danger, section .row > [class*="col-"].bg-success { border-radius: var(--rf-r); box-shadow: var(--rf-shadow); }

/* tabelle: intestazione in maiuscoletto, righe che si illuminano, angoli arrotondati */
.table { border-collapse: separate; border-spacing: 0; }
.table thead th { font-weight: 700; text-transform: uppercase; letter-spacing: .06em; border-top: 0; border-bottom: 2px solid rgba(20, 20, 40, .12); }
.table tbody tr { transition: background-color .15s var(--rf-ease); }
.table-hover tbody tr:hover, .table-striped tbody tr:hover { background-color: rgba(20, 20, 40, .06); }
.table-striped tbody tr:nth-of-type(odd) { background-color: rgba(20, 20, 40, .03); }
.table-striped tbody tr:first-child td:first-child { border-top-left-radius: var(--rf-r-sm); }
.table-striped tbody tr:first-child td:last-child { border-top-right-radius: var(--rf-r-sm); }
.table-striped tbody tr:last-child td:first-child { border-bottom-left-radius: var(--rf-r-sm); }
.table-striped tbody tr:last-child td:last-child { border-bottom-right-radius: var(--rf-r-sm); }

/* titoli: piu' pesanti e stretti; il titolo di pagina sfuma dal colore del tema a una tinta vicina (solo dove il browser sa farlo, il resto resta pieno) */
main h1, main h2, main h3 { font-weight: 700; letter-spacing: -.02em; }
main h1 { font-weight: 800; letter-spacing: -.03em; }
@supports (color: hsl(from red h s l)) and (background-clip: text) {
  main section h1:not(.text-white):not([class*="display"]) {
    background-image: linear-gradient(100deg, currentColor 35%, hsl(from currentColor calc(h + 32) s l));
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  }
}

/* campi e briciole di pane */
.breadcrumb { border-radius: var(--rf-r-sm); }
.form-control, .input-field input { transition: border-color .15s var(--rf-ease), box-shadow .15s var(--rf-ease); }
.badge, .chip { border-radius: 999px; font-weight: 600; letter-spacing: .03em; }

/* colori dei congressi (primary -> secondary del tema; la classe cng-<chiave> la mette il layout sul body) */
body.cng-sies { --rf-1: #67378c; --rf-2: #ec635f; --rf-b1: #d23e39; --rf-b2: #b7324a; }
body.cng-siesday { --rf-1: #3d6ca8; --rf-2: #6d97cf; --rf-b1: #4876b5; --rf-b2: #335d99; }
body.cng-sclero { --rf-1: #c31853; --rf-2: #e2483d; --rf-b1: #c8185a; --rf-b2: #a01248; }
body.cng-sies2days, body.cng-sicpre { --rf-1: #0c6186; --rf-2: #e84e1b; --rf-b1: #0c6186; --rf-b2: #09475f; }
body.cng-aiteb { --rf-1: #043261; --rf-2: #316112; --rf-b1: #043261; --rf-b2: #032447; }
body.cng-idass { --rf-p1: #c24a60; --rf-1: #cf5a6e; --rf-2: #6e918c; --rf-b1: #c24a60; --rf-b2: #a63a52; }

/* ---- secondo giro: pagine, testata, riquadri colorati, piede ---- */

/* riquadri colorati: la stessa luce diagonale dei bottoni, cosi' bottoni e banner parlano la stessa lingua */
section .row > [class*="col-"].bg-info, section .row > [class*="col-"].bg-warning, section .row > [class*="col-"].bg-danger,
section .row > [class*="col-"].bg-success, section .row > [class*="col-"].bg-primary, section .row > [class*="col-"].bg-secondary {
  background-image: linear-gradient(135deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, 0) 52%, rgba(0, 0, 0, .16));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), var(--rf-shadow); }

/* fascia del titolo (briciole di pane): profondita' e una luce sul bordo alto, colore del tema invariato */
section.bg-breadcrumb { background-image: linear-gradient(180deg, rgba(255, 255, 255, .08), rgba(0, 0, 0, .10));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 8px 20px -12px rgba(20, 20, 40, .55); position: relative; }

/* titolo di pagina: barretta sfumata sotto, nel colore del titolo */
@supports (color: hsl(from red h s l)) {
  main section h1:not(.text-white):not(.text-center):not([class*="display"])::after {
    content: ""; display: block; width: 64px; height: 5px; margin-top: .7rem; border-radius: 999px;
    background-image: linear-gradient(90deg, currentColor, hsl(from currentColor calc(h + 32) s l)); }
}

/* menu a tendina e voci: angoli morbidi, ombra, voce evidenziata a pillola */
.dropdown-menu { border: 0; border-radius: var(--rf-r); box-shadow: var(--rf-shadow-up); padding: .5rem; overflow: hidden; }
.dropdown-item { border-radius: 8px; transition: background-color .15s var(--rf-ease), color .15s var(--rf-ease); }

/* schede-elenco (quelle col pulsante): si sollevano al passaggio */
.card:has(.card-action .btn) { transition: transform .22s var(--rf-ease), box-shadow .22s var(--rf-ease); }
.card:has(.card-action .btn):hover { transform: translateY(-3px); box-shadow: var(--rf-shadow-up); }

/* riquadri con bordo scuro (login e simili): filetto leggero invece del nero pieno */
.card.border.border-dark { border: 1px solid rgba(20, 20, 40, .14) !important; box-shadow: var(--rf-shadow); }

/* piede: titoli piu' decisi, icone social tonde che si sollevano */
footer h4, footer h5 { font-weight: 700; letter-spacing: -.01em; }
footer .social-icon { border-radius: 50%; transition: transform .18s var(--rf-ease), box-shadow .18s var(--rf-ease); }
footer .social-icon:hover { transform: translateY(-3px); box-shadow: var(--rf-shadow-up); }

@media (prefers-reduced-motion: reduce) {
  .card:has(.card-action .btn):hover, footer .social-icon:hover { transform: none; }
  .btn, .btn:hover, .btn:active, .table tbody tr { transition: none; transform: none; }
}