/* Segnalazioni e suggerimenti (Shared/_Segnalazione.cshtml, 14/10/2026): il pulsante fisso in basso a
   destra e la finestra con il modulo. Il foglio e' autonomo perche' lo carica anche il player del corso,
   che non ha site.css: colori del Brand Kit scritti per esteso, regole legate a .segnala e #segnalazione
   (le regole del modulo valgono anche nella pagina /segnalazione, main.segnalazione).
   Il pulsante sta sotto il banner dei cookie; sul telefono resta la sola icona. */

.segnala { position: fixed; right: 20px; bottom: 20px; z-index: 15; display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 14px; background: #FFFFFF; color: #5E7D27; border: 1px solid #96C23D; border-radius: 3px;
  font-family: Carlito, Calibri, sans-serif; font-size: 0.88rem; font-weight: bold; line-height: 1.2; text-decoration: none;
  box-shadow: 0 6px 18px -8px rgba(43,44,44,.45); }
.segnala:hover { background: #F4F8EC; }
.segnala svg { width: 18px; height: 18px; flex: none; }
@media (max-width: 720px) {
  .segnala { right: 12px; bottom: 12px; padding: 11px; }
  .segnala__testo { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
}

#segnalazione { position: fixed; inset: 0; margin: auto; z-index: 20; box-sizing: border-box;
  width: calc(100% - 32px); max-width: 560px; height: fit-content; max-height: calc(100vh - 32px); overflow-y: auto;
  border: 0; border-top: 3px solid #96C23D; padding: 28px; background: #FFFFFF; color: #4D4F4F;
  font-family: Carlito, Calibri, sans-serif; font-size: 1rem; line-height: 1.5; text-align: left;
  box-shadow: 0 12px 40px rgba(43,44,44,.25); }
#segnalazione *, #segnalazione *::before, #segnalazione *::after { box-sizing: border-box; }
#segnalazione::backdrop { background: rgba(43,44,44,.35); }
#segnalazione p { margin: 0 0 16px; }
#segnalazione a { color: #5E7D27; }
#segnalazione h2 { color: #2B2C2C; font-size: 1.3rem; line-height: 1.25; margin: 0 0 12px; }
#segnalazione .occhiello { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 0.75rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: #5E7D27; margin: 0 0 8px; }
:is(#segnalazione, main.segnalazione) .nota { font-size: 0.9rem; color: #7A7C79; margin: 0; }
:is(#segnalazione, main.segnalazione) .errore { color: #B3261E; font-size: 0.9rem; margin: 0; }
:is(#segnalazione, main.segnalazione) .segnalazione__testo { font-size: 0.95rem; }
:is(#segnalazione, main.segnalazione) form { margin: 0; display: grid; gap: 8px; margin-top: 16px; }
:is(#segnalazione, main.segnalazione) label { font-weight: bold; color: #2B2C2C; }
:is(#segnalazione, main.segnalazione) input[type=email], :is(#segnalazione, main.segnalazione) textarea { font: inherit; width: 100%; padding: 10px 12px; border: 1px solid #E4E5E0;
  border-radius: 3px; background: #FFFFFF; color: #2B2C2C; }
:is(#segnalazione, main.segnalazione) textarea { resize: vertical; }
:is(#segnalazione, main.segnalazione) input:focus, :is(#segnalazione, main.segnalazione) textarea:focus { outline: 2px solid #96C23D; outline-offset: 1px; border-color: #96C23D; }
:is(#segnalazione, main.segnalazione) fieldset { border: 0; padding: 0; margin: 0 0 8px; display: grid; gap: 6px; min-width: 0; }
:is(#segnalazione, main.segnalazione) legend { font-weight: bold; color: #2B2C2C; margin-bottom: 6px; padding: 0; }
:is(#segnalazione, main.segnalazione) .segnalazione__tipo { display: flex; gap: 10px; align-items: center; font-weight: normal; color: #4D4F4F; cursor: pointer; }
:is(#segnalazione, main.segnalazione) .segnalazione__tipo input, :is(#segnalazione, main.segnalazione) .consenso input { width: 18px; height: 18px; margin: 0; accent-color: #5E7D27; flex: none; }
:is(#segnalazione, main.segnalazione) .consenso { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start; font-weight: normal;
  color: #4D4F4F; font-size: 0.92rem; margin-top: 8px; }
:is(#segnalazione, main.segnalazione) .consenso input { margin-top: 3px; }
:is(#segnalazione, main.segnalazione) .nascosto { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
:is(#segnalazione, main.segnalazione) button { font: inherit; font-weight: bold; justify-self: start; margin: 8px 0 0; padding: 12px 28px; border: 0;
  border-radius: 3px; background: #96C23D; color: #2B2C2C; cursor: pointer; }
:is(#segnalazione, main.segnalazione) button:hover { background: #87B033; }
:is(#segnalazione, main.segnalazione) button:disabled { opacity: .6; cursor: wait; }
#segnalazione .finestra__chiudi { position: absolute; top: 8px; right: 8px; margin: 0; padding: 4px 10px; background: none;
  color: #7A7C79; font-size: 1.4rem; font-weight: normal; line-height: 1; }
#segnalazione .finestra__chiudi:hover { background: #F4F8EC; color: #2B2C2C; }

/* Nel player il pulsante non sta in basso, dove ci sono i comandi: a 1280x720 copriva «?» e l'audio, sul telefono
   il tempo trascorso. Sta in alto a destra, sulla riga di «← I miei corsi», e scorre con la pagina (14/10/2026). */
.segnala--player { position: absolute; top: 8px; right: 16px; bottom: auto; box-shadow: none; }
@media (max-width: 720px) {
  .segnala--player { top: 6px; right: 12px; bottom: auto; padding: 8px; }
}

/* Il rimando nella schermata «Come funziona il corso» del player, su fondo scuro: verde chiaro come i
   collegamenti delle sezioni scure del sito. */
.elenco-istruzioni a[data-apri-segnalazione] { color: #C6DE94; }

/* «GRAZIE!» in fondo al testo della finestra (Eugenio, 14/10/2026): in maiuscolo come le etichette mono del marchio. */
.segnalazione__grazie { font-family: "JetBrains Mono", ui-monospace, monospace; font-weight: 600; letter-spacing: 0.06em; color: #5E7D27; white-space: nowrap; }