/* =============================================================================
   SCUOLA SCI - identita' grafica sopra Bootstrap 5.
   Colori della montagna: blu notte, ghiacciaio, pino, neve e l'arancio
   "alba sulle vette" per le azioni principali. Tutti i colori sono variabili
   su :root: nel resto del foglio non vanno usati colori fissi.
   ============================================================================= */
:root {
  --ss-notte: #0B2540;
  --ss-notte-2: #12395E;
  --ss-notte-3: #1C4A75;
  --ss-ghiaccio: #1F6FB2;
  --ss-ghiaccio-chiaro: #7CC4F0;
  --ss-ghiaccio-velo: #E6F2FA;
  --ss-pino: #1F5B4A;
  --ss-pino-velo: #DDF3E8;
  --ss-alba: #C9461A;
  --ss-alba-scuro: #A7380F;
  --ss-alba-velo: #FBE3DA;
  --ss-sole: #E9A23B;
  --ss-giallo-velo: #FFF1D6;
  --ss-giallo-testo: #7A4E00;
  --ss-neve: #F6F9FC;
  --ss-bianco: #FFFFFF;
  --ss-testo: #0F1E2E;
  --ss-muto: #4A5B6C;
  --ss-linea: #E3ECF4;
  --ss-linea-2: #D5E1EC;
  --ss-grigio-velo: #E9EEF3;
  --ss-su-scuro: #DCE8F3;
  --ss-su-scuro-muto: #9FB4C8;
  --ss-raggio: 18px;
  --ss-ombra: 0 24px 60px rgba(11, 37, 64, .16);

  --bs-body-bg: var(--ss-neve);
  --bs-body-color: var(--ss-testo);
  --bs-body-font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --bs-link-color: var(--ss-ghiaccio);
  --bs-link-hover-color: var(--ss-notte-2);
  --bs-border-color: var(--ss-linea-2);
  --bs-primary: var(--ss-notte);
  --bs-primary-rgb: 11, 37, 64;
}

body { background: var(--ss-neve); }
h1, h2, h3, h4, .ss-titolo { font-family: "Outfit", system-ui, sans-serif; color: var(--ss-notte); }
.ss-scuro h1, .ss-scuro h2, .ss-scuro h3 { color: var(--ss-bianco); }

/* ---- pulsanti -------------------------------------------------------------- */
.btn { border-radius: 12px; font-weight: 600; }
.btn-primary { --bs-btn-bg: var(--ss-notte); --bs-btn-border-color: var(--ss-notte); --bs-btn-hover-bg: var(--ss-notte-2); --bs-btn-hover-border-color: var(--ss-notte-2); --bs-btn-active-bg: var(--ss-notte-3); }
.btn-alba { --bs-btn-color: var(--ss-bianco); --bs-btn-bg: var(--ss-alba); --bs-btn-border-color: var(--ss-alba); --bs-btn-hover-color: var(--ss-bianco); --bs-btn-hover-bg: var(--ss-alba-scuro); --bs-btn-hover-border-color: var(--ss-alba-scuro); --bs-btn-active-bg: var(--ss-alba-scuro); --bs-btn-active-color: var(--ss-bianco); --bs-btn-disabled-bg: var(--ss-alba); --bs-btn-disabled-color: var(--ss-bianco); }
.btn-outline-primary { --bs-btn-color: var(--ss-notte); --bs-btn-border-color: var(--ss-notte); --bs-btn-hover-bg: var(--ss-notte); --bs-btn-hover-border-color: var(--ss-notte); }
.form-control, .form-select { border-radius: 12px; border-width: 1.5px; min-height: 46px; }
.form-label { font-size: .85rem; font-weight: 600; color: var(--ss-muto); margin-bottom: .3rem; }

/* ---- logo ------------------------------------------------------------------ */
.ss-logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ss-bianco); font-family: "Outfit", sans-serif; font-weight: 700; font-size: 1.3rem; }
.ss-logo:hover { color: var(--ss-bianco); }
.ss-logo em { font-style: normal; color: var(--ss-ghiaccio-chiaro); }

/* ---- sito pubblico ----------------------------------------------------------- */
.ss-hero { background: var(--ss-notte); color: var(--ss-bianco); position: relative; overflow: hidden; }
.ss-hero .ss-monti { position: absolute; left: 0; bottom: 0; width: 100%; height: 260px; z-index: 1; }
.ss-hero > * { position: relative; z-index: 2; }
.ss-hero .ss-monti { z-index: 1; }
.ss-nav { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 0; }
.ss-nav-link { display: flex; flex-wrap: wrap; align-items: center; gap: 22px; font-weight: 500; }
.ss-nav-link a { color: var(--ss-su-scuro); text-decoration: none; }
.ss-nav-link a:hover, .ss-nav-link a.active { color: var(--ss-bianco); }
.ss-pill-chiara { border: 1.5px solid rgba(255, 255, 255, .5); padding: 9px 16px; border-radius: 999px; color: var(--ss-bianco) !important; }
.ss-pill-alba { background: var(--ss-alba); padding: 10px 18px; border-radius: 999px; color: var(--ss-bianco) !important; font-weight: 600; }
.ss-pill-alba:hover { background: var(--ss-alba-scuro); }
.ss-hero-testo { padding: 56px 0 200px; }
.ss-hero-testo .ss-occhiello { letter-spacing: 3px; text-transform: uppercase; color: var(--ss-ghiaccio-chiaro); font-weight: 600; font-size: .85rem; }
.ss-hero-testo h1 { font-size: clamp(2.3rem, 5.5vw, 4.2rem); font-weight: 800; line-height: 1.03; max-width: 760px; color: var(--ss-bianco); }
.ss-hero-testo p.lead { color: var(--ss-su-scuro); max-width: 560px; font-size: 1.15rem; }
.ss-hero-corta .ss-hero-testo { padding: 18px 0 110px; }
.ss-hero-corta .ss-hero-testo h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); }
.ss-hero-corta .ss-monti { height: 120px; }
.ss-hero-corta .ss-monti circle { display: none; }

.ss-cerca { background: var(--ss-bianco); border-radius: 20px; box-shadow: var(--ss-ombra); padding: 22px; margin-top: -84px; position: relative; z-index: 3; }
.ss-sezione { padding: 72px 0 24px; }
.ss-occhiello-blu { color: var(--ss-ghiaccio); font-weight: 600; letter-spacing: 2px; text-transform: uppercase; font-size: .8rem; margin-bottom: .4rem; }

.ss-card { background: var(--ss-bianco); border: 1px solid var(--ss-linea); border-radius: 20px; }
.ss-offerta { overflow: hidden; display: flex; flex-direction: column; height: 100%; }
.ss-offerta .ss-cielo { height: 130px; position: relative; overflow: hidden; }
.ss-offerta .ss-cielo svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.ss-cielo.cat-P { background: var(--ss-ghiaccio); }
.ss-cielo.cat-K { background: var(--ss-alba); }
.ss-cielo.cat-C { background: var(--ss-pino); }
.ss-etichetta { position: absolute; top: 14px; left: 14px; background: rgba(255, 255, 255, .95); color: var(--ss-notte); font-size: .75rem; font-weight: 700; padding: 5px 11px; border-radius: 999px; }
.ss-prezzo { font-family: "Outfit", sans-serif; font-weight: 700; font-size: 1.5rem; color: var(--ss-notte); }

.ss-avatar { width: 56px; height: 56px; border-radius: 50%; color: var(--ss-bianco); display: inline-flex; align-items: center; justify-content: center; font-family: "Outfit", sans-serif; font-weight: 700; font-size: 1.15rem; flex: none; }
.ss-avatar.piccolo { width: 38px; height: 38px; font-size: .85rem; }
.ss-chip { display: inline-block; font-size: .75rem; font-weight: 600; background: var(--ss-ghiaccio-velo); color: var(--ss-notte-2); padding: 4px 10px; border-radius: 999px; }

.ss-passi { background: var(--ss-notte); color: var(--ss-bianco); border-radius: 28px; padding: 48px 40px; }
.ss-passi p { color: var(--ss-su-scuro); }
.ss-passi .n { width: 46px; height: 46px; border-radius: 14px; background: var(--ss-notte-3); color: var(--ss-ghiaccio-chiaro); display: inline-flex; align-items: center; justify-content: center; font-family: "Outfit", sans-serif; font-weight: 700; font-size: 1.2rem; }
.ss-footer { background: #071A2E; color: var(--ss-su-scuro-muto); padding: 32px 0; margin-top: 72px; font-size: .9rem; }
.ss-footer a { color: var(--ss-su-scuro); }

/* ---- prenotazione -------------------------------------------------------- */
.ss-passi-pren { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; font-size: .9rem; }
.ss-passi-pren li { display: flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 999px; color: var(--ss-su-scuro-muto); }
.ss-passi-pren li .n { width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid currentColor; display: inline-flex; align-items: center; justify-content: center; font-size: .75rem; font-weight: 700; }
.ss-passi-pren li.fatto { background: var(--ss-notte-3); color: var(--ss-su-scuro); }
.ss-passi-pren li.fatto .n { background: #2E9E6E; border-color: #2E9E6E; color: var(--ss-bianco); }
.ss-passi-pren li.ora { background: var(--ss-bianco); color: var(--ss-notte); font-weight: 600; }
.ss-passi-pren li.ora .n { background: var(--ss-alba); border-color: var(--ss-alba); color: var(--ss-bianco); }

.ss-giorni { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
.ss-giorno { min-height: 80px; border-radius: 14px; padding: 8px 2px; text-align: center; border: 1.5px solid var(--ss-linea-2); background: var(--ss-bianco); color: var(--ss-notte); text-decoration: none; display: block; }
.ss-giorno:hover { border-color: var(--ss-ghiaccio-chiaro); color: var(--ss-notte); }
.ss-giorno .dow { display: block; font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; opacity: .8; }
.ss-giorno .num { display: block; font-family: "Outfit", sans-serif; font-size: 1.5rem; font-weight: 700; }
.ss-giorno .mese { display: block; font-size: .7rem; }
.ss-giorno.attivo { background: var(--ss-notte); border-color: var(--ss-notte); color: var(--ss-bianco); }
.ss-giorno.chiuso { opacity: .45; pointer-events: none; }

.ss-slot { min-width: 74px; height: 44px; border-radius: 12px; font-size: .9rem; font-weight: 600; border: 1.5px solid var(--ss-ghiaccio-chiaro); background: var(--ss-bianco); color: var(--ss-notte-2); }
.ss-slot:hover { background: var(--ss-ghiaccio-velo); }
.ss-slot.scelto { background: var(--ss-alba); border-color: var(--ss-alba); color: var(--ss-bianco); }
.ss-slot:disabled { border: 1.5px dashed var(--ss-linea-2); background: var(--ss-grigio-velo); color: #8A99A8; text-decoration: line-through; }

.ss-riepilogo { position: sticky; top: 16px; overflow: hidden; }
.ss-riepilogo .testa { background: var(--ss-notte-2); color: var(--ss-bianco); padding: 18px 22px; }
.ss-riepilogo .testa h2 { color: var(--ss-bianco); font-size: 1.2rem; margin: 0; }
.ss-riepilogo dl { display: grid; grid-template-columns: auto 1fr; gap: 8px 14px; margin: 0; }
.ss-riepilogo dt { color: var(--ss-muto); font-weight: 400; }
.ss-riepilogo dd { margin: 0; text-align: right; font-weight: 600; }
.ss-totale { font-family: "Outfit", sans-serif; font-weight: 700; font-size: 1.8rem; color: var(--ss-notte); }

/* ---- area riservata ------------------------------------------------------ */
.ss-app { display: flex; flex-wrap: wrap; min-height: 100vh; }
.ss-menu { flex: 1 1 240px; max-width: 100%; background: var(--ss-notte); color: var(--ss-su-scuro); padding: 22px 14px; display: flex; flex-direction: column; gap: 4px; }
.ss-menu .ss-logo { padding: 0 10px 18px; font-size: 1.1rem; }
.ss-menu a.voce { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-radius: 12px; color: var(--ss-su-scuro); text-decoration: none; font-weight: 500; }
.ss-menu a.voce:hover { background: rgba(255, 255, 255, .06); color: var(--ss-bianco); }
.ss-menu a.voce.active { background: var(--ss-notte-3); color: var(--ss-bianco); font-weight: 600; }
.ss-menu a.voce i { font-size: 1.05rem; }
.ss-menu .chi { margin-top: auto; padding: 16px 10px 0; border-top: 1px solid var(--ss-notte-3); display: flex; align-items: center; gap: 10px; }
.ss-menu .chi .nome { color: var(--ss-bianco); font-weight: 600; font-size: .9rem; }
.ss-menu .chi .ruolo { font-size: .75rem; color: var(--ss-su-scuro-muto); }
.ss-menu .chi a { color: var(--ss-su-scuro-muto); }
.ss-contenuto { flex: 999 1 560px; min-width: 0; padding: 26px 30px 40px; }
@media (max-width: 860px) {
  .ss-menu { flex-direction: row; flex-wrap: wrap; align-items: center; }
  .ss-menu .ss-logo { padding: 0 10px; width: 100%; }
  .ss-menu .chi { margin-top: 0; border-top: 0; width: 100%; }
  .ss-contenuto { padding: 20px 16px 32px; }
}

.ss-kpi { background: var(--ss-bianco); border: 1px solid var(--ss-linea); border-radius: var(--ss-raggio); padding: 16px 20px; height: 100%; }
.ss-kpi .l { font-size: .82rem; color: var(--ss-muto); font-weight: 600; }
.ss-kpi .v { font-family: "Outfit", sans-serif; font-size: 2rem; font-weight: 700; color: var(--ss-notte); line-height: 1.2; }
.ss-kpi .s { font-size: .82rem; color: var(--ss-pino); font-weight: 600; }

.ss-pannello { background: var(--ss-bianco); border: 1px solid var(--ss-linea); border-radius: 20px; }
.ss-pannello > .testa { padding: 16px 20px; border-bottom: 1px solid var(--ss-linea); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.ss-pannello > .testa h2 { font-size: 1.1rem; margin: 0; }
.ss-pannello > .corpo { padding: 18px 20px; }

.ss-prossima .testa { background: var(--ss-ghiaccio); color: var(--ss-bianco); padding: 16px 20px; border-radius: 20px 20px 0 0; }
.ss-prossima .testa .occh { font-size: .72rem; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: #DCEBFA; }
.ss-prossima .testa .quando { font-family: "Outfit", sans-serif; font-size: 1.3rem; font-weight: 700; }
.ss-prossima dl { display: grid; grid-template-columns: 96px 1fr; gap: 8px 12px; margin: 0; font-size: .92rem; }
.ss-prossima dt { color: var(--ss-muto); font-weight: 400; }
.ss-prossima dd { margin: 0; font-weight: 600; }

.ss-tabella { width: 100%; border-collapse: collapse; font-size: .92rem; }
.ss-tabella th { background: var(--ss-neve); color: var(--ss-muto); font-weight: 600; text-align: left; padding: 11px 14px; white-space: nowrap; }
.ss-tabella td { padding: 12px 14px; border-top: 1px solid var(--ss-linea); vertical-align: middle; }
.ss-tabella tr.annullata td { color: #8A99A8; text-decoration: line-through; }

.ss-stato { display: inline-block; font-weight: 700; font-size: .75rem; padding: 4px 10px; border-radius: 999px; white-space: nowrap; }
.ss-stato.ok { background: var(--ss-pino-velo); color: var(--ss-pino); }
.ss-stato.ko { background: var(--ss-alba-velo); color: #8A2E0E; }
.ss-stato.attesa { background: var(--ss-giallo-velo); color: var(--ss-giallo-testo); }
.ss-stato.info { background: var(--ss-ghiaccio-velo); color: var(--ss-notte-2); }

.ss-legenda { display: flex; flex-wrap: wrap; gap: 16px; font-size: .82rem; color: var(--ss-muto); }
.ss-legenda span::before { content: ""; display: inline-block; width: 12px; height: 12px; border-radius: 4px; margin-right: 6px; vertical-align: -1px; background: var(--c); }

/* colori per categoria di lezione (agenda, planning, legenda) */
.cat-bg-P { --c: var(--ss-ghiaccio); }
.cat-bg-C { --c: var(--ss-pino); }
.cat-bg-K { --c: var(--ss-sole); }
.cat-bg-X { --c: var(--ss-grigio-velo); }

/* FullCalendar con i colori della scuola */
.fc { --fc-border-color: var(--ss-linea); --fc-today-bg-color: #F2F8FD; --fc-button-bg-color: var(--ss-bianco); --fc-button-border-color: var(--ss-linea-2); --fc-button-text-color: var(--ss-notte); --fc-button-hover-bg-color: var(--ss-ghiaccio-velo); --fc-button-hover-border-color: var(--ss-linea-2); --fc-button-active-bg-color: var(--ss-notte); --fc-button-active-border-color: var(--ss-notte); font-size: .88rem; }
.fc .fc-button { border-radius: 10px; font-weight: 600; text-transform: capitalize; }
.fc .fc-button-primary:not(:disabled).fc-button-active { color: var(--ss-bianco); }
.fc .fc-toolbar-title { font-family: "Outfit", sans-serif; font-size: 1.25rem; color: var(--ss-notte); }
.fc-event { border-radius: 8px !important; border: 0 !important; padding: 2px 4px; cursor: pointer; }
.fc-event.indisponibile { background: repeating-linear-gradient(45deg, var(--ss-grigio-velo), var(--ss-grigio-velo) 6px, #F3F6F9 6px, #F3F6F9 12px) !important; color: var(--ss-muto) !important; }

/* planning della segreteria */
.ss-planning { min-width: 760px; }
.ss-planning .riga { display: flex; border-top: 1px solid var(--ss-linea); min-height: 68px; }
.ss-planning .riga.testa { background: var(--ss-neve); min-height: 0; border-top: 0; }
.ss-planning .chi { width: 180px; flex: none; padding: 10px 16px; display: flex; align-items: center; gap: 10px; }
.ss-planning .ore { flex: 1; position: relative; }
.ss-planning .ore .tacca { position: absolute; top: 0; bottom: 0; border-left: 1px solid var(--ss-linea); }
.ss-planning .riga.testa .ore .tacca { font-size: .75rem; font-weight: 700; color: var(--ss-muto); padding: 10px 6px; position: absolute; }
.ss-blocco { position: absolute; top: 7px; bottom: 7px; border-radius: 10px; padding: 5px 9px; overflow: hidden; font-size: .78rem; line-height: 1.25; text-decoration: none; color: var(--ss-bianco); background: var(--c); }
.ss-blocco:hover { filter: brightness(1.08); color: var(--ss-bianco); }
.ss-blocco.cat-bg-K { color: #5E3300; }
.ss-blocco.indisp { background: repeating-linear-gradient(45deg, var(--ss-grigio-velo), var(--ss-grigio-velo) 6px, #F3F6F9 6px, #F3F6F9 12px); color: var(--ss-muto); }
.ss-blocco strong, .ss-blocco span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.ss-da-assegnare { border: 1.5px dashed #E2B9A6; background: #FFF7F3; border-radius: 14px; padding: 12px; }

/* pagina di accesso */
.ss-accesso { min-height: 100vh; display: flex; flex-wrap: wrap; }
.ss-accesso .lato { flex: 1 1 420px; background: var(--ss-notte); color: var(--ss-bianco); position: relative; overflow: hidden; padding: 40px; display: flex; flex-direction: column; justify-content: center; min-height: 280px; }
.ss-accesso .lato h1 { color: var(--ss-bianco); font-size: clamp(1.8rem, 3.5vw, 2.8rem); font-weight: 800; max-width: 460px; position: relative; z-index: 2; }
.ss-accesso .lato p { color: var(--ss-su-scuro); max-width: 420px; position: relative; z-index: 2; }
.ss-accesso .lato .ss-monti { position: absolute; left: 0; bottom: 0; width: 100%; height: 200px; }
.ss-accesso .modulo { flex: 1 1 420px; display: flex; align-items: center; justify-content: center; padding: 40px 20px; }
.ss-accesso .modulo .box { width: 100%; max-width: 400px; }

@media print {
  .ss-menu, .no-print { display: none !important; }
  .ss-contenuto { padding: 0; }
}

a.ss-slot { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
a.ss-slot.scelto { color: var(--ss-bianco); }
.fc a { color: inherit; text-decoration: none; }
.fc-event.svolta { opacity: .65; }
.ss-iniziale { display: inline-block; }
.ss-iniziale::first-letter { text-transform: uppercase; }