/* =============================================================================
   PENTAGRAMMA — skin grafica MusicaSuite (2026-08-24)

   Come funziona: questo foglio viene caricato PER ULTIMO in <head>, quindi le
   sue regole vincono sui <style> delle pagine a parità di specificità. Ridefinisce
   i token (colori, caratteri, raggi, ombre) e riveste i componenti ricorrenti:
   card, pulsanti, campi, tabelle, modali, badge.

   L'accento resta quello del tenant: --primary arriva dal tema, tutto il resto
   si costruisce intorno. Cambiando tenant cambia la pagina, non il codice.

   Per tornare indietro: togliere il <link> a questo file dai template
   (backup completo in backups/views/pre-restyle-*).
   ============================================================================= */

:root{
  /* accento: eredita dal tenant, con fallback al rosso MusicaSuite */
  --pg-accent: var(--primary, #eb3d24);
  --pg-accent-ink: color-mix(in srgb, var(--pg-accent) 72%, #2b0b04);
  --pg-accent-wash: color-mix(in srgb, var(--pg-accent) 10%, white);

  /* inchiostro e carta: palette fredda "carta da pentagramma" */
  --pg-ink: #171420;
  --pg-ink-2: #3b3947;
  --pg-muted: #6b6f7d;
  --pg-paper: #eef0f5;
  --pg-card: #ffffff;
  --pg-line: #d5d9e3;
  --pg-line-soft: #e6e9f0;
  --pg-ok: #1f7a5c;
  --pg-warn: #b0620a;
  --pg-danger: #b3261e;

  --pg-r-s: 10px;
  --pg-r-m: 16px;
  --pg-r-l: 22px;
  --pg-shadow: 0 1px 2px rgba(23,20,32,.05), 0 8px 24px -12px rgba(23,20,32,.18);
  --pg-shadow-lift: 0 2px 6px rgba(23,20,32,.07), 0 18px 40px -18px rgba(23,20,32,.28);

  --pg-display: "Bricolage Grotesque", "Inter", system-ui, -apple-system, sans-serif;
  --pg-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --pg-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* ----------------------------------------------------------------- base ---- */
body{
  font-family: var(--pg-body);
  color: var(--pg-ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, h5,
.card-title, .section-title, .modal-title{
  font-family: var(--pg-display);
  letter-spacing: -.02em;
  font-weight: 600;
}
h1{ letter-spacing: -.035em; }

/* numeri, orari e importi: si leggono come un tabellone, non come prosa */
.mono, .amount, .price, .time, .orario, .importo,
td.numeric, .stat-number, .stat-value, .kpi-value{
  font-family: var(--pg-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
}

/* messa a fuoco sempre visibile, in tutta l'app */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible{
  outline: 2.5px solid var(--pg-accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---------------------------------------------------------------- superfici -- */
.card, .pt-card, .info-card, .stat-card, .dashboard-card,
.section-card, .box, .panel, .widget{
  background: var(--pg-card);
  border: 1px solid var(--pg-line-soft);
  border-radius: var(--pg-r-l);
  box-shadow: var(--pg-shadow);
}
.card:hover, .pt-card:hover, .info-card:hover, .dashboard-card:hover{
  border-color: var(--pg-line);
  box-shadow: var(--pg-shadow-lift);
}
.card-header, .pt-card .card-header{
  border-bottom: 1px solid var(--pg-line-soft);
  background: transparent;
}

/* ---------------------------------------------------------------- pulsanti -- */
.btn, .pt-btn, button.primary, .button, .btn-primary{
  font-family: var(--pg-body);
  font-weight: 600;
  border-radius: 999px;
  transition: background .16s ease, color .16s ease, border-color .16s ease, transform .16s ease;
}
.btn:hover, .pt-btn:hover, .button:hover{ transform: translateY(-1px); }
.btn-primary, button.primary, .pt-btn.primary{
  background: var(--pg-ink);
  border-color: var(--pg-ink);
  color: #fff;
}
.btn-primary:hover, button.primary:hover, .pt-btn.primary:hover{
  background: var(--pg-accent);
  border-color: var(--pg-accent);
}
.btn-secondary, .pt-btn.sec, .btn.ghost{
  background: transparent;
  color: var(--pg-ink-2);
  border: 1px solid var(--pg-line);
}
.btn-secondary:hover, .pt-btn.sec:hover, .btn.ghost:hover{
  border-color: var(--pg-ink-2);
  color: var(--pg-ink);
}
.btn-danger{ background: var(--pg-danger); border-color: var(--pg-danger); color:#fff; }

/* ------------------------------------------------------------------- campi -- */
input[type="text"], input[type="email"], input[type="password"], input[type="number"],
input[type="date"], input[type="time"], input[type="search"], input[type="tel"],
select, textarea, .form-control, .pt-field input, .pt-field select, .pt-field textarea{
  font-family: var(--pg-body);
  border-radius: var(--pg-r-s);
  border: 1px solid var(--pg-line);
  background: var(--pg-card);
  color: var(--pg-ink);
  transition: border-color .16s ease, box-shadow .16s ease;
}
input:focus, select:focus, textarea:focus, .form-control:focus{
  border-color: var(--pg-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--pg-accent) 16%, transparent);
  outline: none;
}
label, .form-label, .pt-field label{
  font-weight: 500;
  color: var(--pg-ink-2);
}
::placeholder{ color: color-mix(in srgb, var(--pg-muted) 75%, white); }

/* ---------------------------------------------------------------- tabelle --- */
table th, .tabulator .tabulator-header .tabulator-col{
  font-family: var(--pg-body);
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--pg-ink-2);
}
.tabulator{ border-radius: var(--pg-r-m); border-color: var(--pg-line-soft); }
.tabulator .tabulator-row:hover{ background: var(--pg-accent-wash); }

/* ---------------------------------------------------------------- modali ---- */
.modal-content, .pt-modal, .modal-box{
  border-radius: var(--pg-r-l);
  border: 1px solid var(--pg-line-soft);
  box-shadow: var(--pg-shadow-lift);
}

/* ---------------------------------------------------------------- badge ----- */
.badge, .pt-badge, .tag, .chip{
  font-family: var(--pg-mono);
  font-weight: 700;
  font-size: 11.5px;
  border-radius: 999px;
  letter-spacing: .02em;
}

/* =============================================================================
   MENÙ A ONDE — la barra delle sezioni.
   Ogni voce ha il suo equalizzatore: fermo a riposo, "suona" al passaggio del
   mouse o sulla sezione aperta. È l'unico movimento della pagina.
   ============================================================================= */
/* Il dock: ancorato in fondo, sempre visibile, come la barra di un lettore.
   Contiene solo le scelte che si usano davvero; le voci secondarie spariscono
   sugli schermi stretti (restano raggiungibili dalle card della pagina). */
.pg-wavenav{
  position: fixed;
  left: 50%;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  z-index: 1200;
  display: flex;
  gap: 6px;
  padding: 8px;
  margin: 0;
  max-width: min(calc(100vw - 24px), 940px);
  overflow-x: auto;
  scrollbar-width: none;
  background: color-mix(in srgb, var(--pg-card) 86%, transparent);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  border: 1px solid var(--pg-line-soft);
  border-radius: 999px;
  box-shadow: 0 2px 8px rgba(23,20,32,.08), 0 22px 48px -22px rgba(23,20,32,.45);
}
/* spazio in fondo alla pagina, così il dock non copre i contenuti.
   Nell'admin il dock non c'è (la navigazione è il menù laterale): niente spazio. */
body:not(.pg-admin){ padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }
.pg-wavenav::-webkit-scrollbar{ display: none; }
.pg-wavenav button{
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  cursor: pointer;
  white-space: nowrap;
  background: var(--pg-card);
  border: 1px solid var(--pg-line-soft);
  border-radius: 999px;
  padding: 9px 15px 9px 12px;
  font: 500 13.5px/1 var(--pg-body);
  color: var(--pg-ink-2);
  transition: border-color .16s ease, color .16s ease, background .16s ease;
}
.pg-wavenav button:hover{ border-color: var(--pg-line); color: var(--pg-ink); transform: none; }
.pg-wavenav button[aria-current="true"]{
  background: var(--pg-ink);
  border-color: var(--pg-ink);
  color: #fff;
}
.pg-wave{ display: inline-flex; align-items: flex-end; gap: 2.5px; height: 14px; }
.pg-wave i{
  display: block;
  width: 2.5px;
  height: 4px;
  border-radius: 2px;
  background: currentColor;
  opacity: .55;
  transform-origin: bottom;
}
.pg-wavenav button:hover .pg-wave i,
.pg-wavenav button:focus-visible .pg-wave i,
.pg-wavenav button[aria-current="true"] .pg-wave i{
  opacity: 1;
  animation: pg-eq 900ms ease-in-out infinite;
}
.pg-wave i:nth-child(1){ animation-delay: 0ms; }
.pg-wave i:nth-child(2){ animation-delay: 120ms; }
.pg-wave i:nth-child(3){ animation-delay: 240ms; }
.pg-wave i:nth-child(4){ animation-delay: 80ms; }
.pg-wave i:nth-child(5){ animation-delay: 300ms; }
@keyframes pg-eq{
  0%, 100%{ height: 4px; }
  35%{ height: 14px; }
  60%{ height: 8px; }
}
.pg-wavenav .pg-count{
  font: 700 11px/1 var(--pg-mono);
  padding: 3px 6px;
  border-radius: 999px;
  background: var(--pg-accent);
  color: #fff;
}
.pg-wavenav button[aria-current="true"] .pg-count{ background: #fff; color: var(--pg-ink); }

@media (max-width: 760px){
  .pg-wavenav{
    left: 0; right: 0; bottom: 0; transform: none;
    max-width: none; border-radius: 18px 18px 0 0;
    border-left: 0; border-right: 0; border-bottom: 0;
    padding: 8px 10px calc(8px + env(safe-area-inset-bottom, 0px));
    justify-content: flex-start;
  }
  .pg-wavenav button{ padding: 9px 13px 9px 11px; font-size: 13px; }
}
/* schermi stretti: si nascondono le voci secondarie SOLO quando il dock fa da
   indice della pagina. In modalita' pagine ogni voce e' una schermata a se':
   nasconderla vorrebbe dire renderla irraggiungibile, quindi il dock scorre. */
@media (max-width: 560px){
  .pg-wavenav:not([data-pages]) button:not([data-primary]){ display: none; }
  /* in modalita' pagine ci stanno tutte: si stringono invece di scorrere, cosi'
     non resta nessuna icona nascosta oltre il bordo */
  .pg-wavenav[data-pages]{
    justify-content: space-between;
    overflow-x: visible;
    padding: 4px 6px calc(4px + env(safe-area-inset-bottom, 0px));
    gap: 0;
  }
  .pg-wavenav[data-pages] button{
    flex: 1 1 0; min-width: 0; max-width: none; width: auto;
    padding: 6px 2px; min-height: 44px;
  }
  .pg-wavenav[data-pages] .pg-ico svg{ width: 20px; height: 20px; }
  .pg-wavenav[data-pages] button[aria-current="true"]{ transform: translateY(-9px); }
}
@media (prefers-reduced-motion: reduce){
  .pg-wave i{ animation: none !important; height: 9px; }
  .btn, .pt-btn, .card, .pt-card{ transition: none !important; }
}

/* =============================================================================
   PORTALE ALLIEVO — la veste del prototipo applicata alle classi del template.
   Nessuna modifica al markup: qui si riveste ciò che c'è già.
   Spegnibile al volo con ?skin=off.
   ============================================================================= */

/* la carta fredda al posto del gradiente di sfondo */
body.pg-student{
  background: var(--pg-paper) !important;
  background-image: none !important;
}

/* testata: una riga sottile, non una fascia colorata */
body.pg-student .header{
  background: color-mix(in srgb, var(--pg-card) 92%, transparent) !important;
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--pg-line-soft);
  box-shadow: none;
}
body.pg-student .logo{ font-family: var(--pg-display); font-weight: 800; letter-spacing: -.02em; color: var(--pg-ink); }
body.pg-student .user-details h4{ font-family: var(--pg-display); font-weight: 600; color: var(--pg-ink); }
body.pg-student .user-details p{ color: var(--pg-muted); }
body.pg-student .user-avatar{
  background: var(--pg-ink) !important; color: #fff !important;
  font-family: var(--pg-display); font-weight: 700;
}
body.pg-student .logout-btn{
  background: transparent !important; color: var(--pg-ink-2) !important;
  border: 1px solid var(--pg-line) !important; border-radius: 999px;
}
body.pg-student .logout-btn:hover{ border-color: var(--pg-ink-2) !important; color: var(--pg-ink) !important; }

/* saluto: tipografia, non un blocco in gradiente */
body.pg-student .welcome-section{
  background: transparent !important;
  background-image: none !important;
  color: var(--pg-ink) !important;
  box-shadow: none !important;
  padding: 8px 0 4px !important;
  border-radius: 0 !important;
  border-bottom: 1px solid var(--pg-line-soft);
  margin-bottom: 26px !important;
}
body.pg-student .welcome-section::before{ display: none !important; }
body.pg-student .welcome-section h1{
  font-family: var(--pg-display);
  font-weight: 800;
  letter-spacing: -.035em;
  line-height: 1.03;
  font-size: clamp(28px, 5.2vw, 44px);
  color: var(--pg-ink);
  margin: 0 0 6px;
}
body.pg-student .welcome-section p{ color: var(--pg-muted) !important; font-size: 15px; margin: 0 0 14px; }

/* le scorciatoie diventano riquadri sobri, allineati a sinistra */
body.pg-student .quick-actions{
  grid-template-columns: repeat(auto-fill, minmax(252px, 1fr));
  gap: 12px;
}
body.pg-student .action-card{
  background: var(--pg-card) !important;
  border: 1px solid var(--pg-line-soft);
  border-radius: var(--pg-r-m) !important;
  box-shadow: none !important;
  text-align: left !important;
  padding: 15px 16px !important;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  column-gap: 13px;
  align-items: start;
  animation: none !important;
  transition: border-color .16s ease, transform .16s ease, box-shadow .16s ease;
}
body.pg-student .action-card:hover{
  transform: translateY(-2px);
  border-color: var(--pg-line);
  box-shadow: var(--pg-shadow) !important;
}
body.pg-student .action-card .action-icon{
  grid-row: 1 / span 2;
  font-size: 20px;
  line-height: 1.25;
  margin: 0 !important;
  display: block;
}
body.pg-student .action-card h3{
  font-family: var(--pg-display); font-weight: 600; font-size: 15px;
  letter-spacing: -.01em; margin: 0 0 2px !important; color: var(--pg-ink);
}
body.pg-student .action-card p{ font-size: 13px; color: var(--pg-muted) !important; margin: 0 !important; line-height: 1.45; }

/* card e sezioni: bordo sottile, ombra bassa, angoli morbidi */
body.pg-student .card,
body.pg-student .documents-section,
body.pg-student .pt-card{
  border-radius: var(--pg-r-l) !important;
  border: 1px solid var(--pg-line-soft);
  box-shadow: var(--pg-shadow) !important;
  animation: none !important;
}
body.pg-student .card-header{
  border-bottom: 1px solid var(--pg-line-soft) !important;
  background: transparent !important;
}
body.pg-student .card-header h3{ font-family: var(--pg-display); font-weight: 600; letter-spacing: -.01em; }

/* orari e importi in mono, come sul tabellone */
body.pg-student .rata-card .importo,
body.pg-student .pt-lez .ora,
body.pg-student .pt-counter b{ font-family: var(--pg-mono); font-variant-numeric: tabular-nums; }

@media (max-width: 760px){
  body.pg-student .welcome-section{ margin-bottom: 18px !important; }
  body.pg-student .quick-actions{ grid-template-columns: 1fr; }
}

/* =============================================================================
   VESTE COMPLETA — modali, form, liste, pagamenti, calendario, stati vuoti.
   Vale per i tre portali: body.pg-student, body.pg-teacher, body.pg-admin.
   ============================================================================= */
body.pg-student, body.pg-teacher, body.pg-admin{ --pg-on: 1; }

/* ------------------------------------------------------------------ modali -- */
body[class*="pg-"] .modal{ backdrop-filter: blur(3px); }
body[class*="pg-"] .modal-content{
  border-radius: var(--pg-r-l) !important;
  border: 1px solid var(--pg-line-soft) !important;
  box-shadow: var(--pg-shadow-lift) !important;
  background: var(--pg-card) !important;
}
body[class*="pg-"] .modal-header{
  background: transparent !important;
  border-bottom: 1px solid var(--pg-line-soft) !important;
  color: var(--pg-ink) !important;
}
body[class*="pg-"] .modal-header h2,
body[class*="pg-"] .modal-header h3,
body[class*="pg-"] .modal-title{
  font-family: var(--pg-display) !important;
  font-weight: 600 !important;
  letter-spacing: -.015em;
  color: var(--pg-ink) !important;
}
body[class*="pg-"] .close-btn,
body[class*="pg-"] .modal-close{
  background: transparent !important;
  color: var(--pg-muted) !important;
  border: 1px solid transparent !important;
  border-radius: 999px !important;
  transition: background .16s ease, color .16s ease;
}
body[class*="pg-"] .close-btn:hover,
body[class*="pg-"] .modal-close:hover{
  background: var(--pg-line-soft) !important;
  color: var(--pg-ink) !important;
}

/* -------------------------------------------------------------------- form -- */
body[class*="pg-"] .form-group{ margin-bottom: 14px; }
body[class*="pg-"] .form-label,
body[class*="pg-"] .form-group label{
  font-family: var(--pg-body) !important;
  font-weight: 500 !important;
  font-size: 13px !important;
  color: var(--pg-ink-2) !important;
  letter-spacing: 0;
}
body[class*="pg-"] .form-input,
body[class*="pg-"] .form-control,
body[class*="pg-"] .qd-inp,
body[class*="pg-"] .pt-field input,
body[class*="pg-"] .pt-field select,
body[class*="pg-"] .pt-field textarea,
body[class*="pg-"] .tp-field input,
body[class*="pg-"] .tp-field select,
body[class*="pg-"] .tp-field textarea{
  border-radius: var(--pg-r-s) !important;
  border: 1px solid var(--pg-line) !important;
  background: var(--pg-card) !important;
  font-family: var(--pg-body) !important;
  color: var(--pg-ink) !important;
  box-shadow: none !important;
}
body[class*="pg-"] .form-input:focus,
body[class*="pg-"] .form-control:focus,
body[class*="pg-"] .qd-inp:focus,
body[class*="pg-"] .pt-field input:focus,
body[class*="pg-"] .tp-field input:focus{
  border-color: var(--pg-accent) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--pg-accent) 16%, transparent) !important;
}

/* ---------------------------------------------------------------- pulsanti -- */
body[class*="pg-"] .btn,
body[class*="pg-"] .pt-btn,
body[class*="pg-"] .tp-btn,
body[class*="pg-"] .pa-btn{
  border-radius: 999px !important;
  font-family: var(--pg-body) !important;
  font-weight: 600 !important;
  box-shadow: none !important;
  transition: background .16s ease, border-color .16s ease, color .16s ease, transform .16s ease;
}
body[class*="pg-"] .btn-primary,
body[class*="pg-"] .pt-btn.primary,
body[class*="pg-"] .tp-btn.primary,
body[class*="pg-"] .pa-btn.primary{
  background: var(--pg-ink) !important;
  border: 1px solid var(--pg-ink) !important;
  color: #fff !important;
}
body[class*="pg-"] .btn-primary:hover,
body[class*="pg-"] .pt-btn.primary:hover,
body[class*="pg-"] .tp-btn.primary:hover{
  background: var(--pg-accent) !important;
  border-color: var(--pg-accent) !important;
  transform: translateY(-1px);
}
/* i pulsanti dell'hero della home restano fuori: li' il fondo puo' essere scuro
   e il colore lo decide il tema del tenant (theme_heroButtonTextColor) */
body[class*="pg-"] .btn-secondary:not(.hero .btn-secondary):not(.hero-buttons .btn-secondary),
body[class*="pg-"] .pt-btn.sec,
body[class*="pg-"] .tp-btn.sec{
  background: transparent !important;
  color: var(--pg-ink-2) !important;
  border: 1px solid var(--pg-line) !important;
}
body[class*="pg-"] .btn-secondary:not(.hero .btn-secondary):not(.hero-buttons .btn-secondary):hover,
body[class*="pg-"] .pt-btn.sec:hover,
body[class*="pg-"] .tp-btn.sec:hover{
  border-color: var(--pg-ink-2) !important;
  color: var(--pg-ink) !important;
  transform: translateY(-1px);
}
body[class*="pg-"] .btn-sm{ padding: 7px 13px !important; font-size: 12.5px !important; }

/* ------------------------------------------------------- righe di dettaglio -- */
body[class*="pg-"] .info-item,
body[class*="pg-"] .detail-row,
body[class*="pg-"] .payment-item,
body[class*="pg-"] .pt-item,
body[class*="pg-"] .tp-box{
  background: var(--pg-card) !important;
  border: 1px solid var(--pg-line-soft) !important;
  border-radius: var(--pg-r-m) !important;
  box-shadow: none !important;
}
body[class*="pg-"] .info-label,
body[class*="pg-"] .detail-label{
  font-size: 12px !important;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--pg-muted) !important;
  font-weight: 500 !important;
}
body[class*="pg-"] .info-value,
body[class*="pg-"] .detail-value{
  font-family: var(--pg-body) !important;
  color: var(--pg-ink) !important;
  font-weight: 500 !important;
}
body[class*="pg-"] .pt-muted,
body[class*="pg-"] .tp-muted,
body[class*="pg-"] .tpa-empty{
  color: var(--pg-muted) !important;
  font-family: var(--pg-body) !important;
}

/* ------------------------------------------------------------- pagamenti ---- */
body[class*="pg-"] .payment-item{
  padding: 14px 16px !important;
  transition: border-color .16s ease, box-shadow .16s ease;
}
body[class*="pg-"] .payment-item:hover{ border-color: var(--pg-line) !important; box-shadow: var(--pg-shadow) !important; }
body[class*="pg-"] .rata-card{
  border-radius: var(--pg-r-m) !important;
  border: 1px solid var(--pg-line-soft) !important;
  background: var(--pg-card) !important;
  box-shadow: none !important;
}
body[class*="pg-"] .rata-card.selected{
  border-color: var(--pg-accent) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--pg-accent) 14%, transparent) !important;
}
body[class*="pg-"] .rata-card.pagata{ background: color-mix(in srgb, var(--pg-ok) 6%, white) !important; }

/* --------------------------------------------------------- calendario/lezioni */
body[class*="pg-"] .pt-lez,
body[class*="pg-"] .pt-counter,
body[class*="pg-"] .pt-req{
  border-radius: var(--pg-r-m) !important;
  border: 1px solid var(--pg-line-soft) !important;
  background: var(--pg-card) !important;
}
body[class*="pg-"] .pt-legend{ color: var(--pg-muted) !important; font-size: 12.5px; }
body[class*="pg-"] .pt-dot{ border-radius: 3px !important; }
body[class*="pg-"] .pt-nav-btn{
  border-radius: 9px !important;
  border: 1px solid var(--pg-line) !important;
  background: var(--pg-card) !important;
  color: var(--pg-ink-2) !important;
}
body[class*="pg-"] .pt-nav-btn:hover{ border-color: var(--pg-ink-2) !important; }

/* ------------------------------------------------------------------ badge --- */
body[class*="pg-"] .badge,
body[class*="pg-"] .pt-badge,
body[class*="pg-"] .tm-chip,
body[class*="pg-"] .tag{
  font-family: var(--pg-mono) !important;
  font-weight: 700 !important;
  border-radius: 999px !important;
  letter-spacing: .02em;
}

/* ----------------------------------------------------------------- tabelle -- */
body[class*="pg-"] table{ border-collapse: separate; border-spacing: 0; }
body[class*="pg-"] table th{
  font-family: var(--pg-body) !important;
  font-weight: 600 !important;
  font-size: 12.5px !important;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--pg-muted) !important;
  background: transparent !important;
  border-bottom: 1px solid var(--pg-line) !important;
}
body[class*="pg-"] table td{ border-bottom: 1px solid var(--pg-line-soft) !important; }
body[class*="pg-"] table tbody tr:hover td{ background: var(--pg-accent-wash) !important; }

/* ------------------------------------------------------------ stati vuoti --- */
body[class*="pg-"] .empty-state,
body[class*="pg-"] .no-data,
body[class*="pg-"] .tpa-empty{
  color: var(--pg-muted) !important;
  font-size: 14px;
}

/* =============================================================================
   PORTALE DOCENTE — stessa veste dell'allievo sulle sue classi.
   ============================================================================= */
body.pg-teacher{ background: var(--pg-paper) !important; background-image: none !important; }
body.pg-teacher .header{
  background: color-mix(in srgb, var(--pg-card) 92%, transparent) !important;
  color: var(--pg-ink) !important;
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--pg-line-soft);
  box-shadow: none !important;
}
body.pg-teacher .header *, body.pg-teacher .logo{ color: var(--pg-ink) !important; }
body.pg-teacher .logo{ font-family: var(--pg-display); font-weight: 800; letter-spacing: -.02em; }
body.pg-teacher .welcome-section{
  background: transparent !important;
  background-image: none !important;
  color: var(--pg-ink) !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  border-bottom: 1px solid var(--pg-line-soft);
  padding: 8px 0 14px !important;
  margin-bottom: 24px !important;
}
body.pg-teacher .welcome-section *{ color: inherit !important; }
body.pg-teacher .welcome-section h1{
  font-family: var(--pg-display); font-weight: 800; letter-spacing: -.035em;
  font-size: clamp(26px, 4.6vw, 40px); line-height: 1.05; color: var(--pg-ink) !important;
}
body.pg-teacher .welcome-section p{ color: var(--pg-muted) !important; }
body.pg-teacher .action-card{
  background: var(--pg-card) !important;
  border: 1px solid var(--pg-line-soft) !important;
  border-radius: var(--pg-r-m) !important;
  box-shadow: none !important;
  text-align: left !important;
  padding: 15px 16px !important;
  display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto;
  column-gap: 13px; align-items: start; animation: none !important;
}
body.pg-teacher .action-card:hover{ transform: translateY(-2px); border-color: var(--pg-line) !important; box-shadow: var(--pg-shadow) !important; }
body.pg-teacher .action-card .action-icon{ grid-row: 1 / span 2; font-size: 20px; margin: 0 !important; }
body.pg-teacher .action-card h3{ font-family: var(--pg-display); font-weight: 600; font-size: 15px; margin: 0 0 2px !important; }
body.pg-teacher .action-card p{ font-size: 13px; color: var(--pg-muted) !important; margin: 0 !important; }
body.pg-teacher .card, body.pg-teacher .tp-card{
  border-radius: var(--pg-r-l) !important;
  border: 1px solid var(--pg-line-soft) !important;
  box-shadow: var(--pg-shadow) !important;
  animation: none !important;
}
body.pg-teacher .number-btn{
  border-radius: var(--pg-r-s) !important;
  border: 1px solid var(--pg-line) !important;
  font-family: var(--pg-mono) !important;
  background: var(--pg-card) !important;
}
body.pg-teacher .number-btn:hover{ border-color: var(--pg-accent) !important; }
body.pg-teacher .number-btn.active, body.pg-teacher .number-btn.selected{
  background: var(--pg-ink) !important; color: #fff !important; border-color: var(--pg-ink) !important;
}

/* =============================================================================
   DASHBOARD ADMIN — sfondo, testata e menù laterale nella veste nuova.
   La struttura resta identica: cambia solo il vestito.
   ============================================================================= */
body.pg-admin{ background: var(--pg-paper) !important; background-image: none !important; }
body.pg-admin .header{
  background: color-mix(in srgb, var(--pg-card) 92%, transparent) !important;
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--pg-line-soft) !important;
  box-shadow: none !important;
}
body.pg-admin .header, body.pg-admin .header *{ color: var(--pg-ink) !important; }
body.pg-admin .logo{ font-family: var(--pg-display); font-weight: 800; letter-spacing: -.02em; }
body.pg-admin .sidebar{
  background: var(--pg-card) !important;
  background-image: none !important;
  border-right: 1px solid var(--pg-line-soft);
  box-shadow: none !important;
}
body.pg-admin .sidebar-title, body.pg-admin .sidebar-title-text{
  font-family: var(--pg-display) !important; font-weight: 700 !important; color: var(--pg-ink) !important;
  letter-spacing: -.01em;
}
body.pg-admin .nav-link{
  color: var(--pg-ink-2) !important;
  border-radius: var(--pg-r-s) !important;
  font-weight: 500;
  transition: background .16s ease, color .16s ease;
}
body.pg-admin .nav-link:hover{ background: var(--pg-line-soft) !important; color: var(--pg-ink) !important; }
body.pg-admin .nav-link.active{
  background: var(--pg-ink) !important;
  color: #fff !important;
}
body.pg-admin .nav-link.active .nav-icon svg{ stroke: #fff; }
body.pg-admin .nav-icon svg{ width: 18px; height: 18px; stroke: currentColor; fill: none; }
body.pg-admin .content-section{ animation: none !important; }
body.pg-admin .card, body.pg-admin .stat-card, body.pg-admin .section-card{
  border-radius: var(--pg-r-l) !important;
  border: 1px solid var(--pg-line-soft) !important;
  box-shadow: var(--pg-shadow) !important;
}
body.pg-admin .stat-number, body.pg-admin .stat-value{
  font-family: var(--pg-mono) !important; font-variant-numeric: tabular-nums; letter-spacing: -.02em;
}

/* =============================================================================
   LOGIN, HOME PUBBLICA, MERCATINO
   ============================================================================= */
body.pg-login .login-container, body.pg-login .login-box, body.pg-login .login-card{
  border-radius: var(--pg-r-l) !important;
  border: 1px solid var(--pg-line-soft) !important;
  box-shadow: var(--pg-shadow-lift) !important;
}
body.pg-login h1, body.pg-login h2{ font-family: var(--pg-display) !important; letter-spacing: -.03em; }
body.pg-home h1, body.pg-home h2, body.pg-home h3{ font-family: var(--pg-display) !important; letter-spacing: -.025em; }
body.pg-mkt .mk-card, body.pg-mkt .card{
  border-radius: var(--pg-r-m) !important;
  border: 1px solid var(--pg-line-soft) !important;
  box-shadow: none !important;
}
body.pg-mkt .mk-card:hover{ box-shadow: var(--pg-shadow) !important; }

/* =============================================================================
   LA SETTIMANA COME UN PENTAGRAMMA — il pezzo firma del portale allievo.
   Cinque righe sottili, le lezioni sono note posate sui giorni, una linea
   verticale segna adesso. Nasce da un fatto vero: la settimana si ripete uguale.
   ============================================================================= */
.pg-week{
  background: var(--pg-card);
  border: 1px solid var(--pg-line-soft);
  border-radius: var(--pg-r-l);
  box-shadow: var(--pg-shadow);
  padding: 18px 18px 12px;
  margin-bottom: 26px;
}
.pg-week[hidden]{ display: none !important; }
.pg-week-head{ display: flex; align-items: baseline; gap: 12px; margin-bottom: 16px; }
.pg-week-head h2{
  font-family: var(--pg-display); font-weight: 600; font-size: 17px;
  margin: 0; letter-spacing: -.01em; color: var(--pg-ink);
}
.pg-week-head .pg-range{ font: 400 13px/1 var(--pg-mono); color: var(--pg-muted); }

.pg-stave{
  position: relative;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
  padding: 16px 0 8px;
}
.pg-stave::before{            /* le cinque righe del pentagramma */
  content: ""; position: absolute; inset: 22px 0 26px; pointer-events: none;
  background: repeating-linear-gradient(to bottom, var(--pg-line-soft) 0 1px, transparent 1px 22px);
  opacity: .9;
}
.pg-day{ position: relative; min-height: 124px; display: flex; flex-direction: column; gap: 8px; }
.pg-day-label{
  font: 500 11px/1 var(--pg-mono); letter-spacing: .14em; text-transform: uppercase;
  color: var(--pg-muted); text-align: center; padding-bottom: 8px;
}
.pg-day.pg-today .pg-day-label{ color: var(--pg-accent); font-weight: 700; }
.pg-day.pg-today::after{      /* la testina: dove siamo adesso */
  content: ""; position: absolute; left: 50%; top: 20px; bottom: 6px; width: 2px;
  background: linear-gradient(var(--pg-accent), color-mix(in srgb, var(--pg-accent) 15%, transparent));
  transform: translateX(-50%); border-radius: 2px;
}
.pg-note{
  position: relative; z-index: 1; text-align: left; width: 100%; cursor: default;
  background: var(--pg-card); border: 1px solid var(--pg-line);
  border-left: 3px solid var(--pg-who, var(--pg-accent));
  border-radius: var(--pg-r-s); padding: 8px 10px;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.pg-note:hover{ transform: translateY(-2px); box-shadow: var(--pg-shadow); border-color: var(--pg-who, var(--pg-accent)); }
.pg-note .pg-t{ display: block; font: 700 13px/1.1 var(--pg-mono); color: var(--pg-ink); }
.pg-note .pg-s{ display: block; font-size: 12.5px; color: var(--pg-ink-2); margin-top: 3px; }
.pg-note .pg-w{ display: block; font-size: 11.5px; color: var(--pg-muted); margin-top: 2px; }
.pg-note.pg-group{ border-left-style: double; border-left-width: 5px; }
.pg-note.pg-absent{ opacity: .55; }
.pg-note.pg-absent .pg-t{ text-decoration: line-through; }

.pg-legend{ display: flex; flex-wrap: wrap; gap: 14px; padding: 10px 2px 2px; border-top: 1px solid var(--pg-line-soft); margin-top: 6px; }
.pg-legend span{ display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--pg-muted); }
.pg-legend i{ width: 10px; height: 10px; border-radius: 3px; background: var(--pg-who, var(--pg-accent)); display: inline-block; }

.pg-next{
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--pg-line-soft);
  font-size: 14.5px; color: var(--pg-ink-2);
}
.pg-next b{ font-family: var(--pg-mono); font-weight: 700; color: var(--pg-ink); }

@media (max-width: 760px){
  .pg-week{ padding: 14px 14px 10px; }
  .pg-stave{ grid-template-columns: 1fr; gap: 0; padding-top: 6px; }
  .pg-stave::before{ display: none; }
  .pg-day{ min-height: 0; flex-direction: row; align-items: flex-start; gap: 12px; padding: 12px 0; border-top: 1px solid var(--pg-line-soft); }
  .pg-day:first-child{ border-top: 0; }
  .pg-day.pg-today::after{ display: none; }
  .pg-day.pg-today{ background: linear-gradient(90deg, var(--pg-accent-wash), transparent 60%); border-radius: var(--pg-r-s); }
  .pg-day-label{ width: 46px; flex: 0 0 46px; text-align: left; padding: 10px 0 0 8px; }
  .pg-day .pg-notes{ flex: 1; display: flex; flex-direction: column; gap: 8px; }
  .pg-day.pg-empty{ display: none; }
}

/* ------------------------------------------------------------------ da fare --
   Una riga sola per ciò che serve adesso: quanto, entro quando, e il pulsante
   che lo risolve. Se non c'è nulla da fare la sezione sparisce. */
.pg-todo{
  background: var(--pg-card);
  border: 1px solid var(--pg-line-soft);
  border-radius: var(--pg-r-l);
  box-shadow: var(--pg-shadow);
  overflow: hidden;
  margin-bottom: 26px;
}
.pg-todo[hidden]{ display: none !important; }
.pg-todo-row{ display: flex; align-items: center; gap: 18px; padding: 18px; }
.pg-todo-row + .pg-todo-row{ border-top: 1px solid var(--pg-line-soft); }
.pg-todo-mark{
  flex: 0 0 auto; width: 42px; height: 42px; border-radius: 12px;
  display: grid; place-items: center; font-size: 19px;
  background: var(--pg-accent-wash); color: var(--pg-accent-ink);
}
.pg-todo-row.pg-calm .pg-todo-mark{ background: #eaf3ef; color: var(--pg-ok); }
.pg-todo-txt{ flex: 1; min-width: 0; }
.pg-todo-txt h3{
  margin: 0 0 2px; font-family: var(--pg-display); font-weight: 600;
  font-size: 15.5px; letter-spacing: -.01em; color: var(--pg-ink);
}
.pg-todo-txt p{ margin: 0; font-size: 13.5px; color: var(--pg-muted); }
.pg-todo-amount{ font: 700 15px/1 var(--pg-mono); white-space: nowrap; color: var(--pg-ink); }
.pg-todo-btn{
  flex: 0 0 auto; border: 0; cursor: pointer; border-radius: 999px; padding: 11px 18px;
  font: 600 14px/1 var(--pg-body); background: var(--pg-ink); color: #fff;
  transition: background .16s ease, transform .16s ease;
}
.pg-todo-btn:hover{ background: var(--pg-accent); transform: translateY(-1px); }
.pg-todo-btn.pg-ghost{ background: transparent; color: var(--pg-ink-2); border: 1px solid var(--pg-line); }
.pg-todo-btn.pg-ghost:hover{ background: transparent; border-color: var(--pg-ink-2); color: var(--pg-ink); }
@media (max-width: 760px){
  .pg-todo-row{ flex-wrap: wrap; gap: 12px; padding: 15px; }
  .pg-todo-btn{ width: 100%; }
  .pg-todo-amount{ order: -1; }
}

/* ------------------------------------------------ via il vecchio "effetto" ---
   Gradienti, aloni e cornici animate che restano nei fogli di stile delle
   pagine: qui vengono spenti, così le superfici tornano piatte e pulite.
   Si riaccende tutto con ?skin=off. */
body[class*="pg-"] .info-card,
body[class*="pg-"] .info-card-header,
body[class*="pg-"] .student-header-improved,
body[class*="pg-"] .student-header-improved:hover,
body[class*="pg-"] .stat-card,
body[class*="pg-"] .summary-card,
body[class*="pg-"] .highlight-box,
body[class*="pg-"] .gradient-box{
  background: var(--pg-card) !important;
  background-image: none !important;
  box-shadow: none !important;
  border: 1px solid var(--pg-line-soft) !important;
  border-radius: var(--pg-r-m) !important;
}
body[class*="pg-"] .info-card::before,
body[class*="pg-"] .info-card::after,
body[class*="pg-"] .student-avatar-improved::after,
body[class*="pg-"] .welcome-section::before,
body[class*="pg-"] .card::before{
  display: none !important;
  content: none !important;
}
body[class*="pg-"] .info-card-header{
  border: 0 !important;
  border-bottom: 1px solid var(--pg-line-soft) !important;
  border-radius: 0 !important;
}
/* avatar e nomi: inchiostro pieno, niente testo in gradiente */
body[class*="pg-"] .student-avatar-improved,
body[class*="pg-"] .user-avatar,
body[class*="pg-"] .avatar{
  background: var(--pg-ink) !important;
  background-image: none !important;
  color: #fff !important;
  box-shadow: none !important;
  font-family: var(--pg-display);
}
body[class*="pg-"] .student-name,
body[class*="pg-"] .gradient-text{
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  -webkit-text-fill-color: currentColor !important;
  color: var(--pg-ink) !important;
  font-family: var(--pg-display) !important;
  letter-spacing: -.02em;
}
/* badge: un pallino di colore, non una pillola in gradiente */
body[class*="pg-"] .info-badge{
  background: var(--pg-accent-wash) !important;
  background-image: none !important;
  color: var(--pg-accent-ink) !important;
  border: 1px solid color-mix(in srgb, var(--pg-accent) 25%, transparent) !important;
  box-shadow: none !important;
  font-family: var(--pg-mono) !important;
  font-weight: 700 !important;
}
/* riquadri pastello scritti a mano nel markup (giallino, verdino, azzurrino) */
body[class*="pg-"] [style*="#fff3cd"]{ background: color-mix(in srgb, var(--pg-warn) 8%, white) !important; color: var(--pg-warn) !important; }
body[class*="pg-"] [style*="#d4edda"]{ background: color-mix(in srgb, var(--pg-ok) 8%, white) !important; color: var(--pg-ok) !important; }
body[class*="pg-"] [style*="#f8d7da"]{ background: color-mix(in srgb, var(--pg-danger) 7%, white) !important; color: var(--pg-danger) !important; }
body[class*="pg-"] [style*="#f0f7ff"]{ background: var(--pg-accent-wash) !important; }
body[class*="pg-"] [style*="linear-gradient"]{ background-image: none !important; }
/* niente animazioni d'ingresso: la pagina non deve "entrare in scena" */
body[class*="pg-"] .card,
body[class*="pg-"] .action-card,
body[class*="pg-"] .info-card,
body[class*="pg-"] .content-section{ animation: none !important; }

/* --- spegnimento sistematico di gradienti e ombre pesanti (134 selettori
       trovati nei fogli di stile dei tre portali) --- */
body[class*="pg-"] .action-card:hover,
body[class*="pg-"] .att-kpi,
body[class*="pg-"] .back-to-top:hover,
body[class*="pg-"] .badge-associato,
body[class*="pg-"] .badge-tu,
body[class*="pg-"] .bank-details-card,
body[class*="pg-"] .btn-action.add,
body[class*="pg-"] .btn-action.add:hover,
body[class*="pg-"] .btn-action.delete,
body[class*="pg-"] .btn-action.delete:hover,
body[class*="pg-"] .btn-feature::before,
body[class*="pg-"] .btn-primary.btn-feature,
body[class*="pg-"] .btn-utility,
body[class*="pg-"] .btn-utility:disabled:hover,
body[class*="pg-"] .btn-utility:hover,
body[class*="pg-"] .card-header,
body[class*="pg-"] .card:hover,
body[class*="pg-"] .coming-soon-icon,
body[class*="pg-"] .config-dropdown-item.reset:hover,
body[class*="pg-"] .config-dropdown-item.save:hover,
body[class*="pg-"] .config-dropdown-item:hover,
body[class*="pg-"] .confirm-content,
body[class*="pg-"] .course-price,
body[class*="pg-"] .course-type-badge.collective,
body[class*="pg-"] .course-type-badge.individual,
body[class*="pg-"] .data-table th,
body[class*="pg-"] .day-card.editable,
body[class*="pg-"] .day-card.editable::before,
body[class*="pg-"] .day-card.has-absence.today,
body[class*="pg-"] .day-card.has-hours,
body[class*="pg-"] .day-card.has-hours.today,
body[class*="pg-"] .delete-btn-confirm,
body[class*="pg-"] .delete-btn-confirm:hover,
body[class*="pg-"] .delete-header,
body[class*="pg-"] .delete-modal-box,
body[class*="pg-"] .enroll-btn,
body[class*="pg-"] .enrollment-header,
body[class*="pg-"] .enrollment-name,
body[class*="pg-"] .event-status-banner.banner-enrollment-closed,
body[class*="pg-"] .event-status-banner.banner-expired,
body[class*="pg-"] .event-status-banner.banner-not-visible,
body[class*="pg-"] .evento-actions .btn-delete,
body[class*="pg-"] .evento-actions .btn-delete:hover,
body[class*="pg-"] .evento-actions .btn-edit,
body[class*="pg-"] .evento-actions .btn-edit:hover,
body[class*="pg-"] .evento-card.active,
body[class*="pg-"] .evento-logo.placeholder,
body[class*="pg-"] .evento-price,
body[class*="pg-"] .evento-price.acconto,
body[class*="pg-"] .evento-price.totale,
body[class*="pg-"] .export-button,
body[class*="pg-"] .export-button:hover,
body[class*="pg-"] .feature-card,
body[class*="pg-"] .feature-card.featured,
body[class*="pg-"] .feature-card.featured .btn-primary.btn-feature,
body[class*="pg-"] .feature-card.featured .feature-icon,
body[class*="pg-"] .feature-card.featured::before,
body[class*="pg-"] .feature-card::before,
body[class*="pg-"] .feature-card:hover,
body[class*="pg-"] .feature-icon,
body[class*="pg-"] .form-actions,
body[class*="pg-"] .form-actions .btn-success,
body[class*="pg-"] .form-actions .btn-success:hover,
body[class*="pg-"] .important-field,
body[class*="pg-"] .info-badge,
body[class*="pg-"] .info-card-header,
body[class*="pg-"] .info-card::before,
body[class*="pg-"] .lesson-chip,
body[class*="pg-"] .modal-content,
body[class*="pg-"] .nav-card.active,
body[class*="pg-"] .nav-card::before,
body[class*="pg-"] .nav-card:hover,
body[class*="pg-"] .payment-item:has(.payment-amount[style*="var(--gray)"]),
body[class*="pg-"] .presence-option:has(input:checked),
body[class*="pg-"] .presence-option:hover,
body[class*="pg-"] .qd-addbar,
body[class*="pg-"] .quick-course-card,
body[class*="pg-"] .quick-course-card::before,
body[class*="pg-"] .quick-course-card:hover,
body[class*="pg-"] .quota-associativa-cell:hover,
body[class*="pg-"] .record-item.absence,
body[class*="pg-"] .record-item.presence,
body[class*="pg-"] .section-header,
body[class*="pg-"] .stats-divider,
body[class*="pg-"] .student-avatar-improved,
body[class*="pg-"] .student-avatar-improved::after,
body[class*="pg-"] .student-badge-associated,
body[class*="pg-"] .student-badge-current,
body[class*="pg-"] .student-badge::before,
body[class*="pg-"] .student-header-improved,
body[class*="pg-"] .student-header-improved::before,
body[class*="pg-"] .student-header-improved:hover,
body[class*="pg-"] .student-header-line,
body[class*="pg-"] .student-item.overdue-payment,
body[class*="pg-"] .student-item.overdue-payment:hover,
body[class*="pg-"] .student-item.ritirato,
body[class*="pg-"] .student-item.ritirato:hover,
body[class*="pg-"] .student-item:hover,
body[class*="pg-"] .student-modal-content,
body[class*="pg-"] .student-name,
body[class*="pg-"] .students-table tbody tr:hover,
body[class*="pg-"] .students-table tbody tr:hover td:first-child,
body[class*="pg-"] .students-table tbody tr:nth-child(even):hover,
body[class*="pg-"] .students-table th:hover,
body[class*="pg-"] .students-table-header th.drag-over,
body[class*="pg-"] .summary-highlight,
body[class*="pg-"] .tabulator .tabulator-header .tabulator-col:hover,
body[class*="pg-"] .tabulator .tabulator-table .tabulator-row:hover,
body[class*="pg-"] .teacher-course-card:hover,
body[class*="pg-"] .teacher-sede-header,
body[class*="pg-"] .teacher-stat-card:hover,
body[class*="pg-"] .tm-ava,
body[class*="pg-"] .toast,
body[class*="pg-"] .today-btn.current-week:hover,
body[class*="pg-"] .today-btn:hover,
body[class*="pg-"] .tp-box,
body[class*="pg-"] .tpa-bar,
body[class*="pg-"] .tpa-kpi,
body[class*="pg-"] .venue-course-card:hover,
body[class*="pg-"] .welcome-section,
body[class*="pg-"] .year-info-item,
body[class*="pg-"] .year-selector-header:hover,
body[class*="pg-"] /* --- Skeleton loaders --- */ .skeleton,
body[class*="pg-"] /* Avatar */ .enrollment-avatar,
body[class*="pg-"] /* Back to Top Button */ .back-to-top,
body[class*="pg-"] /* Iscrizioni Section */ .iscrizioni-stats,
body[class*="pg-"] /* Stato corrente */ .today-btn.current-week,
body[class*="pg-"] /* Tab Header Styling */ .tab-header,
body[class*="pg-"] /* Titolo evento più evidente */ .evento-title,
body[class*="pg-"] /* ⭐ GIORNI CON ASSENZE ⭐ */ .day-card.has-absence,
body[class*="pg-"] /* ⭐ PULSANTE OGGI - STILE CENTRALE ⭐ */ .today-btn,
body[class*="pg-"] :root{
  background-image: none !important;
  box-shadow: none !important;
}

/* superfici e testate tornano piatte, con il bordo sottile */
body[class*="pg-"] .card-header,
body[class*="pg-"] .enrollment-header,
body[class*="pg-"] .delete-header,
body[class*="pg-"] .data-table th{
  background: transparent !important;
  color: var(--pg-ink) !important;
  border-bottom: 1px solid var(--pg-line-soft) !important;
}
/* i pulsanti che erano in gradiente diventano inchiostro pieno */
body[class*="pg-"] .btn-utility,
body[class*="pg-"] .enroll-btn,
body[class*="pg-"] .btn-primary.btn-feature,
body[class*="pg-"] .btn-action.add,
body[class*="pg-"] .delete-btn-confirm{
  background: var(--pg-ink) !important;
  color: #fff !important;
  border: 1px solid var(--pg-ink) !important;
}
body[class*="pg-"] .btn-utility:hover,
body[class*="pg-"] .enroll-btn:hover,
body[class*="pg-"] .btn-action.add:hover{
  background: var(--pg-accent) !important;
  border-color: var(--pg-accent) !important;
}
body[class*="pg-"] .btn-action.delete,
body[class*="pg-"] .delete-btn-confirm{ background: var(--pg-danger) !important; border-color: var(--pg-danger) !important; }
/* pillole di stato: fondo tenue e testo colorato, non blocchi pieni */
body[class*="pg-"] .badge-associato,
body[class*="pg-"] .badge-tu,
body[class*="pg-"] .course-type-badge.individual,
body[class*="pg-"] .course-type-badge.collective,
body[class*="pg-"] .att-kpi{
  background: var(--pg-accent-wash) !important;
  color: var(--pg-accent-ink) !important;
  border: 1px solid color-mix(in srgb, var(--pg-accent) 22%, transparent) !important;
  font-family: var(--pg-mono) !important;
}
/* qualunque ombra scritta a mano nel markup diventa quella di sistema */
body[class*="pg-"] [style*="box-shadow"]{ box-shadow: var(--pg-shadow) !important; }

/* ------------------------------------------- corsi disponibili e iscrizioni --
   Erano riquadroni centrati con icona gigante, cornice spessa e ombra alta.
   Diventano schede compatte: icona a fianco, titolo, riga di dettaglio. */
body[class*="pg-"] .quick-course-card,
body[class*="pg-"] .course-card,
body[class*="pg-"] .enrollment-card{
  background: var(--pg-card) !important;
  background-image: none !important;
  border: 1px solid var(--pg-line-soft) !important;
  border-left: 3px solid var(--pg-accent) !important;
  border-radius: var(--pg-r-m) !important;
  box-shadow: none !important;
  padding: 14px 16px !important;
  text-align: left !important;
  transition: border-color .16s ease, transform .16s ease, box-shadow .16s ease !important;
}
body[class*="pg-"] .quick-course-card:hover,
body[class*="pg-"] .course-card:hover,
body[class*="pg-"] .enrollment-card:hover{
  transform: translateY(-2px) !important;
  border-color: var(--pg-line) !important;
  border-left-color: var(--pg-accent) !important;
  box-shadow: var(--pg-shadow) !important;
}
body[class*="pg-"] .quick-course-card::before,
body[class*="pg-"] .quick-course-card::after,
body[class*="pg-"] .course-card::before{ display: none !important; content: none !important; }

/* l'icona gigante scende a misura di riga */
body[class*="pg-"] .course-card-icon{
  font-size: 20px !important;
  margin: 0 10px 0 0 !important;
  display: inline-block !important;
  vertical-align: -2px;
  transform: none !important;
}
body[class*="pg-"] .quick-course-card:hover .course-card-icon{ transform: none !important; }
body[class*="pg-"] .quick-course-card h4,
body[class*="pg-"] .course-card h4,
body[class*="pg-"] .enrollment-card h4{
  font-family: var(--pg-display) !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  letter-spacing: -.01em;
  margin: 0 0 3px !important;
  color: var(--pg-ink) !important;
  display: inline;
}
body[class*="pg-"] .quick-course-card p,
body[class*="pg-"] .course-card p{
  font-size: 13px !important;
  color: var(--pg-muted) !important;
  margin: 4px 0 0 !important;
  line-height: 1.45;
}
/* la griglia si stringe: schede più piccole, più per riga */
body[class*="pg-"] .quick-courses-grid,
body[class*="pg-"] .courses-grid,
body[class*="pg-"] .enrollments-grid{
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)) !important;
  gap: 12px !important;
}

/* intestazione dell'iscrizione: niente fascia, solo un filetto */
body[class*="pg-"] .enrollment-header{
  background: transparent !important;
  background-image: none !important;
  border-radius: 0 !important;
  border-bottom: 1px solid var(--pg-line-soft) !important;
  margin: -14px -16px 14px !important;
  padding: 12px 16px !important;
}
body[class*="pg-"] .enrollment-avatar{
  width: 36px !important; height: 36px !important; min-width: 36px !important;
  background: var(--pg-ink) !important; background-image: none !important; color: #fff !important;
  font-family: var(--pg-display); font-weight: 700; border-radius: 10px !important;
  box-shadow: none !important;
}
body[class*="pg-"] .enrollment-name{
  font-family: var(--pg-display) !important; font-weight: 600 !important;
  letter-spacing: -.01em; color: var(--pg-ink) !important;
}
body[class*="pg-"] .course-price,
body[class*="pg-"] .enrollment-price{
  font-family: var(--pg-mono) !important; font-weight: 700 !important;
  background: transparent !important; background-image: none !important;
  color: var(--pg-ink) !important; padding: 0 !important; box-shadow: none !important;
}
@media (max-width: 760px){
  body[class*="pg-"] .quick-courses-grid,
  body[class*="pg-"] .courses-grid{ grid-template-columns: 1fr !important; }
}

/* ------------------------------------------ le tre schede colorate in cima --
   Erano blocchi pieni nel colore della testata, alti 142px e centrati.
   Diventano schede chiare come tutte le altre, con l'icona a fianco. */
body[class*="pg-"] .nav-card,
body[class*="pg-"] .nav-card.active{
  background: var(--pg-card) !important;
  background-image: none !important;
  color: var(--pg-ink) !important;
  border: 1px solid var(--pg-line-soft) !important;
  border-radius: var(--pg-r-m) !important;
  box-shadow: none !important;
  padding: 14px 16px !important;
  text-align: left !important;
  transition: border-color .16s ease, transform .16s ease, box-shadow .16s ease !important;
}
body[class*="pg-"] .nav-card:hover{
  transform: translateY(-2px) !important;
  border-color: var(--pg-line) !important;
  box-shadow: var(--pg-shadow) !important;
}
body[class*="pg-"] .nav-card.active{ border-color: var(--pg-ink) !important; }
body[class*="pg-"] .nav-card *{ color: inherit !important; }
body[class*="pg-"] .nav-card h3,
body[class*="pg-"] .nav-card h4,
body[class*="pg-"] .nav-card .nav-card-title{
  font-family: var(--pg-display) !important; font-weight: 600 !important;
  font-size: 15px !important; margin: 0 0 2px !important; letter-spacing: -.01em;
}
body[class*="pg-"] .nav-card p,
body[class*="pg-"] .nav-card small,
body[class*="pg-"] .nav-card .nav-card-desc{ font-size: 12.5px !important; color: var(--pg-muted) !important; margin: 0 !important; }
body[class*="pg-"] .nav-card .nav-card-icon,
body[class*="pg-"] .nav-card i,
body[class*="pg-"] .nav-card .icon{ font-size: 20px !important; margin: 0 0 6px !important; }
body[class*="pg-"] .nav-cards-grid{ gap: 12px !important; }

/* ----------------------------------------- quota associativa: una riga sola --
   Era una fascia verde maiuscola alta 47px. Diventa una riga di stato discreta. */
body[class*="pg-"] .quota-box{
  padding: 8px 12px !important;
  border-radius: var(--pg-r-s) !important;
  font-size: 12px !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-weight: 500 !important;
  border: 1px solid var(--pg-line-soft) !important;
  background: var(--pg-card) !important;
  background-image: none !important;
  color: var(--pg-ink-2) !important;
  box-shadow: none !important;
}
body[class*="pg-"] .quota-box.quota-paid{
  background: color-mix(in srgb, var(--pg-ok) 7%, white) !important;
  border-color: color-mix(in srgb, var(--pg-ok) 25%, transparent) !important;
  color: var(--pg-ok) !important;
}
body[class*="pg-"] .quota-box.quota-unpaid,
body[class*="pg-"] .quota-box.quota-due{
  background: color-mix(in srgb, var(--pg-warn) 8%, white) !important;
  border-color: color-mix(in srgb, var(--pg-warn) 25%, transparent) !important;
  color: var(--pg-warn) !important;
}
body[class*="pg-"] .quota-status,
body[class*="pg-"] .quota-text{ font-family: var(--pg-mono) !important; font-size: 12px !important; }

/* ------------------------------------------- prospetto pagamenti compatto ---- */
body[class*="pg-"] .payment-info{
  background: transparent !important;
  border: 1px solid var(--pg-line-soft) !important;
  border-radius: var(--pg-r-m) !important;
  padding: 12px 14px !important;
  margin-top: 12px !important;
}
body[class*="pg-"] .payment-info .payment-row,
body[class*="pg-"] .payment-schedule > *{
  padding: 7px 0 !important;
  border-bottom: 1px solid var(--pg-line-soft);
  font-size: 13.5px;
}
body[class*="pg-"] .payment-schedule > *:last-child{ border-bottom: 0; }
body[class*="pg-"] .payment-info .amount,
body[class*="pg-"] .payment-info b{ font-family: var(--pg-mono) !important; font-variant-numeric: tabular-nums; }

/* -------------------------------- schede iscrizione: stessa densità del resto */
body[class*="pg-"] .course-card.card{ padding: 16px !important; }
body[class*="pg-"] .course-card .card-body{ padding: 0 !important; }
body[class*="pg-"] .course-card h3,
body[class*="pg-"] .course-card h4{ font-size: 15px !important; }
body[class*="pg-"] .course-info{ gap: 10px !important; margin-bottom: 10px !important; }

/* ------------------------------------------------- i tre numeri in evidenza --
   Erano tre riquadri alti 187px con emoji da 40px e numero da 32px.
   Diventano una riga di dati: numero in mono, etichetta piccola, icona a fianco. */
body[class*="pg-"] .stats-grid{ gap: 12px !important; }
body[class*="pg-"] .stat-card{
  background: var(--pg-card) !important;
  background-image: none !important;
  border: 1px solid var(--pg-line-soft) !important;
  border-top: 1px solid var(--pg-line-soft) !important;
  border-radius: var(--pg-r-m) !important;
  box-shadow: none !important;
  padding: 14px 16px !important;
  display: grid !important;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  column-gap: 12px;
  align-items: center;
  text-align: left !important;
  animation: none !important;
}
body[class*="pg-"] .stat-card::before,
body[class*="pg-"] .stat-card::after{ display: none !important; content: none !important; }
body[class*="pg-"] .stat-icon{
  grid-row: 1 / span 2;
  font-size: 20px !important;
  margin: 0 !important;
  height: auto !important;
  opacity: .85;
}
body[class*="pg-"] .stat-number{
  font-family: var(--pg-mono) !important;
  font-size: 26px !important;
  font-weight: 700 !important;
  line-height: 1.05 !important;
  letter-spacing: -.03em;
  color: var(--pg-ink) !important;
  height: auto !important;
  margin: 0 !important;
}
body[class*="pg-"] .stat-label{
  font-size: 12px !important;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--pg-muted) !important;
  font-weight: 500 !important;
  margin: 2px 0 0 !important;
}

/* --------------------------------------------- riga superiore di navigazione --
   La striscia con le scorciatoie e il banner "installa l'app": tutto su una
   riga sola, senza fondo colorato. */
body[class*="pg-"] .navigation-static{
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  border: 0 !important;
  padding: 0 !important;
  margin-bottom: 18px !important;
}
body[class*="pg-"] .sib-banner,
body[class*="pg-"] .install-banner{
  background: var(--pg-card) !important;
  background-image: none !important;
  border: 1px solid var(--pg-line-soft) !important;
  border-radius: var(--pg-r-m) !important;
  box-shadow: none !important;
  padding: 10px 14px !important;
}
body[class*="pg-"] .sib-text{ font-size: 13px !important; color: var(--pg-ink-2) !important; }
body[class*="pg-"] .sib-btn,
body[class*="pg-"] .install-btn{
  background: var(--pg-ink) !important;
  background-image: none !important;
  color: #fff !important;
  border-radius: 999px !important;
  border: 0 !important;
  font-weight: 600 !important;
  box-shadow: none !important;
}
body[class*="pg-"] .sib-btn:hover, body[class*="pg-"] .install-btn:hover{ background: var(--pg-accent) !important; }

/* ------------------------------------------------ etichette: righe, non pillole
   Correzione: le righe etichetta/valore non devono essere riquadri arrotondati.
   Restano righe piatte separate da un filetto — si leggono come una tabella. */
body[class*="pg-"] .info-item,
body[class*="pg-"] .detail-row,
body[class*="pg-"] .course-detail,
body[class*="pg-"] .enrollment-detail{
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid var(--pg-line-soft) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 8px 0 !important;
}
body[class*="pg-"] .info-item:last-child,
body[class*="pg-"] .detail-row:last-child{ border-bottom: 0 !important; }
body[class*="pg-"] .info-label,
body[class*="pg-"] .detail-label,
body[class*="pg-"] .course-label{
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  font-size: 11.5px !important;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--pg-muted) !important;
}
body[class*="pg-"] .info-value,
body[class*="pg-"] .detail-value{
  background: transparent !important; border: 0 !important; border-radius: 0 !important; padding: 0 !important;
}
/* le pillole di stato restano, ma discrete e squadrate */
body[class*="pg-"] .badge-tu,
body[class*="pg-"] .badge-associato{
  border-radius: 6px !important;
  font-size: 10.5px !important;
  letter-spacing: .08em;
  padding: 3px 7px !important;
  background: var(--pg-line-soft) !important;
  color: var(--pg-ink-2) !important;
  border: 0 !important;
}
body[class*="pg-"] .st{
  border-radius: 6px !important;
  font-family: var(--pg-mono) !important;
  font-size: 11px !important;
  padding: 2px 7px !important;
}
body[class*="pg-"] .dd{
  border-radius: 8px !important;
  background: transparent !important;
  border: 1px solid var(--pg-line-soft) !important;
  font-family: var(--pg-mono) !important;
}

/* =============================================================================
   MOBILE — testata compatta su una riga sola e niente sovrapposizioni col dock.
   ============================================================================= */
@media (max-width: 760px){
  /* testata: era alta 120px su due righe (logo centrato sopra, utente sotto).
     Diventa una riga da ~52px: marchio a sinistra, utente e uscita a destra. */
  body[class*="pg-"] .header{ position: sticky; top: 0; }
  body[class*="pg-"] .header .nav,
  body[class*="pg-"] .header .navbar,
  body[class*="pg-"] .header nav{
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    padding: 8px 14px !important;
    height: auto !important;
    text-align: left !important;
  }
  body[class*="pg-"] .logo{
    font-size: 16px !important;
    margin: 0 !important;
    justify-content: flex-start !important;
    flex: 0 1 auto;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  body[class*="pg-"] .logo img{ width: 20px !important; height: 20px !important; margin-right: 6px !important; }
  body[class*="pg-"] .user-info,
  body[class*="pg-"] .teacher-info{
    gap: 8px !important; margin: 0 !important;
    flex: 0 0 auto !important;
    width: auto !important;          /* il template la portava a tutta riga */
    justify-content: flex-end !important;
  }
  /* "Dashboard / Allievo", "Docente": ridondanti sul telefono */
  body[class*="pg-"] .user-details,
  body[class*="pg-"] .teacher-details{ display: none !important; }
  body[class*="pg-"] .user-avatar,
  body[class*="pg-"] .teacher-avatar{ width: 32px !important; height: 32px !important; min-width: 32px !important; font-size: 13px !important; }
  body[class*="pg-"] .logout-btn{ padding: 7px 12px !important; font-size: 12.5px !important; }

  /* il saluto respira meno, la settimana sale più in alto */
  body[class*="pg-"] .welcome-section{ padding-top: 4px !important; }
  body[class*="pg-"] .welcome-section h1{ font-size: clamp(22px, 6.4vw, 30px) !important; }

  /* etichette dei giorni: niente parole tagliate */
  .pg-day-label{ width: 54px !important; flex: 0 0 54px !important; font-size: 10.5px !important; letter-spacing: .1em !important; }

  /* niente sovrapposizioni: banner "installa" e pillola DEMO stanno sopra il dock */
  /* ognuno il suo piano, senza accavallarsi: dock in basso, pillola DEMO sopra,
     banner "installa" sopra ancora */
  #demoPill{ bottom: calc(72px + env(safe-area-inset-bottom, 0px)) !important; right: 12px !important; }
  #demoPanel{ bottom: calc(120px + env(safe-area-inset-bottom, 0px)) !important; }
  .back-to-top{ bottom: calc(72px + env(safe-area-inset-bottom, 0px)) !important; left: 12px !important; right: auto !important; }
  #suite-install-banner{
    bottom: calc(120px + env(safe-area-inset-bottom, 0px)) !important;
    z-index: 1100 !important;
    left: 12px !important; right: 12px !important; width: auto !important;
    border-radius: var(--pg-r-m) !important;
  }
  /* le barrette dell'equalizzatore restano leggibili anche da ferme */
  .pg-wave{ height: 12px; }
  .pg-wave i{ height: 7px; width: 2px; }
  .pg-wavenav button{ gap: 7px !important; }
}

/* =============================================================================
   DOCK "DA APP" — solo icone; la voce aperta si solleva e mostra l'etichetta.
   L'equalizzatore resta come indicatore di riproduzione sotto l'icona attiva.
   ============================================================================= */
.pg-wavenav.pg-dock{ gap: 2px; padding: 6px; align-items: flex-end; }
.pg-wavenav.pg-dock button{
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 48px;
  min-height: 48px;
  padding: 6px 4px;
  border: 0;
  background: transparent;
  border-radius: var(--pg-r-m);
  color: var(--pg-muted);
  transition: transform .18s cubic-bezier(.2,.8,.3,1), background .18s ease, color .18s ease;
}
.pg-wavenav.pg-dock button:hover{ background: var(--pg-line-soft); color: var(--pg-ink); transform: translateY(-2px); }
.pg-wavenav.pg-dock .pg-ico{ font-size: 19px; line-height: 1; filter: grayscale(.25); transition: filter .18s ease, transform .18s ease; }
/* solo il simbolo: l'etichetta resta per screen reader e come tooltip nativo */
.pg-wavenav.pg-dock .pg-lab{
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%);
  white-space: nowrap; border: 0;
}
/* l'equalizzatore diventa l'indicatore "in riproduzione": nascosto a riposo */
.pg-wavenav.pg-dock .pg-wave{ height: 0; overflow: hidden; opacity: 0; transition: height .18s ease, opacity .18s ease; order: 3; }
.pg-wavenav.pg-dock button[aria-current="true"] .pg-wave{ height: 9px; opacity: 1; }

/* la voce aperta si solleva, si accende e prende l'accento della scuola */
.pg-wavenav.pg-dock button[aria-current="true"]{
  background: var(--pg-card);
  color: var(--pg-ink);
  transform: translateY(-12px);
  box-shadow: 0 2px 6px rgba(23,20,32,.08), 0 14px 26px -14px rgba(23,20,32,.5);
  border: 1px solid var(--pg-line-soft);
}
.pg-wavenav.pg-dock button[aria-current="true"] .pg-ico{ filter: none; transform: scale(1.12); }
.pg-wavenav.pg-dock button[aria-current="true"]{ width: 52px; }
.pg-wavenav.pg-dock button[aria-current="true"] .pg-wave i{ background: var(--pg-accent); }
.pg-wavenav.pg-dock .pg-count{
  position: absolute; top: 2px; right: 8px;
  font: 700 9.5px/1 var(--pg-mono); padding: 2px 5px;
}
.pg-wavenav.pg-dock button{ position: relative; }

@media (max-width: 760px){
  .pg-wavenav.pg-dock{ justify-content: space-around; padding: 4px 4px calc(4px + env(safe-area-inset-bottom, 0px)); }
  .pg-wavenav.pg-dock button{ width: auto; flex: 1 1 0; min-width: 46px; max-width: 64px; }
  .pg-wavenav.pg-dock button[aria-current="true"]{ transform: translateY(-10px); }
}
@media (prefers-reduced-motion: reduce){
  .pg-wavenav.pg-dock button{ transition: none !important; }
  .pg-wavenav.pg-dock button[aria-current="true"]{ transform: none !important; }
}

/* icone SVG del dock: tratto pulito, colore ereditato dallo stato del pulsante */
.pg-wavenav.pg-dock .pg-ico{ display: inline-flex; filter: none !important; }
.pg-wavenav.pg-dock .pg-ico svg{ width: 22px; height: 22px; display: block; }
.pg-wavenav.pg-dock button{ color: var(--pg-muted); }
.pg-wavenav.pg-dock button:hover{ color: var(--pg-ink); }
.pg-wavenav.pg-dock button[aria-current="true"]{ color: var(--pg-accent); }
.pg-wavenav.pg-dock button[aria-current="true"] .pg-ico svg{ stroke-width: 1.8; }
.pg-wavenav.pg-dock button[aria-current="true"] .pg-ico{ transform: none !important; }

/* l'indicatore "in riproduzione" sotto l'icona attiva: tre barrette, non cinque */
.pg-wavenav.pg-dock .pg-wave i:nth-child(n+4){ display: none; }
.pg-wavenav.pg-dock .pg-wave{ gap: 3px; }
.pg-wavenav.pg-dock .pg-wave i{ width: 2px; }

/* ------------------------------------------------------ comunicazioni ------
   Il pulsante "scrivi alla segreteria" era una pillola rossa piena: gridava più
   del contenuto. Diventa un pulsante secondario, e prende l'accento solo al
   passaggio del mouse. Lo stato vuoto smette di essere una card. */
body[class*="pg-"] .pt-btn:not(.primary):not(.sec),
body[class*="pg-"] .pt-lin{
  background: transparent !important;
  background-image: none !important;
  color: var(--pg-ink-2) !important;
  border: 1px solid var(--pg-line) !important;
  border-radius: 999px !important;
  font-weight: 600 !important;
  box-shadow: none !important;
  padding: 8px 14px !important;
  font-size: 13px !important;
}
body[class*="pg-"] .pt-btn:not(.primary):not(.sec):hover,
body[class*="pg-"] .pt-lin:hover{
  border-color: var(--pg-accent) !important;
  color: var(--pg-accent-ink) !important;
  background: var(--pg-accent-wash) !important;
}
/* stato vuoto: testo, non un riquadro con ombra */
body[class*="pg-"] .pt-com.pt-empty,
body[class*="pg-"] .pt-com:only-child:not([data-id]),
body[class*="pg-"] .pt-com-list > .pt-muted{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 6px 2px !important;
}
/* le comunicazioni vere restano schede, ma piatte e con la barretta di stato */
body[class*="pg-"] .pt-com{
  border-radius: var(--pg-r-m) !important;
  border: 1px solid var(--pg-line-soft) !important;
  box-shadow: none !important;
  padding: 12px 14px !important;
}
body[class*="pg-"] .pt-com.urgente,
body[class*="pg-"] .pt-com[data-urgente]{ border-left: 3px solid var(--pg-accent) !important; }
body[class*="pg-"] .pt-com .ic{ font-size: 18px !important; opacity: .9; }
body[class*="pg-"] .pt-com .ti{ font-family: var(--pg-display) !important; font-weight: 600 !important; font-size: 14.5px !important; }
/* il pulsante di ricarica: icona discreta, non testo colorato */
body[class*="pg-"] .pt-refresh,
body[class*="pg-"] .card-header button[title*="ggiorna"],
body[class*="pg-"] .card-header button[title*="efresh"]{
  background: transparent !important;
  border: 1px solid var(--pg-line) !important;
  color: var(--pg-muted) !important;
  border-radius: 999px !important;
  width: 32px; height: 32px; padding: 0 !important;
  display: inline-grid; place-items: center;
}
body[class*="pg-"] .pt-refresh:hover{ border-color: var(--pg-ink-2) !important; color: var(--pg-ink) !important; }

/* --------------------------------------------------- azioni di riga discrete --
   "Segnala assenza" compariva 9 volte come pillola rossa da 174px: gridava più
   della lezione a cui si riferisce. Diventa un'azione piccola e grigia, che si
   accende solo quando ci passi sopra. */
body[class*="pg-"] .pt-lez .act,
body[class*="pg-"] button.act{
  background: transparent !important;
  border: 1px solid var(--pg-line) !important;
  color: var(--pg-muted) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  padding: 5px 11px !important;
  border-radius: 999px !important;
  box-shadow: none !important;
  white-space: nowrap;
}
body[class*="pg-"] .pt-lez .act:hover,
body[class*="pg-"] button.act:hover{
  border-color: var(--pg-accent) !important;
  color: var(--pg-accent-ink) !important;
  background: var(--pg-accent-wash) !important;
}
/* la riga lezione: il titolo pesa, il resto no */
body[class*="pg-"] .pt-lez .ma{ font-family: var(--pg-display) !important; font-weight: 600 !important; font-size: 14.5px !important; }
body[class*="pg-"] .pt-lez .de{ font-size: 12.5px !important; color: var(--pg-muted) !important; }
body[class*="pg-"] .pt-lez .st{ font-size: 10.5px !important; padding: 2px 6px !important; }
/* i contatori assenze/recuperi: riga sobria, numeri in mono */
body[class*="pg-"] .pt-counter{
  background: transparent !important;
  border: 1px solid var(--pg-line-soft) !important;
  border-radius: 999px !important;
  padding: 5px 12px !important;
  font-size: 12.5px !important;
  color: var(--pg-muted) !important;
}
body[class*="pg-"] .pt-counter b{ font-family: var(--pg-mono) !important; color: var(--pg-ink) !important; }

/* ------------------------------------------- intestazioni di sezione su righe --
   Titolo, spiegazione e comandi non stanno su una riga sola: il titolo prende
   la sua riga, la spiegazione sta sotto, i comandi vanno a destra (o a capo,
   se non ci stanno). */
body[class*="pg-"] .card-header.pg-head-stack{
  display: flex !important;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px 16px;
  padding: 16px 18px !important;
}
body[class*="pg-"] .pg-head-txt{ min-width: 0; flex: 1 1 260px; }
body[class*="pg-"] .pg-head-txt h3{
  margin: 0 !important;
  font-family: var(--pg-display) !important;
  font-weight: 600 !important;
  font-size: 17px !important;
  letter-spacing: -.015em;
  line-height: 1.2;
}
body[class*="pg-"] .pg-head-txt p{
  margin: 4px 0 0 !important;
  font-size: 12.5px !important;
  color: var(--pg-muted) !important;
  line-height: 1.4;
  max-width: 52ch;
}
body[class*="pg-"] .pt-month-nav{
  display: flex; align-items: center; gap: 6px;
  flex: 0 0 auto; margin-left: auto;
}
body[class*="pg-"] .pt-month-label{
  font-family: var(--pg-mono) !important;
  font-size: 13px !important;
  min-width: 116px;
  text-align: center;
  color: var(--pg-ink) !important;
}
body[class*="pg-"] .pt-nav-today{ padding: 0 12px !important; width: auto !important; font-size: 12.5px !important; }
@media (max-width: 640px){
  body[class*="pg-"] .card-header.pg-head-stack{ align-items: flex-start; }
  body[class*="pg-"] .pt-month-nav{ margin-left: 0; width: 100%; justify-content: space-between; }
  body[class*="pg-"] .pt-month-label{ flex: 1; }
}

/* quando il dock porta a una sezione, il titolo non deve finire sotto la
   testata fissa: si lascia lo spazio della barra più un respiro */
body[class*="pg-"] .card,
body[class*="pg-"] .section-content,
body[class*="pg-"] #pgWeek,
body[class*="pg-"] #pgTodo,
body[class*="pg-"] #comunicazioniSection{ scroll-margin-top: 78px; }
@media (max-width: 760px){
  body[class*="pg-"] .card,
  body[class*="pg-"] .section-content,
  body[class*="pg-"] #pgWeek,
  body[class*="pg-"] #pgTodo,
  body[class*="pg-"] #comunicazioniSection{ scroll-margin-top: 62px; }
}

/* ------------------------------------------------------------- rilievo ------
   Le schede bianche su carta chiara si distinguevano poco: si scurisce appena
   lo sfondo e si dà a ogni superficie un'ombra vera (due livelli: un filo di
   contatto e una diffusione morbida). Al passaggio del mouse si alza. */
body[class*="pg-"]{
  --pg-paper: #e8ebf2;
  --pg-shadow: 0 1px 2px rgba(23,20,32,.07), 0 10px 22px -12px rgba(23,20,32,.30);
  --pg-shadow-lift: 0 2px 5px rgba(23,20,32,.09), 0 20px 38px -16px rgba(23,20,32,.42);
}
body[class*="pg-"] .card,
body[class*="pg-"] .pt-card,
body[class*="pg-"] .tp-card,
body[class*="pg-"] .documents-section,
body[class*="pg-"] .section-card,
body[class*="pg-"] .pg-week,
body[class*="pg-"] .pg-todo{
  box-shadow: var(--pg-shadow) !important;
  border-color: color-mix(in srgb, var(--pg-line) 60%, white) !important;
}
/* le schede piccole: ombra leggera a riposo, più marcata al passaggio */
body[class*="pg-"] .action-card,
body[class*="pg-"] .nav-card,
body[class*="pg-"] .stat-card,
body[class*="pg-"] .quick-course-card,
body[class*="pg-"] .course-card,
body[class*="pg-"] .enrollment-card,
body[class*="pg-"] .info-card{
  box-shadow: 0 1px 2px rgba(23,20,32,.05), 0 6px 14px -10px rgba(23,20,32,.26) !important;
}
body[class*="pg-"] .action-card:hover,
body[class*="pg-"] .nav-card:hover,
body[class*="pg-"] .quick-course-card:hover,
body[class*="pg-"] .course-card:hover,
body[class*="pg-"] .enrollment-card:hover,
body[class*="pg-"] .stat-card:hover{
  box-shadow: var(--pg-shadow-lift) !important;
}
/* righe interne: restano piatte, il rilievo è delle schede */
body[class*="pg-"] .payment-item,
body[class*="pg-"] .pt-item,
body[class*="pg-"] .pt-lez,
body[class*="pg-"] .pt-com,
body[class*="pg-"] .info-item,
body[class*="pg-"] .detail-row{ box-shadow: none !important; }

/* -------------------------------------- segnalare un'assenza dalla settimana --
   Discreto: il pulsantino compare solo quando passi sopra la lezione (o sempre,
   piccolo, sul telefono, dove il passaggio del mouse non esiste). */
.pg-note{ position: relative; }
.pg-abs{
  position: absolute; top: 6px; right: 6px;
  width: 26px; height: 26px; padding: 0;
  display: grid; place-items: center;
  border: 1px solid var(--pg-line-soft);
  background: var(--pg-card);
  color: var(--pg-muted);
  border-radius: 999px;
  cursor: pointer;
  opacity: 0;
  transform: scale(.9);
  transition: opacity .16s ease, transform .16s ease, color .16s ease, border-color .16s ease;
}
.pg-abs svg{ width: 15px; height: 15px; }
.pg-note:hover .pg-abs,
.pg-note:focus-within .pg-abs{ opacity: 1; transform: scale(1); }
.pg-abs:hover{ color: var(--pg-accent); border-color: var(--pg-accent); background: var(--pg-accent-wash); }
.pg-abs:focus-visible{ opacity: 1; transform: scale(1); }
@media (hover: none){
  .pg-abs{ opacity: .55; transform: none; }
}

/* ------------------------------------------------- le tre schede dei numeri --
   Simbolo in un tondo colorato, numero grande in mono, etichetta minuta.
   Ogni scheda ha la sua tinta, così si distinguono a colpo d'occhio. */
body[class*="pg-"] .stat-card.pg-stat{
  grid-template-columns: 46px 1fr !important;
  align-items: center;
  gap: 0 14px !important;
  padding: 16px 18px !important;
  position: relative;
  overflow: hidden;
}
body[class*="pg-"] .stat-card.pg-stat .stat-icon{
  grid-row: 1 / span 2;
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border-radius: 14px;
  background: var(--pg-tint, var(--pg-accent-wash));
  color: var(--pg-tint-ink, var(--pg-accent-ink));
  font-size: 0 !important;
}
body[class*="pg-"] .stat-card.pg-stat .stat-icon svg{ width: 22px; height: 22px; }
body[class*="pg-"] .stat-card.pg-stat .stat-number{
  font-size: 30px !important;
  line-height: 1 !important;
  letter-spacing: -.035em;
  color: var(--pg-ink) !important;
}
body[class*="pg-"] .stat-card.pg-stat .stat-label{
  font-size: 11.5px !important;
  letter-spacing: .09em;
  margin-top: 5px !important;
  color: var(--pg-muted) !important;
}
/* un filo di colore sul bordo sinistro, come firma della scheda */
body[class*="pg-"] .stat-card.pg-stat::after{
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--pg-tint-ink, var(--pg-accent));
  opacity: .85;
  display: block !important;
}
body[class*="pg-"] .pg-stat-corsi{ --pg-tint: color-mix(in srgb, #2f6fb0 12%, white); --pg-tint-ink: #2f6fb0; }
body[class*="pg-"] .pg-stat-euro{ --pg-tint: color-mix(in srgb, var(--pg-ok) 12%, white); --pg-tint-ink: var(--pg-ok); }
body[class*="pg-"] .pg-stat-saldo{ --pg-tint: var(--pg-accent-wash); --pg-tint-ink: var(--pg-accent-ink); }
body[class*="pg-"] .stat-card.pg-stat:hover{ transform: translateY(-2px); }
@media (max-width: 760px){
  body[class*="pg-"] .stat-card.pg-stat{ padding: 14px 16px !important; grid-template-columns: 40px 1fr !important; }
  body[class*="pg-"] .stat-card.pg-stat .stat-icon{ width: 40px; height: 40px; border-radius: 12px; }
  body[class*="pg-"] .stat-card.pg-stat .stat-number{ font-size: 26px !important; }
}

/* ------------------------------------------ scelta della durata (iscrizione) --
   Erano pulsanti con testo bianco su fondo colorato: tolto il fondo, il testo
   spariva. Diventano schede di scelta leggibili, con il prezzo in evidenza. */
body[class*="pg-"] .duration-btn{
  display: block; width: 100%;
  background: var(--pg-card) !important;
  background-image: none !important;
  color: var(--pg-ink) !important;
  border: 1px solid var(--pg-line) !important;
  border-radius: var(--pg-r-m) !important;
  padding: 13px 15px !important;
  margin: 0 0 10px !important;
  text-align: left !important;
  box-shadow: none !important;
  font-family: var(--pg-body) !important;
  font-size: 14px !important;
  line-height: 1.45;
  cursor: pointer;
  transition: border-color .16s ease, background .16s ease, transform .16s ease;
}
body[class*="pg-"] .duration-btn *{ color: inherit !important; }
body[class*="pg-"] .duration-btn:hover{
  border-color: var(--pg-accent) !important;
  background: var(--pg-accent-wash) !important;
  transform: translateY(-1px);
}
body[class*="pg-"] .duration-btn.selected,
body[class*="pg-"] .duration-btn[aria-pressed="true"]{
  border-color: var(--pg-ink) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--pg-ink) 12%, transparent) !important;
}
/* prezzo e rate: in mono, come sul tabellone */
body[class*="pg-"] .duration-btn strong,
body[class*="pg-"] .duration-btn b,
body[class*="pg-"] .duration-btn .price{
  font-family: var(--pg-mono) !important;
  font-variant-numeric: tabular-nums;
  color: var(--pg-ink) !important;
}

/* =============================================================================
   FINESTRE LUNGHE — quando il contenuto supera lo schermo deve scorrere.
   Prima il pannello sbordava sopra e sotto e il pulsante finale restava
   irraggiungibile. Ora: il fondo scuro non scorre, il pannello sì.
   ============================================================================= */
body[class*="pg-"] .modal,
body[class*="pg-"] #minutesModal,
body[class*="pg-"] #intelligentSelectorModal{
  align-items: flex-start !important;
  justify-content: center;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  padding: 24px 16px !important;
}
/* Regola di base: il pannello stesso scorre. Vale per QUALSIASI finestra, anche
   quelle il cui corpo non si chiama .modal-body (erano la maggioranza: il
   contenuto veniva tagliato e il pulsante finale non si raggiungeva). */
body[class*="pg-"] .modal-content,
body[class*="pg-"] .pt-modal,
body[class*="pg-"] .modal-box{
  max-height: calc(100vh - 48px);
  max-height: calc(100dvh - 48px);
  display: flex;
  flex-direction: column;
  margin: auto !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
/* l'intestazione resta in vista mentre il contenuto scorre */
body[class*="pg-"] .modal-content > .modal-header,
body[class*="pg-"] .pt-modal > .modal-header{
  position: sticky; top: 0; z-index: 3;
  background: var(--pg-card);
}
/* quando invece esiste un corpo dichiarato, scorre solo quello e il pannello
   resta fermo (intestazione e piede sempre visibili) */
body[class*="pg-"] .modal-content:has(> .modal-body),
body[class*="pg-"] .pt-modal:has(> .modal-body),
body[class*="pg-"] .modal-box:has(> .modal-body){ overflow: hidden !important; }
body[class*="pg-"] .modal-body{
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  min-height: 0;
}
/* pannelli senza struttura (contenuto libero): scorre il pannello stesso,
   così l'ultimo pulsante resta sempre raggiungibile */
body[class*="pg-"] .confirm-content{
  max-height: calc(100vh - 48px);
  max-height: calc(100dvh - 48px);
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  margin: auto !important;
  overscroll-behavior: contain;
}
body[class*="pg-"] .modal-header,
body[class*="pg-"] .modal-footer,
body[class*="pg-"] .confirm-actions{ flex: 0 0 auto; }
body[class*="pg-"] .modal-footer,
body[class*="pg-"] .confirm-actions{
  position: sticky; bottom: 0;
  background: var(--pg-card);
  border-top: 1px solid var(--pg-line-soft);
  padding: 12px 18px !important;
  margin: 0 !important;
  display: flex; gap: 10px; justify-content: flex-end;
}
@media (max-width: 760px){
  body[class*="pg-"] .modal,
  body[class*="pg-"] #minutesModal,
  body[class*="pg-"] #intelligentSelectorModal{ padding: 12px 10px calc(12px + env(safe-area-inset-bottom, 0px)) !important; }
  body[class*="pg-"] .modal-content,
  body[class*="pg-"] .confirm-content{ max-height: calc(100dvh - 24px); width: 100% !important; }
}

/* =============================================================================
   PORTALE DOCENTE — i pezzi che restavano nella veste vecchia.
   ============================================================================= */
/* le caselle dei giorni nel registro ore */
body.pg-teacher .day-card{
  background: var(--pg-card) !important;
  border: 1px solid var(--pg-line-soft) !important;
  border-radius: var(--pg-r-m) !important;
  box-shadow: none !important;
  transition: border-color .16s ease, transform .16s ease, box-shadow .16s ease;
}
body.pg-teacher .day-card:hover{ border-color: var(--pg-line) !important; transform: translateY(-2px); box-shadow: var(--pg-shadow) !important; }
body.pg-teacher .day-card.today{ border-color: var(--pg-ink) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--pg-ink) 10%, transparent) !important; }
body.pg-teacher .day-card .badge,
body.pg-teacher .day-card [class*="badge"]{
  background: var(--pg-line-soft) !important;
  color: var(--pg-muted) !important;
  border-radius: 6px !important;
  font-family: var(--pg-mono) !important;
  font-size: 10px !important;
  letter-spacing: .04em;
  padding: 2px 6px !important;
}
body.pg-teacher .day-card.today .badge{ background: var(--pg-accent-wash) !important; color: var(--pg-accent-ink) !important; }
body.pg-teacher .day-card .ore,
body.pg-teacher .day-card [class*="hour"],
body.pg-teacher .day-card strong{ font-family: var(--pg-mono) !important; font-variant-numeric: tabular-nums; }

/* riepilogo della settimana: quattro dati, non quattro cartelli colorati */
body.pg-teacher .weekly-summary{
  background: transparent !important;
  border: 1px solid var(--pg-line-soft) !important;
  border-radius: var(--pg-r-m) !important;
  padding: 14px !important;
}
body.pg-teacher .summary-item{
  background: var(--pg-card) !important;
  border: 1px solid var(--pg-line-soft) !important;
  border-left: 3px solid var(--pg-accent) !important;
  border-radius: var(--pg-r-s) !important;
  box-shadow: none !important;
  padding: 12px 14px !important;
}
body.pg-teacher .summary-item > *:first-child{
  font-family: var(--pg-mono) !important;
  font-size: 22px !important;
  color: var(--pg-ink) !important;
  letter-spacing: -.03em;
}
body.pg-teacher .summary-item > *:last-child{
  font-size: 11.5px !important; text-transform: uppercase; letter-spacing: .07em; color: var(--pg-muted) !important;
}

/* elenco allievi: iniziali su inchiostro, azioni discrete */
body.pg-teacher .student-avatar{
  background: var(--pg-ink) !important;
  background-image: none !important;
  color: #fff !important;
  border-radius: 12px !important;
  font-family: var(--pg-display); font-weight: 700; font-size: 13px !important;
  box-shadow: none !important;
}
body.pg-teacher .register-btn{
  background: transparent !important;
  color: var(--pg-muted) !important;
  border: 1px solid var(--pg-line) !important;
  border-radius: 999px !important;
  width: 32px; height: 32px; padding: 0 !important;
  display: inline-grid; place-items: center;
  box-shadow: none !important;
}
body.pg-teacher .register-btn:hover{ border-color: var(--pg-accent) !important; color: var(--pg-accent) !important; background: var(--pg-accent-wash) !important; }
body.pg-teacher .register-btn.diary-btn:hover{ border-color: #5b4b8a !important; color: #5b4b8a !important; background: color-mix(in srgb, #5b4b8a 8%, white) !important; }
body.pg-teacher .student-item{ border-bottom: 1px solid var(--pg-line-soft) !important; }
body.pg-teacher .teacher-avatar{ background: var(--pg-ink) !important; color: #fff !important; }

/* navigazione delle settimane: due frecce e una pillola, non tre bolle colorate */
body.pg-teacher .nav-btn{
  background: var(--pg-card) !important;
  background-image: none !important;
  color: var(--pg-ink) !important;
  border: 1px solid var(--pg-line) !important;
  box-shadow: none !important;
  width: 40px !important; height: 40px !important;
  font-size: 1rem !important;
}
body.pg-teacher .nav-btn:hover{ transform: none !important; border-color: var(--pg-accent) !important; color: var(--pg-accent) !important; background: var(--pg-accent-wash) !important; box-shadow: none !important; }
body.pg-teacher .nav-btn:disabled{ opacity: .45; background: var(--pg-card) !important; }
body.pg-teacher .today-btn{
  background: var(--pg-ink) !important;
  background-image: none !important;
  color: #fff !important;
  border: 1px solid var(--pg-ink) !important;
  border-radius: 999px !important;
  height: 40px !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  font-family: var(--pg-body) !important; font-weight: 600 !important;
  letter-spacing: .01em;
}
body.pg-teacher .today-btn:hover{ transform: none !important; background: var(--pg-ink) !important; background-image: none !important; box-shadow: none !important; }
body.pg-teacher .today-btn.current-week,
body.pg-teacher .today-btn.current-week:hover{
  background: var(--pg-card) !important; background-image: none !important;
  color: var(--pg-muted) !important; border-color: var(--pg-line) !important;
  opacity: 1 !important; box-shadow: none !important;
}
/* la fascia che contiene la navigazione */
body.pg-teacher .week-navigation,
body.pg-teacher .week-selector{ background: transparent !important; box-shadow: none !important; border: 0 !important; }
body.pg-teacher .week-range,
body.pg-teacher .current-week-display{
  background: var(--pg-card) !important;
  border: 1px solid var(--pg-line-soft) !important;
  border-radius: 999px !important;
  box-shadow: none !important;
  font-family: var(--pg-mono) !important; font-size: 13px !important; color: var(--pg-ink) !important;
}

/* le etichette sulle caselle dei giorni */
body.pg-teacher .edit-indicator,
body.pg-teacher .time-restriction,
body.pg-teacher .absence-indicator,
body.pg-teacher .multiple-indicator{
  background: var(--pg-line-soft) !important;
  background-image: none !important;
  color: var(--pg-muted) !important;
  border: 0 !important;
  border-radius: 5px !important;
  font-family: var(--pg-mono) !important;
  font-size: 9.5px !important;
  font-weight: 500 !important;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 2px 6px !important;
  box-shadow: none !important;
  animation: none !important;
}
body.pg-teacher .edit-indicator{ background: var(--pg-accent-wash) !important; color: var(--pg-accent-ink) !important; }
body.pg-teacher .absence-indicator{ background: #fdecea !important; color: #a02a1c !important; }
body.pg-teacher .day-card.today{ animation: none !important; }
body.pg-teacher .day-card.editable::before{ display: none !important; }
body.pg-teacher .day-card .day-hours{
  background: var(--pg-line-soft) !important; background-image: none !important;
  color: var(--pg-ink) !important; border-radius: 6px !important;
  font-family: var(--pg-mono) !important; box-shadow: none !important;
}
body.pg-teacher .day-card.future{ opacity: .62; }
body.pg-teacher .day-card .day-subtitle{ color: var(--pg-muted) !important; font-size: 11px !important; }

/* dettagli del registro ore */
body.pg-teacher .calendar-container,
body.pg-teacher .calendar-scroll{ background: transparent !important; box-shadow: none !important; border: 0 !important; padding-left: 0 !important; padding-right: 0 !important; }
body.pg-teacher .day-hours,
body.pg-teacher .day-card.future .day-hours,
body.pg-teacher .day-card.read-only .day-hours,
body.pg-teacher .day-card.today .day-hours{
  background: var(--pg-line-soft) !important;
  border: 1px solid var(--pg-line-soft) !important;
  color: var(--pg-ink) !important;
  border-radius: 6px !important;
  font-size: .95rem !important;
}
body.pg-teacher .day-card.has-absence .day-hours{ background: #fdecea !important; border-color: #f6d5d0 !important; color: #a02a1c !important; }
body.pg-teacher .calendar-navigation{ background: transparent !important; box-shadow: none !important; border: 0 !important; }
body.pg-teacher .nav-controls{ background: transparent !important; box-shadow: none !important; gap: 10px !important; }
body.pg-teacher .week-info{ background: transparent !important; box-shadow: none !important; border: 0 !important; }
body.pg-teacher .week-info h4{
  font-family: var(--pg-mono) !important; font-size: 13px !important; font-weight: 500 !important;
  color: var(--pg-muted) !important; letter-spacing: .02em; text-transform: lowercase;
}
body.pg-teacher .day-card.future{ background: transparent !important; opacity: .55; }
body.pg-teacher .today-btn{
  width: auto !important; min-width: 96px; padding: 0 16px !important;
  white-space: nowrap; gap: 6px; line-height: 1;
}

/* contatore allievi e pulsanti delle schede laterali */
body.pg-teacher #studentCount{
  background: var(--pg-ink) !important;
  color: #fff !important;
  border-radius: 6px !important;
  font-family: var(--pg-mono) !important;
  font-size: .78rem !important;
  padding: 2px 7px !important;
}
body.pg-teacher .action-btn{
  display: inline-flex; align-items: center; justify-content: center;
  width: 100%;
  background: var(--pg-ink) !important;
  background-image: none !important;
  color: #fff !important;
  border: 1px solid var(--pg-ink) !important;
  border-radius: var(--pg-r-s) !important;
  padding: 10px 16px !important;
  font-family: var(--pg-body) !important; font-size: 14px !important; font-weight: 600 !important;
  cursor: pointer;
  box-shadow: none !important;
  transition: opacity .15s ease;
}
body.pg-teacher .action-btn:hover{ opacity: .88; transform: none !important; }
body.pg-teacher .action-card{ display: flex; flex-direction: column; gap: 8px; }
body.pg-teacher .action-card h3,
body.pg-teacher .action-card h4{ margin: 0 !important; }
body.pg-teacher .action-card p{ margin: 0 0 4px !important; color: var(--pg-muted) !important; font-size: 13.5px !important; }
/* intestazione della scheda planning: era una fascia viola in stile inline */
body.pg-teacher .card-header{
  background: transparent !important;
  background-image: none !important;
  color: var(--pg-ink) !important;
  border-bottom: 1px solid var(--pg-line-soft) !important;
}
body.pg-teacher .card-header .card-title{ color: var(--pg-ink) !important; font-family: var(--pg-display) !important; }
body.pg-teacher #planningArrow{ color: var(--pg-muted) !important; font-size: 12px; }
body.pg-teacher #planningLessonsCount{
  background: var(--pg-line-soft) !important; color: var(--pg-muted) !important;
  font-family: var(--pg-mono) !important; font-size: 12px !important;
}

/* sul telefono il dock è agganciato ai bordi: la voce sollevata non deve
   accavallarsi con l'angolo arrotondato della barra. */
@media (max-width: 560px){
  .pg-wavenav[data-pages]{ padding-left: 12px !important; padding-right: 12px !important; }
  .pg-wavenav.pg-dock button[aria-current="true"]{ border-radius: 14px; }
}

/* in modalità pagine la griglia a due colonne diventa una colonna sola: ogni
   pagina mostra un solo blocco, e il blocco prende tutta la larghezza. */
body.pg-teacher .dashboard-grid{
  display: block !important;
  min-height: 0 !important;
}
body.pg-teacher .teacher-actions{
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)) !important;
  gap: 16px !important;
}
body.pg-teacher .action-card{ text-align: left !important; padding: 18px !important; }
body.pg-teacher .action-icon{ font-size: 20px; }

/* corso con iscrizioni chiuse dalla segreteria: si vede, ma non si apre */
body[class*="pg-"] .info-card.course-readonly .corso-chiuso,
.corso-chiuso{
  margin: 10px 0 0; padding: 9px 11px;
  border-radius: 8px;
  background: #fdf3e7;
  border-left: 3px solid #a9741f;
  color: #7a5314;
  font-size: 12.5px; line-height: 1.4;
}
body[class*="pg-"] .info-card:has(.corso-chiuso){ opacity: .82; }
body[class*="pg-"] .info-card:has(.corso-chiuso) .info-card-subtitle{ color: #a9741f !important; font-weight: 600; }

/* Scheda "classi e studenti" del docente: le intestazioni erano testo bianco su
   sfumatura. Senza sfumatura sparivano: qui tornano leggibili, con l'interruttore
   delle iscrizioni ben visibile. */
body.pg-admin #teacher-expansion-content .tec-card-testa{
  background: var(--pg-line-soft) !important;
  background-image: none !important;
  color: var(--pg-ink) !important;
  border-bottom: 1px solid var(--pg-line-soft);
}
body.pg-admin #teacher-expansion-content .tec-card-testa > div{ color: var(--pg-ink) !important; }
body.pg-admin #teacher-expansion-content .tec-card-testa > div:nth-child(2){ color: var(--pg-muted) !important; }
body.pg-admin #teacher-expansion-content .tec-card-testa label{
  background: var(--pg-card) !important;
  border: 1px solid var(--pg-line);
  color: var(--pg-ink) !important;
}
body.pg-admin #teacher-expansion-content .tec-card-testa label:has(input:checked){
  background: #fdecea !important; border-color: #f0c8c2; color: #a02a1c !important;
}
body.pg-admin #teacher-expansion-content > div{ background: transparent !important; }

/* pillola "iscrizioni" nell'elenco corsi: si clicca per aprire o chiudere */
.pill-iscrizioni{
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 9px; border-radius: 999px; cursor: pointer;
  font-size: 11px; font-weight: 600; white-space: nowrap;
  border: 1px solid transparent; transition: filter .15s ease;
}
.pill-iscrizioni.aperte{ background: #eef7f1; color: #1c6b3f; border-color: #cfe6d8; }
.pill-iscrizioni.chiuse{ background: #fdecea; color: #a02a1c; border-color: #f2d7d1; }
.pill-iscrizioni:hover{ filter: brightness(.96); }

/* =============================================================================
   FINESTRE DEL PORTALE DOCENTE (tp-*) — erano rimaste alla veste precedente:
   intestazione attaccata al contenuto, linguette a pillola nel colore pieno,
   pulsanti verdi/viola/rossi. Qui prendono la stessa lingua del resto.
   ============================================================================= */
body.pg-teacher .tp-box{
  border-radius: var(--pg-r-l) !important;
  padding: 0 !important;
  box-shadow: 0 2px 8px rgba(23,20,32,.10), 0 30px 60px -30px rgba(23,20,32,.55) !important;
  border: 1px solid var(--pg-line-soft);
}
/* intestazione: titolo a sinistra, chiusura a destra, un filetto sotto */
body.pg-teacher .tp-box > h3{
  display: flex; align-items: center; gap: 12px;
  margin: 0 !important;
  padding: 16px 20px 14px !important;
  border-bottom: 1px solid var(--pg-line-soft);
  font-family: var(--pg-display) !important;
  font-size: 18px !important; font-weight: 700 !important; letter-spacing: -.02em;
  color: var(--pg-ink) !important;
  position: sticky; top: 0; background: var(--pg-card); z-index: 3;
}
body.pg-teacher .tp-box > h3 > span{ flex: 1; }
body.pg-teacher .tp-x{
  margin-left: auto;
  background: transparent !important;
  border: 1px solid var(--pg-line) !important;
  color: var(--pg-muted) !important;
  width: 30px !important; height: 30px !important;
  font-size: 14px !important; line-height: 1;
  display: grid; place-items: center;
}
body.pg-teacher .tp-x:hover{ border-color: var(--pg-ink) !important; color: var(--pg-ink) !important; }
/* Il contenuto respira con i margini, non col padding: i riquadri interni che
   hanno un fondo proprio (es. "Nuova voce") restano staccati dai bordi invece
   di allargarsi fino al filo del pannello. */
/* !important perché alcuni riquadri hanno il margine scritto nello stile in linea */
body.pg-teacher .tp-box > *:not(h3){ margin-left: 20px !important; margin-right: 20px !important; }
body.pg-teacher .tp-box{ padding-bottom: 20px !important; }

/* linguette: un solo binario chiaro, l'attiva è una scheda bianca */
body.pg-teacher .tp-tabs{
  background: var(--pg-paper);
  border-radius: 12px;
  padding: 4px !important;
  gap: 3px !important;
  margin: 16px 0 14px !important;
}
body.pg-teacher .tp-tab{
  border: 0 !important; background: transparent !important;
  border-radius: 9px !important;
  padding: 8px 14px !important;
  font-size: 13px !important; font-weight: 600 !important;
  color: var(--pg-muted) !important;
}
body.pg-teacher .tp-tab.on{
  background: var(--pg-card) !important; color: var(--pg-ink) !important;
  box-shadow: 0 1px 2px rgba(23,20,32,.10) !important;
}

/* pulsanti: inchiostro per l'azione, contorno per il resto. Niente semaforo. */
body.pg-teacher .tp-btn{
  border-radius: var(--pg-r-s) !important;
  padding: 9px 16px !important;
  font-family: var(--pg-body) !important;
  font-size: 13.5px !important; font-weight: 600 !important;
  background: var(--pg-ink) !important; color: #fff !important;
  border: 1px solid var(--pg-ink) !important;
  box-shadow: none !important;
}
body.pg-teacher .tp-btn:hover{ opacity: .9; }
body.pg-teacher .tp-btn.sec{
  background: var(--pg-card) !important; color: var(--pg-ink-2) !important;
  border-color: var(--pg-line) !important;
}
body.pg-teacher .tp-btn.sec:hover{ border-color: var(--pg-ink-2) !important; color: var(--pg-ink) !important; }
body.pg-teacher .tp-btn.ok{ background: #1c6b3f !important; border-color: #1c6b3f !important; }
body.pg-teacher .tp-btn.no{ background: #b3261e !important; border-color: #b3261e !important; }
body.pg-teacher .tp-btn.vio{ background: var(--pg-ink) !important; border-color: var(--pg-ink) !important; }

/* campi: stessi del modulo profilo */
body.pg-teacher .tp-field label{
  font-size: 12.5px !important; font-weight: 500 !important;
  color: var(--pg-muted) !important; margin: 10px 0 5px !important;
}
body.pg-teacher .tp-field input,
body.pg-teacher .tp-field textarea,
body.pg-teacher .tp-field select{
  border: 1px solid var(--pg-line) !important;
  border-radius: var(--pg-r-s) !important;
  padding: 11px 13px !important;
  font-size: 15px !important;
  background: var(--pg-card) !important;
  color: var(--pg-ink) !important;
}
body.pg-teacher .tp-field input:focus,
body.pg-teacher .tp-field textarea:focus,
body.pg-teacher .tp-field select:focus{
  outline: none;
  border-color: var(--pg-accent) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--pg-accent) 16%, transparent) !important;
}
body.pg-teacher .tp-muted{ color: var(--pg-muted) !important; font-size: 13.5px; }
/* riquadri interni (es. "Nuova voce") */
body.pg-teacher .tp-box fieldset,
body.pg-teacher .tp-box .tp-card,
body.pg-teacher .tp-box [style*="background:#f8f9fb"],
body.pg-teacher .tp-box [style*="background:#f6f7f9"]{
  background: color-mix(in srgb, var(--pg-paper) 55%, white) !important;
  border: 1px solid var(--pg-line-soft) !important;
  border-radius: var(--pg-r-m) !important;
}

/* =============================================================================
   DETTAGLIO ALLIEVO (portale docente) — la fascia sfumata alta 140px e i dati a
   semaforo lasciavano poco spazio a quello che serve: chi è, cosa fa, come sta
   messo con i pagamenti. Testata sottile, dati in righe, colore solo dove indica
   uno stato.
   ============================================================================= */
body.pg-teacher .student-modal-content{
  border-radius: var(--pg-r-l) !important;
  border: 1px solid var(--pg-line-soft);
  box-shadow: 0 2px 8px rgba(23,20,32,.10), 0 30px 60px -30px rgba(23,20,32,.55) !important;
}
body.pg-teacher .student-modal-header{
  background: var(--pg-card) !important;
  background-image: none !important;
  color: var(--pg-ink) !important;
  padding: 16px 20px 14px !important;
  border-bottom: 1px solid var(--pg-line-soft);
  border-radius: var(--pg-r-l) var(--pg-r-l) 0 0 !important;
  position: sticky; top: 0; z-index: 4;
}
body.pg-teacher .student-modal-header h3{
  font-family: var(--pg-display) !important;
  font-size: 18px !important; font-weight: 700 !important;
  letter-spacing: -.02em; color: var(--pg-ink) !important;
}
body.pg-teacher .student-modal-header .close-btn{
  background: transparent !important;
  border: 1px solid var(--pg-line) !important;
  color: var(--pg-muted) !important;
  width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center; font-size: 15px; line-height: 1;
  opacity: 1 !important;
}
body.pg-teacher .student-modal-header .close-btn:hover{ border-color: var(--pg-ink) !important; color: var(--pg-ink) !important; }
body.pg-teacher .student-modal-body{ padding: 18px 20px 22px !important; }

/* scheda anagrafica in cima */
body.pg-teacher .tm-profile{
  border: 1px solid var(--pg-line-soft) !important;
  border-radius: var(--pg-r-m) !important;
  padding: 14px 16px !important;
}
body.pg-teacher .tm-ava{
  background: var(--pg-ink) !important; background-image: none !important;
  border-radius: 13px !important;
  font-family: var(--pg-display); font-weight: 700;
}
body.pg-teacher .tm-chip{
  background: var(--pg-line-soft) !important;
  color: var(--pg-ink-2) !important;
  border-radius: 7px !important;
  font-size: 12.5px !important; font-weight: 500 !important;
  padding: 5px 10px !important;
}
/* i contatti sono cliccabili: si distinguono col colore della scuola, non col rosso */
body.pg-teacher .tm-chip.act{ background: var(--pg-accent-wash) !important; color: var(--pg-accent-ink) !important; }
/* numeri e date in monospaziato: si leggono a colpo */
body.pg-teacher .tm-chip:not(.act){ font-family: var(--pg-mono) !important; font-size: 12px !important; }
body.pg-teacher .tm-note{
  background: color-mix(in srgb, var(--pg-paper) 55%, white) !important;
  border: 1px solid var(--pg-line-soft) !important;
  border-left: 3px solid var(--pg-accent) !important;
  border-radius: var(--pg-r-s) !important;
  color: var(--pg-ink-2) !important;
}
body.pg-teacher .tm-sec{
  font-family: var(--pg-mono) !important;
  font-size: 10.5px !important; font-weight: 500 !important;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--pg-muted) !important;
}
body.pg-teacher .tm-count{
  background: var(--pg-ink) !important; color: #fff !important;
  border-radius: 6px !important; font-family: var(--pg-mono) !important;
  font-size: 11px !important; padding: 2px 7px !important;
}

/* =============================================================================
   INSERIMENTO ORE — era tutto rosso: bordi, testo, il totale. Il rosso ora dice
   solo "assenza"; la scelta attiva si riconosce dall'inchiostro.
   ============================================================================= */
body.pg-teacher #hoursModal .modal-content{ border-radius: var(--pg-r-l) !important; }
body.pg-teacher #hoursModal .modal-header{
  padding: 16px 20px 14px !important;
  border-bottom: 1px solid var(--pg-line-soft) !important;
  background: var(--pg-card) !important; background-image: none !important;
}
body.pg-teacher #hoursModal .modal-header h3{
  font-family: var(--pg-display) !important; font-size: 18px !important;
  color: var(--pg-ink) !important; font-weight: 700 !important;
}
/* le due scelte presenza/assenza */
body.pg-teacher #hoursModal label[for],
body.pg-teacher #hoursModal .radio-option,
body.pg-teacher #hoursModal [class*="option"]{
  border-radius: var(--pg-r-m) !important;
}
body.pg-teacher #hoursModal input[type="radio"] + label,
body.pg-teacher #hoursModal .radio-card{
  border: 1px solid var(--pg-line) !important;
  color: var(--pg-ink) !important;
}
body.pg-teacher #hoursModal .radio-card.selected,
body.pg-teacher #hoursModal input[type="radio"]:checked + label{
  border-color: var(--pg-ink) !important;
  background: color-mix(in srgb, var(--pg-ink) 4%, white) !important;
  color: var(--pg-ink) !important;
}
/* il totale: inchiostro su fondo chiaro, non rosso su rosso */
body.pg-teacher #hoursModal [id*="display"],
body.pg-teacher #hoursModal [id*="Display"],
body.pg-teacher #hoursModal .time-display{
  background: var(--pg-line-soft) !important;
  border: 1px solid var(--pg-line-soft) !important;
  color: var(--pg-ink) !important;
  border-radius: var(--pg-r-m) !important;
  font-family: var(--pg-mono) !important;
}
body.pg-teacher #hoursModal .time-display *{ color: var(--pg-ink) !important; }
/* i tasti dei numeri */
body.pg-teacher #hoursModal .time-btn,
body.pg-teacher #hoursModal .num-btn,
body.pg-teacher #hoursModal button[onclick*="setOre"],
body.pg-teacher #hoursModal button[onclick*="setMinuti"]{
  border: 1px solid var(--pg-line) !important;
  background: var(--pg-card) !important;
  color: var(--pg-ink) !important;
  border-radius: var(--pg-r-s) !important;
  font-family: var(--pg-mono) !important;
  font-weight: 500 !important;
  box-shadow: none !important;
}
body.pg-teacher #hoursModal .time-btn.active,
body.pg-teacher #hoursModal .num-btn.active,
body.pg-teacher #hoursModal .time-btn.selected{
  background: var(--pg-ink) !important; color: #fff !important; border-color: var(--pg-ink) !important;
}
body.pg-teacher #hoursModal select,
body.pg-teacher #hoursModal input[type="text"],
body.pg-teacher #hoursModal input[type="number"]{
  border: 1px solid var(--pg-line) !important;
  border-radius: var(--pg-r-s) !important;
  padding: 11px 13px !important;
  font-size: 15px !important;
  background: var(--pg-card) !important;
  color: var(--pg-ink) !important;
}
body.pg-teacher #hoursModal label{ color: var(--pg-muted) !important; font-weight: 500 !important; }
body.pg-teacher #hoursModal label span[style*="color"]{ color: var(--pg-muted) !important; }

/* linguette "Attività nel portale" nel dettaglio allievo: stesso binario delle altre */
body.pg-teacher .tpa-pills{
  background: var(--pg-paper);
  border-radius: 12px;
  padding: 4px !important;
  gap: 3px !important;
  display: inline-flex !important;
}
body.pg-teacher .tpa-pill{
  border: 0 !important; background: transparent !important;
  border-radius: 9px !important;
  padding: 8px 13px !important;
  font-size: 12.5px !important; font-weight: 600 !important;
  color: var(--pg-muted) !important;
}
body.pg-teacher .tpa-pill.on{
  background: var(--pg-card) !important; color: var(--pg-ink) !important;
  box-shadow: 0 1px 2px rgba(23,20,32,.10) !important;
}
body.pg-teacher .tpa-pill .n,
body.pg-teacher .tpa-pill span{ font-family: var(--pg-mono); font-size: 11px; }
/* i titoletti interni del dettaglio (es. "Situazione Rate") erano rossi in linea */
body.pg-teacher .student-modal-body [style*="color:#e74c3c"],
body.pg-teacher .student-modal-body [style*="color: #e74c3c"],
body.pg-teacher .student-modal-body [style*="color:var(--primary)"]{
  color: var(--pg-muted) !important;
  font-family: var(--pg-mono) !important;
  font-size: 10.5px !important;
  letter-spacing: .14em; text-transform: uppercase;
}

/* le due scelte "presenza / assenza": la selezionata si riconosce dall'inchiostro,
   il rosso resta al solo caso che lo merita (assenza) e solo come pallino */
body.pg-teacher .presence-option{
  border: 1px solid var(--pg-line) !important;
  border-radius: var(--pg-r-m) !important;
  background: var(--pg-card) !important;
  background-image: none !important;
  transition: border-color .15s ease, background .15s ease;
}
body.pg-teacher .presence-option:hover{
  border-color: var(--pg-ink-2) !important;
  background: color-mix(in srgb, var(--pg-ink) 3%, white) !important;
  background-image: none !important;
}
body.pg-teacher .presence-option:has(input:checked){
  border-color: var(--pg-ink) !important;
  background: color-mix(in srgb, var(--pg-ink) 5%, white) !important;
  background-image: none !important;
  box-shadow: 0 0 0 1px var(--pg-ink) inset;
}
body.pg-teacher .presence-option input[type="radio"]{ accent-color: var(--pg-ink) !important; }
body.pg-teacher .presence-label,
body.pg-teacher .presence-label.present,
body.pg-teacher .presence-label.absent,
body.pg-teacher .presence-option input[type="radio"]:checked + .presence-label{
  color: var(--pg-ink) !important;
  font-weight: 600 !important;
}
/* l'assenza si segnala con un punto rosso davanti, non colorando tutta la scritta */
body.pg-teacher .presence-label.absent::before{
  content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: var(--scaduta, #b3261e); margin-right: 7px; vertical-align: middle;
}
body.pg-teacher .presence-label.present::before{
  content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: #1c6b3f; margin-right: 7px; vertical-align: middle;
}

/* "Azzera" è un ripensamento, non un allarme: contorno, non barra rossa piena */
body.pg-teacher .clear-btn{
  background: var(--pg-card) !important;
  background-image: none !important;
  color: var(--pg-muted) !important;
  border: 1px solid var(--pg-line) !important;
  border-radius: var(--pg-r-s) !important;
  font-weight: 600 !important;
  box-shadow: none !important;
}
body.pg-teacher .clear-btn:hover{
  border-color: var(--scaduta, #b3261e) !important;
  color: var(--scaduta, #b3261e) !important;
  background: #fdecea !important;
}

/* =============================================================================
   FINESTRE DI DIALOGO E AVVISI — allievo e docente (2026-09-02)
   Toast, conferme, "scrivi alla segreteria", riepilogo ore del docente
   (settimana e mese). Erano rimasti alla veste vecchia: toast in alto a
   destra larghi 400px, conferme centrate col testo al filo del bordo,
   riepilogo mensile in gradiente. Sul telefono le conferme salgono dal basso
   come un foglio; i toast si appoggiano sopra il dock, dove sta il pollice.
   ============================================================================= */
@keyframes pgSheetIn{ from{ opacity: 0; transform: translateY(14px); } to{ opacity: 1; transform: none; } }

/* ------------------------------------------------------------------ toast --
   una striscia d'inchiostro, un segno di colore a sinistra per il tipo */
body.pg-student .toast-container,
body.pg-teacher .toast-container{
  top: auto !important;
  bottom: calc(96px + env(safe-area-inset-bottom, 0px)) !important;
  left: 12px !important; right: 12px !important;
  max-width: none !important;
  display: flex; flex-direction: column; gap: 8px; align-items: stretch;
  z-index: 12000 !important;     /* sopra ogni finestra (2000 / 4000 / 9998) */
  pointer-events: none;
}
@media (min-width: 761px){
  body.pg-student .toast-container,
  body.pg-teacher .toast-container{
    top: 18px !important; bottom: auto !important;
    left: auto !important; right: 18px !important;
    width: min(380px, calc(100vw - 36px));
  }
}
body.pg-student .toast,
body.pg-teacher .toast{
  position: relative;
  background: var(--pg-ink) !important;
  background-image: none !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 14px !important;
  padding: 12px 14px 12px 22px !important;
  margin: 0 !important;
  width: 100%; max-width: 100% !important;
  box-shadow: 0 12px 32px -12px rgba(23,20,32,.5) !important;
  font-family: var(--pg-body);
  font-size: 14px; line-height: 1.45;
  opacity: 0 !important;
  transform: translateY(10px) !important;
  transition: transform .2s ease, opacity .2s ease !important;
  pointer-events: all;
}
body.pg-student .toast.show,
body.pg-teacher .toast.show{ opacity: 1 !important; transform: none !important; }
body.pg-student .toast::before,
body.pg-teacher .toast::before{
  content: ''; position: absolute; left: 10px; top: 12px; bottom: 12px; width: 3px; border-radius: 3px;
  background: rgba(255,255,255,.35);
}
body.pg-student .toast.success::before, body.pg-teacher .toast.success::before{ background: #5fd3a3; }
body.pg-student .toast.warning::before, body.pg-teacher .toast.warning::before{ background: #ffc466; }
body.pg-student .toast.error::before,   body.pg-teacher .toast.error::before{   background: #ff8a80; }
body.pg-student .toast.info::before,    body.pg-teacher .toast.info::before{    background: var(--pg-accent); }
/* allievo: titolo piccolo e chiaro, messaggio bianco */
body.pg-student .toast-header{ margin-bottom: 2px !important; }
body.pg-student .toast-title{ font-size: 12.5px !important; font-weight: 600 !important; color: rgba(255,255,255,.72) !important; }
body.pg-student .toast-message{ color: #fff !important; font-size: 14px !important; line-height: 1.45 !important; }
body.pg-student .toast-close{ color: rgba(255,255,255,.7) !important; width: 26px !important; height: 26px !important; }
body.pg-student .toast-close:hover{ background: rgba(255,255,255,.14) !important; color: #fff !important; transform: none !important; }
/* docente: una riga sola (icona, testo, chiusura) */
body.pg-teacher .toast > div{ align-items: flex-start !important; }
body.pg-teacher .toast > div > div{ flex: 1; min-width: 0; }
body.pg-teacher .toast button{ color: rgba(255,255,255,.7) !important; line-height: 1; padding: 0 2px; }
body.pg-teacher .toast button:hover{ color: #fff !important; }

/* ------------------------------------------------- conferma dell'allievo --
   testo allineato a sinistra, icona a misura, due pulsanti: contorno e inchiostro */
body.pg-student .confirm-modal{
  background: rgba(23,20,32,.55) !important;
  backdrop-filter: blur(3px);
  z-index: 11000 !important;
  padding: 20px !important;
}
body.pg-student .confirm-modal .confirm-content{
  background: var(--pg-card) !important;
  border: 1px solid var(--pg-line-soft);
  border-radius: var(--pg-r-l) !important;
  padding: 22px 22px 20px !important;
  max-width: 420px !important;
  text-align: left !important;
  box-shadow: var(--pg-shadow-lift) !important;
  animation: pgSheetIn .22s ease-out !important;
}
body.pg-student .confirm-icon{ font-size: 26px !important; line-height: 1; margin: 0 0 10px !important; }
body.pg-student .confirm-title{
  font-family: var(--pg-display) !important;
  font-size: 19px !important; font-weight: 700 !important; letter-spacing: -.02em;
  color: var(--pg-ink) !important; margin: 0 0 6px !important;
}
body.pg-student .confirm-message{
  font-size: 14.5px !important; line-height: 1.55 !important;
  color: var(--pg-ink-2) !important; margin: 0 0 20px !important;
}
body.pg-student .confirm-buttons{ justify-content: flex-end !important; gap: 10px !important; }
body.pg-student .confirm-btn{
  border-radius: 999px !important;
  padding: 11px 18px !important;
  font-family: var(--pg-body) !important; font-weight: 600 !important; font-size: 14px !important;
  min-width: 0 !important;
  box-shadow: none !important;
  transition: background .16s ease, border-color .16s ease, color .16s ease;
}
body.pg-student .confirm-btn.primary{ background: var(--pg-ink) !important; color: #fff !important; border: 1px solid var(--pg-ink) !important; }
body.pg-student .confirm-btn.primary:hover{ background: var(--pg-accent) !important; border-color: var(--pg-accent) !important; transform: none !important; box-shadow: none !important; }
body.pg-student .confirm-btn.secondary{ background: transparent !important; color: var(--pg-ink-2) !important; border: 1px solid var(--pg-line) !important; }
body.pg-student .confirm-btn.secondary:hover{ border-color: var(--pg-ink-2) !important; color: var(--pg-ink) !important; transform: none !important; box-shadow: none !important; }

/* -------------------------------------------------- conferma del docente --
   tpConfirm crea al volo un .tp-box senza intestazione (overlay z-index 4000):
   ereditava padding:0 dalla regola delle finestre grandi e il testo finiva al
   filo del bordo. Qui torna una scheda con i suoi margini. */
body.pg-teacher .tp-modal[style*="4000"]{ background: rgba(23,20,32,.55) !important; backdrop-filter: blur(3px); }
body.pg-teacher .tp-modal[style*="4000"] > .tp-box{
  padding: 22px 22px 20px !important;
  max-width: 420px !important;
  text-align: left !important;
  animation: pgSheetIn .22s ease-out;
}
body.pg-teacher .tp-modal[style*="4000"] > .tp-box > *{ margin-left: 0 !important; margin-right: 0 !important; }
body.pg-teacher .tp-modal[style*="4000"] > .tp-box > div:nth-child(1){ font-size: 26px !important; line-height: 1; margin-bottom: 10px !important; }
body.pg-teacher .tp-modal[style*="4000"] > .tp-box > div:nth-child(2){
  font-family: var(--pg-display) !important;
  font-size: 19px !important; font-weight: 700 !important; letter-spacing: -.02em;
  color: var(--pg-ink) !important; margin: 0 0 6px !important;
}
body.pg-teacher .tp-modal[style*="4000"] > .tp-box > div:nth-child(3){
  font-size: 14.5px !important; line-height: 1.55 !important; color: var(--pg-ink-2) !important;
}
body.pg-teacher .tp-modal[style*="4000"] > .tp-box > div:last-child{ justify-content: flex-end !important; gap: 10px !important; margin-top: 20px !important; }
body.pg-teacher .tp-modal[style*="4000"] .tp-btn{ padding: 11px 18px !important; font-size: 14px !important; }

/* sul telefono le conferme salgono dal basso, a tutta larghezza, con la maniglia */
@media (max-width: 760px){
  body.pg-student .confirm-modal,
  body.pg-teacher .tp-modal[style*="4000"]{ align-items: flex-end !important; padding: 0 !important; }
  body.pg-student .confirm-modal .confirm-content,
  body.pg-teacher .tp-modal[style*="4000"] > .tp-box{
    max-width: none !important; width: 100% !important; margin: 0 !important;
    border-radius: 22px 22px 0 0 !important;
    border-bottom: 0 !important;
    padding: 14px 20px calc(18px + env(safe-area-inset-bottom, 0px)) !important;
  }
  body.pg-student .confirm-modal .confirm-content::before,
  body.pg-teacher .tp-modal[style*="4000"] > .tp-box::before{
    content: ''; display: block; width: 36px; height: 4px; border-radius: 2px;
    background: var(--pg-line); margin: 0 auto 16px;
  }
  body.pg-student .confirm-buttons,
  body.pg-teacher .tp-modal[style*="4000"] > .tp-box > div:last-child{
    display: grid !important; grid-template-columns: 1fr 1fr;
  }
  body.pg-student .confirm-btn,
  body.pg-teacher .tp-modal[style*="4000"] .tp-btn{ width: 100%; padding: 13px 16px !important; }
}

/* ------------------------------------- "scrivi alla segreteria" e affini --
   i riquadri scritti in linea (azzurrino della risposta, grigio dell'info) */
body.pg-student #msgStorico [style*="#f0f7ff"]{
  background: color-mix(in srgb, var(--pg-paper) 55%, white) !important;
  border-left: 3px solid var(--pg-accent) !important;
  border-radius: var(--pg-r-s) !important;
}
body.pg-student #msgStorico [style*="#f0f7ff"] b{
  color: var(--pg-muted) !important;
  font-family: var(--pg-mono); font-size: 10.5px !important;
  letter-spacing: .1em; text-transform: uppercase; margin-bottom: 3px;
}
body.pg-student #msgStorico [style*="#f39c12"]{ color: var(--pg-warn) !important; }
body.pg-student #msgStorico > div:first-child{ font-family: var(--pg-display); font-size: 14px !important; }
body.pg-student #msgSegreteriaModal p[style*="#888"],
body.pg-student #assenzaModal p[style*="#888"],
body.pg-student #distintaModal p[style*="#666"]{ color: var(--pg-muted) !important; font-size: 12.5px !important; }
body.pg-student #assenzaInfo,
body.pg-student #distintaRateList{
  background: color-mix(in srgb, var(--pg-paper) 55%, white) !important;
  border: 1px solid var(--pg-line-soft);
  border-radius: var(--pg-r-s) !important;
}

/* ----------------------------------------- riepilogo ore del docente ------
   settimana: sul telefono piccolo due colonne, non quattro cartelli in fila */
@media (max-width: 480px){
  body.pg-teacher .summary-grid{ grid-template-columns: 1fr 1fr !important; gap: 8px !important; }
}
/* mese (monthlyReportModal): intestazione come le altre finestre */
body.pg-teacher #monthlyReportModal .modal-content{ border-radius: var(--pg-r-l) !important; }
body.pg-teacher #monthlyReportModal .modal-header{
  padding: 16px 20px 14px !important;
  border-bottom: 1px solid var(--pg-line-soft) !important;
  background: var(--pg-card) !important; background-image: none !important;
}
body.pg-teacher #monthlyReportModal .modal-header h3{
  font-family: var(--pg-display) !important; font-size: 18px !important;
  color: var(--pg-ink) !important; font-weight: 700 !important;
}
body.pg-teacher #monthSelect{
  border: 1px solid var(--pg-line) !important;
  border-radius: var(--pg-r-s) !important;
  padding: 11px 13px !important; font-size: 15px !important;
  background: var(--pg-card) !important; color: var(--pg-ink) !important;
}
body.pg-teacher #monthSelect:focus{
  outline: none; border-color: var(--pg-accent) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--pg-accent) 16%, transparent) !important;
}
body.pg-teacher #monthSelectionSection small{ color: var(--pg-muted) !important; font-size: 12.5px !important; }
body.pg-teacher #monthSelectionSection > div[style*="display: flex"]{ gap: 10px !important; margin-top: 18px !important; flex-wrap: wrap; }
/* il totale del mese: l'unico blocco pieno, il numero in mono come sul tabellone */
body.pg-teacher .summary-highlight{
  background: var(--pg-ink) !important; background-image: none !important;
  color: #fff !important;
  border-radius: var(--pg-r-m) !important;
  padding: 18px 20px !important;
  text-align: left !important;
  margin-bottom: 12px !important;
}
body.pg-teacher .summary-highlight h3{
  font-family: var(--pg-display) !important; font-size: 13px !important; font-weight: 600 !important;
  color: rgba(255,255,255,.72) !important; margin: 0 0 8px !important; letter-spacing: .01em;
}
body.pg-teacher .summary-highlight p{ font-size: 14px !important; line-height: 1.5; color: rgba(255,255,255,.8) !important; opacity: 1 !important; }
body.pg-teacher .summary-highlight p strong{
  display: block;
  font-family: var(--pg-mono) !important; font-size: 34px; font-weight: 600;
  color: #fff; letter-spacing: -.03em; line-height: 1.1; margin-bottom: 4px;
  font-variant-numeric: tabular-nums;
}
/* le sezioni del report: schede piatte, titoli in inchiostro (erano nel colore primario) */
body.pg-teacher .report-section{
  background: var(--pg-card) !important;
  border: 1px solid var(--pg-line-soft) !important;
  border-radius: var(--pg-r-m) !important;
  padding: 14px 16px !important;
  margin-bottom: 12px !important;
}
body.pg-teacher .report-section h4{
  font-family: var(--pg-display) !important; font-size: 15px !important; font-weight: 600 !important;
  color: var(--pg-ink) !important; margin: 0 0 10px !important; letter-spacing: -.01em;
}
body.pg-teacher .report-grid{ grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; margin-bottom: 0 !important; }
@media (min-width: 640px){ body.pg-teacher .report-grid{ grid-template-columns: repeat(4, 1fr) !important; } }
body.pg-teacher .report-stat{
  background: color-mix(in srgb, var(--pg-paper) 55%, white) !important;
  border: 1px solid var(--pg-line-soft) !important;
  border-left: 3px solid var(--pg-accent) !important;
  border-radius: var(--pg-r-s) !important;
  padding: 10px 12px !important;
  text-align: left !important;
}
body.pg-teacher .report-stat-number{
  font-family: var(--pg-mono) !important; font-size: 19px !important; font-weight: 600 !important;
  color: var(--pg-ink) !important; letter-spacing: -.02em; margin-bottom: 2px !important;
  font-variant-numeric: tabular-nums;
}
body.pg-teacher .report-stat-label{
  font-size: 11.5px !important; font-weight: 500 !important; color: var(--pg-muted) !important;
  text-transform: uppercase; letter-spacing: .07em;
}
/* ore per sede e per materia: righe, con le ore a destra in mono */
body.pg-teacher .breakdown-item{
  flex-direction: row !important; align-items: center !important; gap: 10px !important;
  padding: 9px 0 !important;
  border-bottom: 1px solid var(--pg-line-soft) !important;
}
body.pg-teacher .breakdown-item:hover{ background: transparent !important; }
body.pg-teacher .breakdown-item:last-child{ border-bottom: 0 !important; }
body.pg-teacher .breakdown-name{ flex: 1; min-width: 0; font-size: 14px !important; font-weight: 500 !important; color: var(--pg-ink) !important; }
body.pg-teacher .breakdown-value{ align-self: auto !important; }
body.pg-teacher .breakdown-hours{ font-family: var(--pg-mono) !important; font-size: 14px !important; color: var(--pg-ink) !important; font-variant-numeric: tabular-nums; }
body.pg-teacher .breakdown-percentage{
  background: var(--pg-accent-wash) !important; color: var(--pg-accent-ink) !important;
  font-family: var(--pg-mono) !important; font-size: 11px !important;
  border-radius: 6px !important; padding: 2px 6px !important;
}
/* calendario del mese: caselle piccole, quattro per riga sul telefono */
body.pg-teacher .daily-calendar{ grid-template-columns: repeat(4, 1fr) !important; gap: 6px !important; margin-top: 8px !important; }
@media (min-width: 640px){ body.pg-teacher .daily-calendar{ grid-template-columns: repeat(7, 1fr) !important; } }
body.pg-teacher .daily-item{
  background: var(--pg-card) !important;
  border: 1px solid var(--pg-line-soft) !important;
  border-radius: var(--pg-r-s) !important;
  padding: 8px 6px !important;
}
body.pg-teacher .daily-date{ font-size: 11px !important; color: var(--pg-muted) !important; margin-bottom: 3px !important; text-transform: capitalize; }
body.pg-teacher .daily-hours{ font-family: var(--pg-mono) !important; font-size: 13px !important; font-weight: 600 !important; color: var(--pg-ink) !important; font-variant-numeric: tabular-nums; }
/* azioni in fondo: un filetto, non una riga nera; sul telefono in colonna */
body.pg-teacher .report-actions{
  border-top: 1px solid var(--pg-line-soft) !important;
  margin-top: 16px !important; padding-top: 14px !important;
  gap: 8px !important; justify-content: flex-end !important;
}
@media (max-width: 760px){
  body.pg-teacher .report-actions{ flex-direction: column !important; }
  body.pg-teacher .report-actions .btn{ width: 100% !important; }
}
body.pg-teacher #reportLoading > div{ border-color: var(--pg-line-soft) !important; border-top-color: var(--pg-ink) !important; }
body.pg-teacher #reportLoading p{ color: var(--pg-muted) !important; }

@media (prefers-reduced-motion: reduce){
  body.pg-student .toast, body.pg-teacher .toast{ transition: none !important; }
  body.pg-student .confirm-modal .confirm-content,
  body.pg-teacher .tp-modal[style*="4000"] > .tp-box{ animation: none !important; }
}

/* =============================================================================
   DUE CORREZIONI AL PORTALE DOCENTE (2026-09-02)

   1. Inserimento ore: il pulsante "Salva registrazione" non si raggiungeva.
      La skin rende .modal-content un contenitore flex in colonna; nelle finestre
      senza .modal-body dichiarato i figli si comprimevano (flex-shrink:1) e il
      fondo del modulo restava fuori dall'area scorrevole. Ora i figli liberi non
      si comprimono e su telefono la riga dei pulsanti resta agganciata in fondo.
   2. Scheda allievo: lo stato pagamenti sbordava a destra. Le celle della griglia
      hanno min-width:auto e dentro c'e' testo con white-space:nowrap ("Dovuto:
      €350,00"), quindi la griglia si allargava oltre il pannello invece di
      mandare a capo.
   ============================================================================= */

/* --- 1a. i figli liberi di una finestra non si comprimono mai ---------------- */
body[class*="pg-"] .modal-content > *:not(.modal-body),
body[class*="pg-"] .pt-modal > *:not(.modal-body),
body[class*="pg-"] .modal-box > *:not(.modal-body){ flex: 0 0 auto; min-height: 0; }

/* --- 1b. inserimento ore: pannello a tutta altezza, azioni sempre in vista --- */
body.pg-teacher #hoursModal .modal-content{
  height: auto !important;
  max-height: calc(100dvh - 48px) !important;
  padding: 0 !important;
  overflow-y: auto !important;
}
body.pg-teacher #hoursModal .modal-header{ margin-bottom: 0 !important; }
body.pg-teacher #hoursModal #existingRecordsList,
body.pg-teacher #hoursModal #newRecordForm{ padding: 16px 20px 0 !important; }
body.pg-teacher #hoursModal #recordsContainer{ margin-bottom: 16px !important; }
/* la riga dei pulsanti: un filetto sopra, appoggiata in fondo al pannello */
body.pg-teacher #hoursModal #hoursForm > div:last-child{
  position: sticky; bottom: 0; z-index: 5;
  margin: 18px -20px 0 !important;
  padding: 12px 20px calc(12px + env(safe-area-inset-bottom, 0px)) !important;
  background: var(--pg-card);
  border-top: 1px solid var(--pg-line-soft);
  gap: 10px !important;
  justify-content: flex-end;
}
body.pg-teacher #hoursModal #hoursForm > div:last-child .btn{ margin: 0 !important; }
@media (max-width: 768px){
  body.pg-teacher #hoursModal{ padding: 0 !important; align-items: stretch !important; }
  body.pg-teacher #hoursModal .modal-content{
    height: 100dvh !important;
    max-height: 100dvh !important;
    width: 100% !important; max-width: none !important;
    margin: 0 !important;
    border-radius: 0 !important;
    border: 0 !important;
  }
  /* i due pulsanti a metà: si premono col pollice senza cercarli */
  body.pg-teacher #hoursModal #hoursForm > div:last-child{
    display: grid !important; grid-template-columns: 1fr 1fr;
  }
  body.pg-teacher #hoursModal #hoursForm > div:last-child .btn{ width: 100%; padding: 13px 14px !important; }
}

/* --- 1c. il tastierino nella veste nuova (era rimasto viola e squadrato) ----- */
body.pg-teacher #hoursModal .time-input-section{
  background: color-mix(in srgb, var(--pg-paper) 55%, white) !important;
  border: 1px solid var(--pg-line-soft) !important;
  border-radius: var(--pg-r-m) !important;
  padding: 14px !important;
  margin: 14px 0 !important;
}
body.pg-teacher #hoursModal .time-input-section > h4,
body.pg-teacher #hoursModal .input-section h4{
  font-family: var(--pg-mono) !important;
  font-size: 10.5px !important; font-weight: 500 !important;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--pg-muted) !important;
  margin: 0 0 8px !important;
}
body.pg-teacher #hoursModal .time-display{
  font-size: clamp(30px, 9vw, 40px) !important;
  font-weight: 600 !important;
  letter-spacing: -.03em;
  padding: 12px !important;
  margin-bottom: 14px !important;
  font-variant-numeric: tabular-nums;
}
body.pg-teacher #hoursModal .number-pad{ gap: 6px !important; margin-bottom: 10px !important; }
body.pg-teacher #hoursModal .minutes-buttons{ gap: 6px !important; }
body.pg-teacher #hoursModal .number-btn,
body.pg-teacher #hoursModal .minute-btn{
  background: var(--pg-card) !important;
  border: 1px solid var(--pg-line) !important;
  border-radius: var(--pg-r-s) !important;
  color: var(--pg-ink) !important;
  font-family: var(--pg-mono) !important;
  font-size: 17px !important; font-weight: 500 !important;
  padding: 12px 8px !important;
  box-shadow: none !important;
  transition: border-color .14s ease, background .14s ease, color .14s ease;
}
body.pg-teacher #hoursModal .number-btn:hover,
body.pg-teacher #hoursModal .minute-btn:hover{
  background: var(--pg-card) !important;
  border-color: var(--pg-ink-2) !important;
  color: var(--pg-ink) !important;
  transform: none !important;
}
body.pg-teacher #hoursModal .number-btn.active,
body.pg-teacher #hoursModal .number-btn.selected,
body.pg-teacher #hoursModal .minute-btn.active{
  background: var(--pg-ink) !important;
  border-color: var(--pg-ink) !important;
  color: #fff !important;
}
body.pg-teacher #hoursModal .clear-btn{ grid-column: span 3; padding: 10px !important; font-size: 13px !important; }
/* l'avviso di assenza: una riga, non un cartello rosso */
body.pg-teacher #hoursModal #absenceNotice{
  background: color-mix(in srgb, var(--scaduta, #b3261e) 6%, white) !important;
  border: 1px solid color-mix(in srgb, var(--scaduta, #b3261e) 22%, white) !important;
  border-radius: var(--pg-r-s) !important;
  padding: 10px 12px !important;
}
body.pg-teacher #hoursModal #absenceNotice > div{
  color: var(--scaduta, #b3261e) !important;
  font-size: 13.5px !important; font-weight: 600 !important;
  text-align: left !important;
}

/* --- 2. stato pagamenti: le celle mandano a capo invece di sbordare --------- */
body.pg-teacher .student-modal-body{ overflow-x: hidden; }
body[class*="pg-"] .payment-grid{
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr)) !important;
  gap: 8px !important;
  width: 100% !important;
  margin: 0 !important;
}
@media (max-width: 768px){
  body[class*="pg-"] .payment-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}
/* la causa vera: min-width:auto sulle celle della griglia */
body[class*="pg-"] .payment-grid > *{ min-width: 0 !important; }
body[class*="pg-"] .payment-item{
  padding: 10px 8px !important;
  min-height: 0 !important;
  overflow-wrap: anywhere;
  animation: none !important;
}
body[class*="pg-"] .payment-item > *{ max-width: 100%; min-width: 0; }
body[class*="pg-"] .payment-amount{
  font-size: 20px !important; line-height: 1 !important;
  margin-bottom: 5px !important; min-height: 0 !important;
}
body[class*="pg-"] .payment-label{
  font-family: var(--pg-body) !important;
  font-size: 11.5px !important; font-weight: 500 !important;
  color: var(--pg-muted) !important;
  white-space: normal !important;      /* il nome della rata va a capo, non troncato */
  overflow: visible !important; text-overflow: clip !important;
  line-height: 1.3 !important;
}
/* gli importi sotto l'icona: in mono, a capo quando serve */
body[class*="pg-"] .payment-item > div:last-child:not(.payment-label){
  font-family: var(--pg-mono) !important;
  font-size: 11px !important;
  color: var(--pg-muted) !important;
  text-align: center;
  white-space: normal !important;
  font-variant-numeric: tabular-nums;
}
body[class*="pg-"] .payment-details{
  background: color-mix(in srgb, var(--pg-paper) 55%, white) !important;
  border: 1px solid var(--pg-line-soft) !important;
  border-radius: var(--pg-r-m) !important;
  padding: 12px 14px !important;
}
body[class*="pg-"] .payment-details h5{
  font-family: var(--pg-mono) !important;
  font-size: 10.5px !important; font-weight: 500 !important;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--pg-muted) !important;
  margin: 0 0 10px !important;
}
/* il riquadro del pacchetto lezioni: scritto in linea, sbordava con nomi lunghi */
body.pg-teacher .student-modal-body [style*="linear-gradient(135deg,#f0f7ff"]{
  background: color-mix(in srgb, var(--pg-paper) 55%, white) !important;
  border: 1px solid var(--pg-line-soft) !important;
  border-radius: var(--pg-r-m) !important;
}
body.pg-teacher .student-modal-body [style*="linear-gradient(135deg,#f0f7ff"] > div{ min-width: 0; flex-wrap: wrap; }
body.pg-teacher .student-modal-body [style*="linear-gradient(135deg,#f0f7ff"] strong{ color: var(--pg-ink) !important; overflow-wrap: anywhere; }

/* =============================================================================
   PAGINA DI ACCESSO (2026-09-02) — era rimasta indietro: la skin le dava solo il
   carattere dei titoli, il resto stava ancora alla veste precedente (nome in
   gradiente, campi con bordo doppio, riflesso che attraversa i pulsanti).

   Il difetto piu' visibile era la scelta del ruolo: "Allievo" e' selezionato al
   caricamento e diventava un blocco pieno nel colore della scuola con sotto
   un'ombra viola scritta a mano (rgba(102,126,234,.3)) — viola sotto un pulsante
   rosso. Stessa cosa nel passaggio del mouse e nell'anello di messa a fuoco dei
   campi. Qui la scelta del ruolo prende il modo usato in tutta l'app: un binario
   solo, la voce attiva e' una scheda bianca con un filo di colore sotto.
   ============================================================================= */
body.pg-login{
  background: var(--pg-paper) !important;
  background-image: none !important;
  color: var(--pg-ink);
  font-family: var(--pg-body);
}
body.pg-login::before{ display: none !important; }   /* il velo a pallini */

body.pg-login .login-container{
  background: var(--pg-card) !important;
  border: 1px solid var(--pg-line-soft) !important;
  border-radius: var(--pg-r-l) !important;
  box-shadow: var(--pg-shadow) !important;
  backdrop-filter: none !important;
  animation: none !important;
  padding: 28px 26px 26px !important;
  max-width: 440px !important;
}
@media (max-width: 768px){
  body.pg-login .login-container{ padding: 22px 18px 20px !important; }
}

/* il nome della scuola: inchiostro, non testo in gradiente */
body.pg-login .logo{ margin-bottom: 20px !important; }
body.pg-login .logo h1{
  font-family: var(--pg-display) !important;
  font-size: clamp(26px, 6vw, 32px) !important;
  font-weight: 700 !important;
  letter-spacing: -.035em;
  background: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  -webkit-text-fill-color: currentColor !important;
  color: var(--pg-ink) !important;
  margin-bottom: 4px !important;
}
body.pg-login .logo h1 img{ width: 30px !important; height: 30px !important; }
body.pg-login .logo p{ color: var(--pg-muted) !important; font-size: 13.5px !important; }

/* le bandiere: stesso binario delle linguette, non pastiglie grigie */
body.pg-login .lang-bar-login{
  background: var(--pg-paper);
  border-radius: 11px;
  padding: 3px;
  gap: 2px !important;
  width: fit-content; margin: 0 auto 20px !important;
}
body.pg-login .lang-bar-login .lang-flag-btn{
  border-radius: 8px !important;
  padding: 5px 9px !important;
  font-size: 17px !important;
  opacity: .45;
  transition: opacity .16s ease, background .16s ease;
}
body.pg-login .lang-bar-login .lang-flag-btn:hover{ opacity: .85; background: transparent !important; }
body.pg-login .lang-bar-login .lang-flag-btn.active{
  opacity: 1;
  background: var(--pg-card) !important;
  box-shadow: 0 1px 2px rgba(23,20,32,.10);
}

/* --- la scelta del ruolo: un binario, la voce attiva e' una scheda ---------- */
body.pg-login .role-selector{
  background: var(--pg-paper) !important;
  border-radius: 13px !important;
  padding: 4px !important;
  gap: 3px !important;
  margin-bottom: 20px !important;
}
body.pg-login .role-btn{
  background: transparent !important;
  color: var(--pg-muted) !important;
  border: 0 !important;
  border-radius: 10px !important;
  padding: 10px 6px !important;
  font-family: var(--pg-body) !important;
  font-size: 13px !important; font-weight: 600 !important;
  gap: 5px !important;
  transform: none !important;
  box-shadow: none !important;
  transition: background .16s ease, color .16s ease;
}
body.pg-login .role-btn > span:first-child{ font-size: 17px; line-height: 1; }
body.pg-login .role-btn:hover:not(:disabled):not(.active){
  background: color-mix(in srgb, var(--pg-ink) 4%, transparent) !important;
  color: var(--pg-ink-2) !important;
}
body.pg-login .role-btn.active,
body.pg-login .role-btn.active:hover{
  position: relative;
  background: var(--pg-card) !important;
  color: var(--pg-ink) !important;
  transform: none !important;
  box-shadow: 0 1px 2px rgba(23,20,32,.10) !important;
}
/* il filo di colore della scuola: dice quale porta stai per aprire */
body.pg-login .role-btn.active::after{
  content: '';
  position: absolute; left: 14px; right: 14px; bottom: 5px; height: 2px;
  border-radius: 2px;
  background: var(--pg-accent);
}
@media (max-width: 768px){
  body.pg-login .role-selector{ grid-template-columns: 1fr 1fr 1fr !important; }
  body.pg-login .role-btn{ flex-direction: column !important; padding: 9px 4px !important; font-size: 12px !important; }
  body.pg-login .role-btn.active::after{ left: 10px; right: 10px; }
}

/* --- campi: una linea sottile, la messa a fuoco nel colore della scuola ----- */
body.pg-login .form-group{ margin-bottom: 14px !important; }
body.pg-login .form-group label{
  font-size: 13px !important; font-weight: 500 !important;
  color: var(--pg-ink-2) !important;
  margin-bottom: 6px !important;
}
body.pg-login .form-control{
  border: 1px solid var(--pg-line) !important;
  border-radius: var(--pg-r-s) !important;
  padding: 12px 13px !important;
  font-family: var(--pg-body) !important;
  font-size: 15px !important;
  background: var(--pg-card) !important;
  color: var(--pg-ink) !important;
  transition: border-color .16s ease, box-shadow .16s ease;
}
/* La messa a fuoco dice "sei qui", non "hai sbagliato": qui resta inchiostro.
   Il campo email prende il fuoco da solo al caricamento e con l'accento rosso di
   MusicaSuite sembrava un campo in errore appena si apriva la pagina. */
body.pg-login .form-control:focus{
  border-color: var(--pg-ink) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--pg-ink) 10%, transparent) !important;
  transform: none !important;
}
body.pg-login .remember-me{
  font-size: 13.5px !important;
  color: var(--pg-ink-2) !important;
}
body.pg-login .remember-me input[type="checkbox"]{ accent-color: var(--pg-ink) !important; }
body.pg-login .remember-me:hover{ color: var(--pg-ink) !important; }

/* --- pulsanti: inchiostro per l'azione, niente riflesso che attraversa ------ */
body.pg-login .btn{
  border-radius: 999px !important;
  padding: 13px 18px !important;
  font-family: var(--pg-body) !important;
  font-size: 15px !important; font-weight: 600 !important;
  overflow: visible !important;
  box-shadow: none !important;
}
body.pg-login .btn::before{ display: none !important; }
body.pg-login .btn-primary{
  background: var(--pg-ink) !important;
  color: #fff !important;
  border: 1px solid var(--pg-ink) !important;
}
body.pg-login .btn-primary:hover{
  background: var(--pg-accent) !important;
  border-color: var(--pg-accent) !important;
  color: #fff !important;
  transform: translateY(-1px);
  box-shadow: none !important;
}

/* --- avvisi: un filetto e un fondo tenue, non blocchi colorati -------------- */
body.pg-login .alert{
  border-radius: var(--pg-r-s) !important;
  border: 1px solid var(--pg-line-soft) !important;
  border-left: 3px solid var(--pg-line) !important;
  padding: 12px 14px !important;
  font-size: 14px; line-height: 1.5;
  margin-bottom: 16px !important;
}
body.pg-login .alert-error{
  background: color-mix(in srgb, var(--pg-danger) 6%, white) !important;
  border-left-color: var(--pg-danger) !important;
  color: var(--pg-danger) !important;
}
body.pg-login .alert-success{
  background: color-mix(in srgb, var(--pg-ok) 7%, white) !important;
  border-left-color: var(--pg-ok) !important;
  color: var(--pg-ok) !important;
}

/* --- iscriviti: si vede senza essere un cartello ---------------------------- */
body.pg-login .links{
  margin-top: 20px !important; padding-top: 16px !important;
  border-top: 1px solid var(--pg-line-soft) !important;
  font-size: 13.5px;
}
body.pg-login .links a{
  color: var(--pg-ink-2) !important;
  text-decoration: underline; text-underline-offset: 3px;
  text-decoration-color: var(--pg-line);
}
body.pg-login .links a:hover{ color: var(--pg-accent) !important; text-decoration-color: var(--pg-accent); }
body.pg-login .register-section{
  background: color-mix(in srgb, var(--pg-paper) 55%, white) !important;
  border: 1px solid var(--pg-line-soft) !important;
  border-radius: var(--pg-r-m) !important;
  box-shadow: none !important;
  padding: 16px !important;
  text-align: left !important;
}
body.pg-login .register-section-badge{
  background: transparent !important;
  color: var(--pg-accent) !important;
  font-family: var(--pg-mono) !important;
  font-size: 10.5px !important; font-weight: 500 !important;
  letter-spacing: .16em !important;
  padding: 0 !important;
  border-radius: 0 !important;
  margin-bottom: 6px !important;
}
body.pg-login .register-cta-text{
  font-family: var(--pg-display) !important;
  font-size: 16px !important; font-weight: 600 !important;
  letter-spacing: -.02em;
  color: var(--pg-ink) !important;
  margin-bottom: 12px !important;
}
body.pg-login .register-cta-btn{
  background: transparent !important;
  color: var(--pg-ink) !important;
  border: 1px solid var(--pg-ink) !important;
  border-radius: 999px !important;
  font-size: 14.5px !important; font-weight: 600 !important;
  padding: 11px 16px !important;
  box-shadow: none !important;
}
body.pg-login .register-cta-btn:hover{
  background: var(--pg-ink) !important;
  border-color: var(--pg-ink) !important;
  color: #fff !important;
  transform: none !important;
  box-shadow: none !important;
}

/* --- il tasto "indietro": un cerchio con un filetto ------------------------- */
body.pg-login .back-btn{
  background: var(--pg-card) !important;
  border: 1px solid var(--pg-line) !important;
  color: var(--pg-ink-2) !important;
  width: 38px; height: 38px; padding: 0 !important;
  display: grid; place-items: center;
  font-size: 17px !important;
  box-shadow: none !important;
}
body.pg-login .back-btn:hover{
  border-color: var(--pg-ink) !important; color: var(--pg-ink) !important;
  transform: none !important; box-shadow: none !important;
}

@media (prefers-reduced-motion: reduce){
  body.pg-login .role-btn,
  body.pg-login .form-control,
  body.pg-login .btn{ transition: none !important; }
  body.pg-login .btn-primary:hover{ transform: none !important; }
}

/* =============================================================================
   HOME (2026-09-02) — l'hero occupava tutto lo schermo (820px su computer, 784
   sul telefono) per logo, una riga e i pulsanti: chi arrivava non vedeva niente
   sotto senza scorrere, e serviva una freccia rossa in un cerchio per dirlo.
   Qui l'hero si stringe, la freccia sparisce perche' non serve piu', e il piede
   passa dalla veste vecchia (link azzurri, titoli grassi) a quella nuova.
   ============================================================================= */
body.pg-landing .hero{
  min-height: 0 !important;
  /* Sotto i pulsanti serve respiro: la sezione che segue (le card, o la fascia
     della demo) attaccava troppo. Prima 38px, sul telefono 30.
     Da computer l'hero e' anche piu' arioso: non riempie lo schermo come prima
     (li' non si vedeva nulla sotto), ma resta una sezione che respira. */
  padding: 72px 0 88px !important;
}
body.pg-landing .hero::before{ display: none !important; }   /* il velo a pallini */
@media (min-width: 769px){
  body.pg-landing .hero{ min-height: 56vh !important; }
  body.pg-landing .cards-grid{ margin-top: 72px !important; }
}
/* Il logo si misura in altezza, non in larghezza: le scuole ne hanno di quadrati
   (MusicaSuite, 1:1) e di distesi (L'altramusica, 6.9:1). Con la sola larghezza
   il marchio disteso veniva alto 31px, cioe' illeggibile. */
body.pg-landing .hero-logo{
  max-height: 150px !important;
  max-width: min(420px, 84vw) !important;
  width: auto !important;
  margin-bottom: 18px !important;
  filter: none !important;
  animation: none !important;
}
body.pg-landing .hero p{
  font-family: var(--pg-display) !important;
  font-size: clamp(19px, 2.6vw, 26px) !important;
  font-weight: 600 !important;
  letter-spacing: -.025em;
  line-height: 1.2;
  margin-bottom: 4px !important;
  max-width: 24ch;
}
/* il tipo di scuola: didascalia sotto la frase, come nella pagina di accesso */
body.pg-landing .hero p.hero-type{
  font-family: var(--pg-body) !important;
  font-size: 14px !important; font-weight: 400 !important;
  letter-spacing: 0;
  opacity: .72;
  margin-bottom: 24px !important;
  max-width: none;
}
body.pg-landing .hero-buttons{ gap: 10px; }
body.pg-landing .hero .btn{ animation: none !important; }
/* la freccia "c'e' altro sotto": l'hero non riempie piu' lo schermo, non serve */
body.pg-landing .scroll-indicator{ display: none !important; }
@media (max-width: 768px){
  body.pg-landing .hero{ padding: 26px 0 46px !important; }
  /* sul telefono la griglia delle card stringeva a 2rem: si riavvicina al desktop */
  body.pg-landing .cards-grid{ margin-top: 48px !important; }
  body.pg-landing .hero-logo{ max-height: 130px !important; max-width: min(280px, 78vw) !important; margin-bottom: 14px !important; }
  body.pg-landing .hero p.hero-type{ margin-bottom: 20px !important; }
}

/* ------------------------------------------------------------------ piede -- */
/* Il fondo resta quello scelto dal tenant (theme.footerColor): qui cambiano
   solo carattere, gerarchia e filetti, che erano rimasti alla veste vecchia. */
body.pg-landing .footer{ padding: 44px 0 26px !important; margin-top: 0 !important; }
body.pg-landing .footer-section h3{
  font-family: var(--pg-display) !important;
  font-size: 15px !important; font-weight: 600 !important;
  letter-spacing: -.01em;
  color: inherit !important;
  opacity: .95;
  margin-bottom: 14px !important;
}
body.pg-landing .footer-section p,
body.pg-landing .footer-section li{
  font-size: 14px !important; line-height: 1.65 !important;
  opacity: .78;
  margin-bottom: 4px !important;
}
body.pg-landing .footer-section a{
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
  opacity: 1;
}
body.pg-landing .footer-section a:hover{ text-decoration-color: currentColor; }
body.pg-landing .footer-content{ gap: 34px !important; margin-bottom: 28px !important; }
body.pg-landing .footer-bottom{
  padding-top: 20px !important;
  border-top: 1px solid rgba(255,255,255,.14) !important;
  font-size: 13px;
  line-height: 1.6;
}
body.pg-landing .footer-bottom p{ margin: 0 0 3px; opacity: .62; }
body.pg-landing .footer-made{ font-size: 12px !important; opacity: .45 !important; margin-top: 10px !important; }
body.pg-landing .footer-made a{ color: inherit; text-decoration: underline; text-underline-offset: 3px; }

/* Lo spazio in fondo alla pagina serve al dock a onde: home e pagina di accesso
   non ce l'hanno, e quei 96px restavano come una striscia vuota sotto il piede. */
body.pg-landing,
body.pg-login{ padding-bottom: 0 !important; }
body.pg-login{ padding: 1rem !important; }
@media (max-width: 768px){
  body.pg-login{ padding: 2rem .5rem .5rem !important; }
}

/* =============================================================================
   PAGINE DEL PERCORSO DI ACCESSO (2026-09-02)
   Iscrizione, password dimenticata, attivazione, codice a due fattori, disdetta:
   erano le uniche pagine che si aprivano dal login e restavano nella veste
   precedente (fondo in gradiente, schede con ombre pesanti, pallini di colore).
   Portano tutte la classe pg-login, quindi campi, pulsanti, avvisi e collegamenti
   arrivano gia' vestiti dalle regole della pagina di accesso: qui restano solo i
   pezzi che ciascuna ha di suo.
   ============================================================================= */
/* i contenitori: la stessa scheda del login */
body.pg-login .forgot-container,
body.pg-login .cancel-container,
body.pg-login .register-container,
body.pg-login .scheda,
body.pg-login .totp-card{
  background: var(--pg-card) !important;
  border: 1px solid var(--pg-line-soft) !important;
  border-radius: var(--pg-r-l) !important;
  box-shadow: var(--pg-shadow) !important;
  animation: none !important;
  padding: 28px 26px 26px !important;
  text-align: left !important;
}
body.pg-login .register-container{ max-width: 620px !important; }
@media (max-width: 768px){
  body.pg-login .forgot-container,
  body.pg-login .cancel-container,
  body.pg-login .register-container,
  body.pg-login .scheda,
  body.pg-login .totp-card{ padding: 22px 18px 20px !important; }
}
/* il logo in cima a queste pagine */
body.pg-login .logo img{ filter: none !important; }
body.pg-login .scheda .logo{ width: 54px !important; height: 54px !important; margin-bottom: 14px !important; }
body.pg-login h1{
  font-family: var(--pg-display) !important;
  font-weight: 700 !important; letter-spacing: -.03em;
  color: var(--pg-ink) !important;
}
body.pg-login h2, body.pg-login h3{
  font-family: var(--pg-display) !important;
  font-weight: 600 !important; letter-spacing: -.02em;
  color: var(--pg-ink) !important;
}
body.pg-login p{ color: var(--pg-ink-2) !important; }

/* riquadri di spiegazione e di avvertimento: un filetto, non un cartello ------ */
body.pg-login .info-box{
  background: color-mix(in srgb, var(--pg-paper) 55%, white) !important;
  border: 1px solid var(--pg-line-soft) !important;
  border-radius: var(--pg-r-m) !important;
  padding: 14px 16px !important;
  margin-bottom: 18px !important;
  font-size: 13.5px !important; line-height: 1.6 !important;
  color: var(--pg-muted) !important;
}
body.pg-login .warning-box{
  background: color-mix(in srgb, var(--pg-warn) 6%, white) !important;
  border: 1px solid color-mix(in srgb, var(--pg-warn) 26%, white) !important;
  border-left: 3px solid var(--pg-warn) !important;
  border-radius: var(--pg-r-m) !important;
  padding: 14px 16px !important;
  margin-bottom: 18px !important;
  text-align: left !important;
}
body.pg-login .warning-box h3{ font-size: 15px !important; margin-bottom: 6px !important; }
body.pg-login .warning-box p{ font-size: 13.5px !important; line-height: 1.55 !important; }
body.pg-login .error-message{ color: var(--pg-danger) !important; font-size: 13px !important; }

/* --- ISCRIZIONE ------------------------------------------------------------ */
/* i passi: pallini piccoli su una riga, il corrente in inchiostro */
body.pg-login .step-indicator{ gap: 22px !important; margin-bottom: 22px !important; }
body.pg-login .step{
  width: 9px !important; height: 9px !important;
  background: var(--pg-line) !important;
  transform: none !important;
  transition: background .18s ease;
}
body.pg-login .step.active,
body.pg-login .step.teacher.active{ background: var(--pg-ink) !important; transform: none !important; }
body.pg-login .step.completed{ background: var(--pg-accent) !important; }
body.pg-login .step::after{
  background: var(--pg-line) !important;
  height: 1px !important;
}
body.pg-login .form-section.active{ animation: none !important; }
/* la scelta allievo/docente: due riquadri sobri, il selezionato in inchiostro */
body.pg-login .user-type-selection{
  background: color-mix(in srgb, var(--pg-paper) 55%, white) !important;
  border: 1px solid var(--pg-line-soft) !important;
  border-radius: var(--pg-r-m) !important;
  padding: 16px !important;
  margin-bottom: 20px !important;
}
body.pg-login .user-type-title{
  font-family: var(--pg-mono) !important;
  font-size: 10.5px !important; font-weight: 500 !important;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--pg-muted) !important;
}
body.pg-login .user-type-option{
  border: 1px solid var(--pg-line) !important;
  border-radius: var(--pg-r-m) !important;
  background: var(--pg-card) !important;
  padding: 14px 12px !important;
  transition: border-color .16s ease, background .16s ease;
}
body.pg-login .user-type-option:hover{ border-color: var(--pg-ink-2) !important; }
body.pg-login .user-type-option.selected,
body.pg-login .user-type-option:has(input:checked){
  border-color: var(--pg-ink) !important;
  background: color-mix(in srgb, var(--pg-ink) 4%, white) !important;
  box-shadow: 0 0 0 1px var(--pg-ink) inset;
}
body.pg-login .user-type-icon{ font-size: 22px !important; margin-bottom: 4px !important; }
body.pg-login .user-type-label{ font-family: var(--pg-display) !important; font-size: 15px !important; color: var(--pg-ink) !important; }
body.pg-login .teacher-password-section,
body.pg-login .special-password-notice{
  background: color-mix(in srgb, var(--pg-paper) 55%, white) !important;
  border: 1px solid var(--pg-line-soft) !important;
  border-radius: var(--pg-r-s) !important;
  padding: 12px 14px !important;
}
/* la forza della password: una riga sottile, il colore dice il livello */
body.pg-login .strength-bar{
  height: 3px !important; border-radius: 2px !important;
  background: var(--pg-line-soft) !important;
}
body.pg-login .activation-code{
  font-family: var(--pg-mono) !important;
  background: var(--pg-line-soft) !important;
  border: 1px solid var(--pg-line) !important;
  border-radius: var(--pg-r-s) !important;
  color: var(--pg-ink) !important;
  letter-spacing: .22em;
}
body.pg-login .phone-country-select{
  border: 1px solid var(--pg-line) !important;
  border-radius: var(--pg-r-s) 0 0 var(--pg-r-s) !important;
  background: var(--pg-card) !important;
  color: var(--pg-ink) !important;
}

/* --- ESITO DELL'ATTIVAZIONE ------------------------------------------------- */
/* il segno tondo pieno diventa un cerchio con un filetto: dice l'esito senza gridare */
body.pg-login .scheda{ text-align: center !important; }
body.pg-login .segno{
  width: 52px !important; height: 52px !important;
  font-size: 24px !important;
  border: 1px solid var(--pg-line) !important;
  margin-bottom: 16px !important;
}
body.pg-login .segno.ok{ background: color-mix(in srgb, var(--pg-ok) 10%, white) !important; color: var(--pg-ok) !important; border-color: color-mix(in srgb, var(--pg-ok) 30%, white) !important; }
body.pg-login .segno.ko{ background: color-mix(in srgb, var(--pg-danger) 8%, white) !important; color: var(--pg-danger) !important; border-color: color-mix(in srgb, var(--pg-danger) 28%, white) !important; }
body.pg-login .segno.warn{ background: color-mix(in srgb, var(--pg-warn) 10%, white) !important; color: var(--pg-warn) !important; border-color: color-mix(in srgb, var(--pg-warn) 30%, white) !important; }
body.pg-login .scheda .btn{
  background: var(--pg-ink) !important; color: #fff !important;
  border: 1px solid var(--pg-ink) !important;
  border-radius: 999px !important;
  padding: 12px 26px !important; font-size: 14.5px !important;
  width: auto !important;
}
body.pg-login .scheda .btn:hover{ background: var(--pg-accent) !important; border-color: var(--pg-accent) !important; filter: none !important; }
body.pg-login .scheda .btn.chiaro{
  background: transparent !important; color: var(--pg-ink) !important;
  border-color: var(--pg-line) !important;
}
body.pg-login .scheda .btn.chiaro:hover{ background: var(--pg-ink) !important; color: #fff !important; border-color: var(--pg-ink) !important; }
body.pg-login .codice{
  background: var(--pg-line-soft) !important;
  border: 1px solid var(--pg-line) !important;
  border-radius: var(--pg-r-s) !important;
  font-family: var(--pg-mono) !important;
  color: var(--pg-ink) !important;
  padding: 10px 20px !important;
}
body.pg-login .nota{ color: var(--pg-muted) !important; font-size: 12.5px !important; }

/* --- CODICE A DUE FATTORI --------------------------------------------------- */
body.pg-login .totp-card{ text-align: center !important; max-width: 400px; }
body.pg-login .totp-icon{ font-size: 30px !important; margin-bottom: 10px !important; }
body.pg-login .subtitle{ color: var(--pg-muted) !important; font-size: 13.5px !important; margin-bottom: 20px !important; }
body.pg-login .error-msg{
  background: color-mix(in srgb, var(--pg-danger) 6%, white) !important;
  border: 1px solid var(--pg-line-soft) !important;
  border-left: 3px solid var(--pg-danger) !important;
  border-radius: var(--pg-r-s) !important;
  color: var(--pg-danger) !important;
  font-size: 13.5px !important;
  text-align: left;
}
/* le sei cifre: il campo e' un tabellone, si legge a colpo */
body.pg-login .totp-input{
  border: 1px solid var(--pg-line) !important;
  border-radius: var(--pg-r-m) !important;
  font-family: var(--pg-mono) !important;
  font-size: 26px !important;
  letter-spacing: .38em !important;
  text-indent: .38em;                 /* la spaziatura sposta il testo: si ricentra */
  color: var(--pg-ink) !important;
  background: var(--pg-card) !important;
  padding: 15px 12px !important;
}
body.pg-login .totp-input:focus{
  border-color: var(--pg-ink) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--pg-ink) 10%, transparent) !important;
}
body.pg-login .totp-input::placeholder{ color: var(--pg-line) !important; }
body.pg-login .btn-verify{
  background: var(--pg-ink) !important;
  background-image: none !important;
  border: 1px solid var(--pg-ink) !important;
  border-radius: 999px !important;
  font-family: var(--pg-body) !important;
  font-size: 15px !important; font-weight: 600 !important;
  padding: 13px !important;
}
body.pg-login .btn-verify:hover{ background: var(--pg-accent) !important; border-color: var(--pg-accent) !important; opacity: 1 !important; }
body.pg-login .back-link{
  color: var(--pg-muted) !important;
  font-size: 13.5px !important;
  text-decoration: underline; text-underline-offset: 3px;
  text-decoration-color: var(--pg-line);
}
body.pg-login .back-link:hover{ color: var(--pg-ink) !important; }

/* --- DISDETTA -------------------------------------------------------------- */
body.pg-login .btn-danger{
  background: transparent !important;
  color: var(--pg-danger) !important;
  border: 1px solid var(--pg-danger) !important;
  border-radius: 999px !important;
}
body.pg-login .btn-danger:hover{ background: var(--pg-danger) !important; color: #fff !important; }
/* I pulsanti in fila non devono allargarsi per riempire la riga: nell'iscrizione
   "Indietro" e' nascosto al primo passo e "Avanti" restava da solo, quindi si
   stirava per tutta la scheda. Larghezza naturale; a tutta riga solo sul telefono. */
body.pg-login .btn-group{ display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
body.pg-login .btn-group .btn{ flex: 0 1 auto; width: auto !important; min-width: 150px; }
@media (max-width: 520px){
  body.pg-login .btn-group .btn{ flex: 1 1 100%; min-width: 0; }
}
/* le etichette dei pulsanti si leggono, non si gridano */
body.pg-login .btn{ text-transform: none !important; letter-spacing: 0 !important; }

/* =============================================================================
   ISCRIZIONE — i due pezzi rimasti fuori (2026-09-02)
   1. Le bandiere della lingua: quella scelta aveva un riquadro rosso attorno
      (border 2px nel colore della scuola piu' fondo rosato). Sul telefono
      sembrava un campo in errore. Prende il binario delle altre linguette.
   2. La riga "Citta' / Provincia" e' scritta con lo stile in linea
      (display:flex, flex 2 e flex 1) e non aveva regola per il telefono: a 390px
      la Provincia restava schiacciata a 108px con l'etichetta spezzata su due
      righe. Sotto i 560px le due voci vanno una sotto l'altra.
   ============================================================================= */
body.pg-login .lang-bar-register{
  background: var(--pg-paper);
  border-radius: 11px;
  padding: 3px;
  gap: 2px !important;
  width: fit-content; margin: 0 auto 20px !important;
}
body.pg-login .lang-bar-register .lang-btn{
  border: 0 !important;
  border-radius: 8px !important;
  padding: 5px 9px !important;
  font-size: 17px !important;
  opacity: .45;
  transition: opacity .16s ease, background .16s ease;
}
body.pg-login .lang-bar-register .lang-btn:hover{
  opacity: .85; background: transparent !important; transform: none !important;
}
body.pg-login .lang-bar-register .lang-btn.active{
  opacity: 1;
  background: var(--pg-card) !important;
  box-shadow: 0 1px 2px rgba(23,20,32,.10);
}
/* le righe messe in fila con lo stile in linea: sul telefono vanno a capo */
@media (max-width: 560px){
  body.pg-login .student-only-field[style*="display:flex"],
  body.pg-login .student-only-field[style*="display: flex"]{
    flex-wrap: wrap !important;
    gap: 0 !important;
  }
  body.pg-login .student-only-field[style*="display:flex"] > .form-group,
  body.pg-login .student-only-field[style*="display: flex"] > .form-group{
    flex: 1 1 100% !important;
  }
  /* il prefisso telefonico non deve rubare meta' riga */
  body.pg-login .phone-input-group .phone-country-select{
    flex: 0 0 106px !important; width: 106px !important;
    padding-left: 8px !important; padding-right: 4px !important;
  }
}

/* =============================================================================
   PAGINE CON UN SISTEMA PROPRIO — "completa i tuoi dati" e "firma del contratto"
   (2026-09-02). Non sono pagine vecchie: sono scritte bene, mobile-first, con un
   loro insieme di variabili. Riscriverne la struttura sarebbe un peggioramento,
   quindi qui si ritarano solo i loro token e i caratteri: cambia il tono, non
   l'impaginazione. Classe: pg-page.
   ============================================================================= */
body.pg-page{
  /* variabili di "completa i tuoi dati" */
  --b-primary: var(--pg-accent);
  --b-grad: var(--pg-ink);
  --b-bg: var(--pg-paper);
  --b-text: var(--pg-ink);
  --b-text2: var(--pg-muted);
  --b-border: var(--pg-line);
  /* variabili di "firma del contratto" */
  --brand: var(--pg-accent);
  --brand-d: var(--pg-accent-ink);
  --brand-soft: color-mix(in srgb, var(--pg-paper) 55%, white);
  --c-bg: var(--pg-paper);
  --c-card: var(--pg-card);
  --c-border: var(--pg-line);
  --c-text: var(--pg-ink);
  --c-text-2: var(--pg-ink-2);
  --c-text-3: var(--pg-muted);
  --ok: var(--pg-ok);
  --warn: var(--pg-warn);
  --err: var(--pg-danger);
  --radius: var(--pg-r-m);
  --shadow: var(--pg-shadow);

  background: var(--pg-paper) !important;
  background-image: none !important;
  background-attachment: initial !important;
  font-family: var(--pg-body) !important;
  color: var(--pg-ink);
  padding-bottom: 0 !important;          /* qui il dock non c'e' */
}
body.pg-page h1, body.pg-page h2, body.pg-page h3{
  font-family: var(--pg-display) !important;
  font-weight: 600 !important;
  letter-spacing: -.02em;
  color: var(--pg-ink) !important;
}
body.pg-page .topbar{ background: var(--pg-card) !important; border-color: var(--pg-line-soft) !important; }
body.pg-page .topbar .school{ color: var(--pg-ink) !important; }
body.pg-page .card{
  border: 1px solid var(--pg-line-soft) !important;
  border-radius: var(--pg-r-l) !important;
  box-shadow: var(--pg-shadow) !important;
}
/* etichette dei campi: minuscole, non maiuscolo spaziato */
body.pg-page .field label{
  font-family: var(--pg-body) !important;
  font-size: 13px !important; font-weight: 500 !important;
  text-transform: none !important; letter-spacing: 0 !important;
  color: var(--pg-ink-2) !important;
}
body.pg-page .field input,
body.pg-page .field select,
body.pg-page .field textarea{
  border: 1px solid var(--pg-line) !important;
  border-radius: var(--pg-r-s) !important;
  background: var(--pg-card) !important;
  color: var(--pg-ink) !important;
  font-family: var(--pg-body) !important;
  font-size: 15px !important;
  padding: 11px 13px !important;
}
body.pg-page .field input:focus,
body.pg-page .field select:focus{
  border-color: var(--pg-ink) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--pg-ink) 10%, transparent) !important;
  background: var(--pg-card) !important;
}
body.pg-page .field input[readonly]{ background: var(--pg-line-soft) !important; color: var(--pg-muted) !important; }
/* pulsanti: inchiostro pieno, accento al passaggio; niente gradiente */
body.pg-page .btn,
body.pg-page .btn-primary{
  background: var(--pg-ink) !important;
  background-image: none !important;
  color: #fff !important;
  border: 1px solid var(--pg-ink) !important;
  border-radius: 999px !important;
  font-family: var(--pg-body) !important; font-weight: 600 !important;
  box-shadow: none !important;
}
body.pg-page .btn:not([disabled]):hover,
body.pg-page .btn-primary:not([disabled]):hover{
  background: var(--pg-accent) !important; border-color: var(--pg-accent) !important;
}
body.pg-page .btn-ghost{
  background: transparent !important;
  color: var(--pg-ink-2) !important;
  border: 1px solid var(--pg-line) !important;
  border-radius: 999px !important;
}
body.pg-page .btn-ghost:hover{ background: transparent !important; border-color: var(--pg-ink) !important; color: var(--pg-ink) !important; }
body.pg-page .btn-link{ color: var(--pg-muted) !important; text-underline-offset: 3px; }
body.pg-page .btn-link:hover{ color: var(--pg-ink) !important; }
/* riquadri di stato: fondo tenue e filetto, come nel resto dell'app */
body.pg-page .err{
  background: color-mix(in srgb, var(--pg-danger) 6%, white) !important;
  border: 1px solid var(--pg-line-soft) !important;
  border-left: 3px solid var(--pg-danger) !important;
  border-radius: var(--pg-r-s) !important;
  color: var(--pg-danger) !important;
}
body.pg-page .ok{
  background: color-mix(in srgb, var(--pg-ok) 7%, white) !important;
  border: 1px solid var(--pg-line-soft) !important;
  border-left: 3px solid var(--pg-ok) !important;
  border-radius: var(--pg-r-s) !important;
  color: var(--pg-ok) !important;
}
body.pg-page .badge{
  border-radius: 6px !important;
  font-family: var(--pg-mono) !important;
  font-size: 10.5px !important; font-weight: 500 !important;
  letter-spacing: .1em;
}
body.pg-page .contract-summary{
  background: color-mix(in srgb, var(--pg-paper) 55%, white) !important;
  border: 1px solid var(--pg-line-soft) !important;
  border-radius: var(--pg-r-m) !important;
}
body.pg-page .contract-summary b{ color: var(--pg-ink) !important; }
/* gli importi delle rate: in mono, si leggono come un tabellone */
body.pg-page .rate-row,
body.pg-page .rate-tot{ font-family: var(--pg-mono) !important; font-variant-numeric: tabular-nums; }
body.pg-page .rate-tot{ color: var(--pg-ink) !important; border-top-color: var(--pg-ink) !important; }
body.pg-page .section-divider{
  font-family: var(--pg-mono) !important;
  font-size: 10.5px !important; font-weight: 500 !important;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--pg-muted) !important;
  border-top: 1px solid var(--pg-line-soft) !important;
}
body.pg-page .checkbox{
  background: color-mix(in srgb, var(--pg-paper) 55%, white) !important;
  border: 1px solid var(--pg-line-soft) !important;
  border-radius: var(--pg-r-s) !important;
}
body.pg-page .checkbox input,
body.pg-page .radio-line input{ accent-color: var(--pg-ink) !important; }
body.pg-page .firma-box{ border-color: var(--pg-line) !important; background: var(--pg-card) !important; }

/* =============================================================================
   RIALLINEAMENTO CONTRASTO fra le due skin sovrapposte (admin-theme-v2 + questa)
   -----------------------------------------------------------------------------
   admin-theme-v2.css dipinge alcuni componenti col colore del tenant e ci mette
   sopra un primo piano FISSO (bianco, oppure il colore del tenant stesso).
   Questa skin però ridipinge lo SFONDO di quegli stessi componenti — voce di menu
   attiva → inchiostro, testate dei modali → carta bianca — senza toccare quel
   primo piano. Risultato: testo nero su fondo nero e testo bianco su fondo bianco,
   evidente sui tenant con un accento molto scuro o molto chiaro (Accademia
   Moebius ha primaryColor #000000).
   Qui il primo piano viene riportato in accordo con lo sfondo che vince davvero.
   Il token --on-primary (calcolato dalla luminanza in middleware/tenant-variables.js)
   copre il caso opposto: accento chiaro con testo bianco sopra.
   ============================================================================= */

/* --- voce di menu attiva: fondo inchiostro → tutto il contenuto in chiaro ---- */
body.pg-admin .nav-link.active,
body.pg-admin .nav-link.active .nav-text,
body.pg-admin .nav-link.active .nav-icon,
body.pg-admin .nav-link.active .nav-badge{
  color: #fff !important;
}
body.pg-admin .nav-link.active .nav-icon svg{ stroke: #fff !important; }
body.pg-admin .nav-link.active .nav-badge{ background: rgba(255,255,255,.2) !important; }

/* --- testate dei modali: due casi opposti, entrambi da riallineare -----------
   1) Testata APPIATTITA su carta (caso generico: qui vince il `background:
      transparent` di questa skin). v2 lasciava titolo e ✕ bianchi → invisibili.
   2) Testata ancora PIENA del colore del tenant: succede quando il markup porta
      uno `style` inline con background/gradient, oppure sui due modali che v2
      governa per id (#editStudentModal, #teacherModal). Lì vince v2 e il primo
      piano deve venire da --on-primary, NON dall'inchiostro.
   L'ordine conta: il caso 2 ha selettori più specifici e sovrascrive il caso 1. */

/* caso 1 — testata su carta: tutto in inchiostro */
body[class*="pg-"] .modal .modal-header .modal-title,
body[class*="pg-"] .modal .modal-header .modal-icon,
body[class*="pg-"] .modal .modal-header h2,
body[class*="pg-"] .modal .modal-header h3,
body[class*="pg-"] .modal-overlay .modal-header .modal-title,
body[class*="pg-"] .modal-overlay .modal-header .modal-icon,
body[class*="pg-"] .modal-overlay .modal-header h2,
body[class*="pg-"] .modal-overlay .modal-header h3{
  color: var(--pg-ink) !important;
}

/* caso 2 — testata piena del colore del tenant: primo piano dal token di contrasto */
body[class*="pg-"] #editStudentModal .modal-header,
body[class*="pg-"] #editStudentModal .modal-header *,
body[class*="pg-"] #teacherModal .modal-header,
body[class*="pg-"] #teacherModal .modal-header *,
body[class*="pg-"] .modal .modal-header[style*="background"],
body[class*="pg-"] .modal .modal-header[style*="background"] *,
body[class*="pg-"] .modal .modal-header[style*="gradient"],
body[class*="pg-"] .modal .modal-header[style*="gradient"] *,
body[class*="pg-"] .modal-overlay .modal-header[style*="background"],
body[class*="pg-"] .modal-overlay .modal-header[style*="background"] *,
body[class*="pg-"] .modal-overlay .modal-header[style*="gradient"],
body[class*="pg-"] .modal-overlay .modal-header[style*="gradient"] *{
  color: var(--on-primary, #fff) !important;
}
/* stessi elementi elencati per nome: cosi' il caso 2 batte il caso 1 per
   specificita' e non per ordine nel file (che e' fragile) */
body[class*="pg-"] #editStudentModal .modal-header .modal-title,
body[class*="pg-"] #editStudentModal .modal-header .modal-icon,
body[class*="pg-"] #editStudentModal .modal-header .modal-close,
body[class*="pg-"] #editStudentModal .modal-header h2,
body[class*="pg-"] #editStudentModal .modal-header h3,
body[class*="pg-"] #teacherModal .modal-header .modal-title,
body[class*="pg-"] #teacherModal .modal-header .modal-icon,
body[class*="pg-"] #teacherModal .modal-header .modal-close,
body[class*="pg-"] #teacherModal .modal-header h2,
body[class*="pg-"] #teacherModal .modal-header h3,
body[class*="pg-"] .modal .modal-header[style*="background"] .modal-title,
body[class*="pg-"] .modal .modal-header[style*="background"] .modal-icon,
body[class*="pg-"] .modal .modal-header[style*="background"] .modal-close,
body[class*="pg-"] .modal .modal-header[style*="background"] h2,
body[class*="pg-"] .modal .modal-header[style*="background"] h3,
body[class*="pg-"] .modal .modal-header[style*="gradient"] .modal-title,
body[class*="pg-"] .modal .modal-header[style*="gradient"] .modal-icon,
body[class*="pg-"] .modal .modal-header[style*="gradient"] .modal-close,
body[class*="pg-"] .modal .modal-header[style*="gradient"] h2,
body[class*="pg-"] .modal .modal-header[style*="gradient"] h3,
body[class*="pg-"] .modal-overlay .modal-header[style*="background"] .modal-title,
body[class*="pg-"] .modal-overlay .modal-header[style*="background"] .modal-icon,
body[class*="pg-"] .modal-overlay .modal-header[style*="background"] .modal-close,
body[class*="pg-"] .modal-overlay .modal-header[style*="background"] h2,
body[class*="pg-"] .modal-overlay .modal-header[style*="background"] h3,
body[class*="pg-"] .modal-overlay .modal-header[style*="gradient"] .modal-title,
body[class*="pg-"] .modal-overlay .modal-header[style*="gradient"] .modal-icon,
body[class*="pg-"] .modal-overlay .modal-header[style*="gradient"] .modal-close,
body[class*="pg-"] .modal-overlay .modal-header[style*="gradient"] h2,
body[class*="pg-"] .modal-overlay .modal-header[style*="gradient"] h3{
  color: var(--on-primary, #fff) !important;
}
body[class*="pg-"] #editStudentModal .modal-header .modal-close,
body[class*="pg-"] #teacherModal .modal-header .modal-close,
body[class*="pg-"] .modal .modal-header[style*="background"] .modal-close,
body[class*="pg-"] .modal .modal-header[style*="gradient"] .modal-close,
body[class*="pg-"] .modal-overlay .modal-header[style*="background"] .modal-close,
body[class*="pg-"] .modal-overlay .modal-header[style*="gradient"] .modal-close{
  background: color-mix(in srgb, var(--on-primary, #fff) 20%, transparent) !important;
  border-color: transparent !important;
}
body[class*="pg-"] .modal .modal-header .modal-close,
body[class*="pg-"] .modal .modal-header .close-btn,
body[class*="pg-"] .modal-overlay .modal-header .modal-close,
body[class*="pg-"] .modal-overlay .modal-header .close-btn{
  color: var(--pg-muted) !important;
  background: transparent !important;
  border: 1px solid var(--pg-line) !important;
}
body[class*="pg-"] .modal .modal-header .modal-close:hover,
body[class*="pg-"] .modal .modal-header .close-btn:hover,
body[class*="pg-"] .modal-overlay .modal-header .modal-close:hover,
body[class*="pg-"] .modal-overlay .modal-header .close-btn:hover{
  color: var(--pg-ink) !important;
  background: var(--pg-line-soft) !important;
}

/* --- pulsanti primari: il fondo è sempre inchiostro, quindi tutto il contenuto
       (icone e span con colore proprio compresi) va in chiaro ---------------- */
body[class*="pg-"] .btn-primary,
body[class*="pg-"] .btn-primary *{ color: #fff !important; }

/* --- accento del tenant troppo vicino all'inchiostro: lo stato :hover dei
       pulsanti primari era invisibile (Moebius: nero su quasi-nero). Con un
       accento scuro si schiarisce, con uno chiaro si scurisce. --------------- */
body[class*="pg-"] .btn-primary:hover,
body[class*="pg-"] .pt-btn.primary:hover,
body[class*="pg-"] .tp-btn.primary:hover{
  background: color-mix(in srgb, var(--pg-accent) 78%, var(--on-primary, #fff)) !important;
  border-color: color-mix(in srgb, var(--pg-accent) 78%, var(--on-primary, #fff)) !important;
}

/* hover del ✕ sulle testate piene: esplicito, così non dipende dall'ordine dei file */
body[class*="pg-"] #editStudentModal .modal-header .modal-close:hover,
body[class*="pg-"] #teacherModal .modal-header .modal-close:hover,
body[class*="pg-"] .modal .modal-header[style*="background"] .modal-close:hover,
body[class*="pg-"] .modal .modal-header[style*="gradient"] .modal-close:hover,
body[class*="pg-"] .modal-overlay .modal-header[style*="background"] .modal-close:hover,
body[class*="pg-"] .modal-overlay .modal-header[style*="gradient"] .modal-close:hover{
  color: var(--on-primary, #fff) !important;
  background: color-mix(in srgb, var(--on-primary, #fff) 34%, transparent) !important;
}

/* --- pulsanti con gradiente scritto inline ----------------------------------
   Piu' su in questo file una regola generica appiattisce tutti i gradienti del
   markup (`[style*="linear-gradient"] { background-image: none !important }`).
   Toglie il gradiente ma NON restituisce un colore di fondo: la shorthand
   `background: linear-gradient(...)` aveva impostato background-color a
   `transparent`, quindi il pulsante resta trasparente sulla carta bianca mentre
   il `color: white` scritto inline sopravvive — testo bianco su fondo bianco.
   E' il difetto segnalato sul footer della scheda allievo ("Salva Modifiche"),
   e riguarda allo stesso modo tutti gli altri pulsanti in gradiente della
   dashboard admin. Qui il fondo pieno viene restituito.
   Le testate dei modali non rientrano: le governa il blocco qui sopra. */
body[class*="pg-"] button[style*="linear-gradient"],
body[class*="pg-"] input[type="submit"][style*="linear-gradient"],
body[class*="pg-"] a.btn[style*="linear-gradient"]{
  background-color: var(--pg-ink) !important;
  color: #fff !important;
  border-color: var(--pg-ink) !important;
}
body[class*="pg-"] button[style*="linear-gradient"] *{ color: #fff !important; }
body[class*="pg-"] button[style*="linear-gradient"]:hover,
body[class*="pg-"] input[type="submit"][style*="linear-gradient"]:hover{
  background-color: color-mix(in srgb, var(--pg-accent) 78%, var(--on-primary, #fff)) !important;
  border-color: color-mix(in srgb, var(--pg-accent) 78%, var(--on-primary, #fff)) !important;
}

/* --- pulsante di annullamento dei modali costruiti da JS --------------------
   Scritto inline come `background: white` con bordo #e0e0e0: sulla carta bianca
   della skin il pulsante sparisce, si vede solo il testo sospeso. Torna a essere
   un pulsante secondario riconoscibile, coerente con .btn-secondary. */
body[class*="pg-"] button[style*="background: white"]{
  background: transparent !important;
  color: var(--pg-ink-2) !important;
  border: 1px solid var(--pg-line) !important;
}
body[class*="pg-"] button[style*="background: white"]:hover{
  border-color: var(--pg-ink-2) !important;
  color: var(--pg-ink) !important;
}

/* --- pillola con l'ID nel footer della scheda allievo -----------------------
   Era #999 su #f5f5f5: 2.85:1, sotto la soglia leggibile. Stesso trattamento
   delle altre pillole di stato della skin. */
body[class*="pg-"] #editStudentId{
  background: var(--pg-line-soft) !important;
  color: var(--pg-ink-2) !important;
}

/* --- fasce, testate e riquadri con gradiente scritto inline (non pulsanti) ---
   Stesso difetto già corretto qui sopra per i pulsanti, ma sui contenitori:
   la regola generica `[style*="linear-gradient"]{background-image:none}` toglie
   il gradiente e la shorthand `background: linear-gradient(...)` aveva messo
   background-color a `transparent`, mentre il `color: white` inline resta.
   Risultato: testo bianco sulla carta bianca — è il caso segnalato su Accademia
   Moebius per la testata "🔍 Filtri e Azioni" degli allievi, e riguarda allo
   stesso modo le altre fasce della dashboard admin (filtro avanzato, chat WA,
   pianificazione orari e sedi, tessere delle statistiche, testate generate da
   JS). Qui il fondo pieno viene restituito: tinta piatta d'inchiostro, come per
   i pulsanti, così il primo piano bianco torna leggibile su ogni tenant.
   Le testate dei modali restano escluse: le governa il blocco --on-primary. */
body[class*="pg-"] [style*="linear-gradient"][style*="color:white" i]:not(.modal-header):not(button):not(input):not(a),
body[class*="pg-"] [style*="linear-gradient"][style*="color: white" i]:not(.modal-header):not(button):not(input):not(a),
body[class*="pg-"] [style*="linear-gradient"][style*="color:#fff" i]:not(.modal-header):not(button):not(input):not(a),
body[class*="pg-"] [style*="linear-gradient"][style*="color: #fff" i]:not(.modal-header):not(button):not(input):not(a){
  background-color: var(--pg-ink) !important;
  color: #fff !important;
}
/* i figli ereditano il bianco, tranne quelli con un colore proprio scritto
   inline (numeri delle tessere, contatori): anche quelli vanno in chiaro */
body[class*="pg-"] [style*="linear-gradient"][style*="color:white" i]:not(.modal-header):not(button) > *:not(select):not(input):not(textarea):not(option):not(button):not(.form-input),
body[class*="pg-"] [style*="linear-gradient"][style*="color: white" i]:not(.modal-header):not(button) > *:not(select):not(input):not(textarea):not(option):not(button):not(.form-input),
body[class*="pg-"] [style*="linear-gradient"][style*="color:#fff" i]:not(.modal-header):not(button) > *:not(select):not(input):not(textarea):not(option):not(button):not(.form-input),
body[class*="pg-"] [style*="linear-gradient"][style*="color: #fff" i]:not(.modal-header):not(button) > *:not(select):not(input):not(textarea):not(option):not(button):not(.form-input){
  color: #fff !important;
}

/* le sei tessere delle statistiche dell'anno stavano in fila con sei gradienti
   diversi: appiattite tutte a inchiostro diventerebbero un muro nero. Prendono
   invece il trattamento KPI della skin (velatura d'accento + inchiostro), che
   resta leggibile con qualunque colore del tenant. */
body[class*="pg-"] #yearStatsPanel [style*="linear-gradient"]{
  background-color: var(--pg-accent-wash) !important;
  color: var(--pg-accent-ink) !important;
  border: 1px solid color-mix(in srgb, var(--pg-accent) 22%, transparent) !important;
}
body[class*="pg-"] #yearStatsPanel [style*="linear-gradient"] > *{
  color: var(--pg-accent-ink) !important;
}
body[class*="pg-"] #yearStatsPanel [style*="linear-gradient"] > *:last-child{
  opacity: .75 !important;
}
