/* Copilota di qualifica — foglio unico, nessun build step.
 *
 * I rapporti di contrasto sono calcolati, non stimati: il numero e' accanto al
 * valore per evitare che qualcuno lo "sistemi" facendolo scendere sotto soglia.
 */

:root {
  --sfondo: #f3f5f7;
  --superficie: #ffffff;
  --testo: #1b2130; /* 16.1:1 su bianco */
  --tenue: #5a6472; /* 6.0:1 su bianco, 5.5:1 sul fondo */
  --bordo: #d9dee5;
  --bordo-forte: #b6bfca;
  --accento: #1258c8; /* 6.5:1 su bianco, e bianco 6.5:1 sopra */
  --accento-tenue: #e8f0fd;

  --verde: #17713f; /* 6.1:1 su bianco, 5.4:1 sul suo fondo */
  --verde-sfondo: #e8f5ee;
  --ambra: #8a5200; /* 5.8:1 sul suo fondo */
  --ambra-sfondo: #fdf3e0;
  --rosso: #b3261e; /* 5.7:1 sul suo fondo */
  --rosso-sfondo: #fdeceb;

  --raggio: 10px;
  --ombra: 0 1px 2px rgba(27, 33, 48, 0.06), 0 2px 8px rgba(27, 33, 48, 0.04);
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  background: var(--sfondo);
  color: var(--testo);
}

[hidden] {
  display: none !important;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

:focus-visible {
  outline: 3px solid var(--accento);
  outline-offset: 2px;
}

/* ------------------------------------------------------------------ barra -- */
.barra {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  padding: 0.6rem 1rem;
  background: var(--superficie);
  border-bottom: 1px solid var(--bordo);
}

.barra h1 {
  font-size: 1.05rem;
  margin: 0;
}

.indietro {
  color: var(--accento);
  text-decoration: none;
  font-weight: 600;
}

.indietro:hover {
  text-decoration: underline;
}

.pillola {
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  border: 1px solid transparent;
}

.pillola[data-stato="attiva"] {
  background: var(--verde-sfondo);
  color: var(--verde);
  border-color: #bfe3ce;
}

.pillola[data-stato="chiusa"] {
  background: var(--sfondo);
  color: var(--tenue);
  border-color: var(--bordo);
}

.errore {
  flex-basis: 100%;
  margin: 0;
  color: var(--rosso);
  background: var(--rosso-sfondo);
  border: 1px solid #f3c6c2;
  border-radius: var(--raggio);
  padding: 0.4rem 0.7rem;
}

/* ----------------------------------------------------------------- griglia -- */
.griglia {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr) 320px;
  gap: 1rem;
  padding: 1rem;
  align-items: start;
}

.colonna {
  min-width: 0;
}

.colonna-aree,
.colonna-pannello {
  position: sticky;
  top: 1rem;
  max-height: calc(100vh - 2rem);
  overflow-y: auto;
}

.titolo-colonna {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--tenue);
  margin: 0 0 0.5rem;
}

.sottotitolo {
  margin: 0.25rem 0 0;
  font-size: 0.82rem;
  color: var(--tenue);
}

/* ------------------------------------------------------------------- aree -- */
.elenco-aree {
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.riga-area {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  flex-wrap: wrap;
}

/* Il tasto va sotto al nome: in 250px accanto all'etichetta veniva tagliato. */
.riga-area.fuori .bottone {
  width: 100%;
  margin: 0 0 0.2rem 1.35rem;
  text-align: left;
}

.voce-area {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.45rem 0.55rem;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--raggio);
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.voce-area:hover {
  background: var(--superficie);
  border-color: var(--bordo);
}

.voce-area[aria-current="true"] {
  background: var(--superficie);
  border-color: var(--accento);
  font-weight: 600;
}

.etichetta-area {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.contatore {
  font-size: 0.75rem;
  color: var(--tenue);
  font-variant-numeric: tabular-nums;
}

.pallino {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex: none;
  border: 2px solid var(--bordo-forte);
  background: transparent;
}

.riga-area[data-stato="parziale"] .pallino {
  border-color: var(--ambra);
  background: linear-gradient(90deg, var(--ambra) 50%, transparent 50%);
}

.riga-area[data-stato="completa"] .pallino {
  border-color: var(--verde);
  background: var(--verde);
}

.riga-area[data-stato="fuori"] {
  opacity: 0.65;
}

.riga-area[data-stato="fuori"] .pallino {
  border-style: dashed;
  border-color: var(--tenue);
}

.titolo-fuori {
  margin-top: 0.5rem;
}

/* --------------------------------------------------------------- domande -- */
.elenco-domande {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.domanda {
  background: var(--superficie);
  border: 1px solid var(--bordo);
  border-left: 4px solid var(--bordo-forte);
  border-radius: var(--raggio);
  padding: 0.75rem 0.9rem;
  box-shadow: var(--ombra);
}

.domanda[data-stato="parziale"] {
  border-left-color: var(--ambra);
}

.domanda[data-stato="completa"] {
  border-left-color: var(--verde);
}

.testa-domanda {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.testo-domanda {
  font-size: 0.98rem;
  margin: 0;
  flex: 1;
  min-width: 12rem;
}

.bollino-bloccante {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--rosso);
  background: var(--rosso-sfondo);
  border-radius: 999px;
  padding: 0.05rem 0.45rem;
}

.etichetta-stato {
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.05rem 0.45rem;
  border-radius: 999px;
  color: var(--tenue);
  background: var(--sfondo);
}

.domanda[data-stato="parziale"] .etichetta-stato {
  color: var(--ambra);
  background: var(--ambra-sfondo);
}

.domanda[data-stato="completa"] .etichetta-stato {
  color: var(--verde);
  background: var(--verde-sfondo);
}

.aiuto {
  margin: 0.3rem 0 0;
  font-size: 0.82rem;
  color: var(--tenue);
}

/* Barra di profondita': tre tacche, con la soglia richiesta segnata sotto.
 * Senza la soglia, "2 su 3" non dice se manca qualcosa. */
.barra-profondita {
  display: flex;
  gap: 4px;
  margin: 0.55rem 0 0.15rem;
  padding-bottom: 7px;
}

.tacca {
  position: relative;
  flex: 1;
  height: 6px;
  border-radius: 3px;
  background: var(--bordo);
}

.tacca[data-piena="true"] {
  background: var(--bordo-forte);
}

.domanda[data-stato="parziale"] .tacca[data-piena="true"] {
  background: var(--ambra);
}

.domanda[data-stato="completa"] .tacca[data-piena="true"] {
  background: var(--verde);
}

.tacca[data-soglia="true"]::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 8px;
  width: 2px;
  height: 5px;
  transform: translateX(-50%);
  background: var(--testo);
}

.campo-risposta,
#campo-incolla,
#testo-recap,
input[type="text"] {
  width: 100%;
  font: inherit;
  color: inherit;
  padding: 0.45rem 0.55rem;
  border: 1px solid var(--bordo-forte);
  border-radius: 8px;
  background: var(--superficie);
  resize: vertical;
}

.campo-risposta {
  /* Cresce col contenuto: una risposta lunga non deve restare nascosta
   * dentro due righe di campo. */
  min-height: 3.1rem;
  overflow: hidden;
}

.domanda[data-bloccata="true"] .campo-risposta {
  border-color: var(--accento);
  background: var(--accento-tenue);
}

.riga-azioni {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
  margin-top: 0.4rem;
}

.citazione {
  margin: 0.4rem 0 0;
  padding: 0.4rem 0.6rem;
  border-left: 3px solid var(--bordo-forte);
  background: var(--sfondo);
  border-radius: 0 8px 8px 0;
  font-size: 0.85rem;
  color: var(--tenue);
}

.proposta {
  margin-top: 0.5rem;
  padding: 0.5rem 0.6rem;
  background: var(--accento-tenue);
  border: 1px solid #c3d8f8;
  border-radius: 8px;
}

.titolo-proposta {
  margin: 0;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--accento);
}

.testo-proposta {
  margin: 0.2rem 0 0;
  font-size: 0.88rem;
}

.pastiglie {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-top: 0.5rem;
}

.pastiglia {
  font: inherit;
  font-size: 0.78rem;
  color: var(--tenue);
  background: var(--sfondo);
  border: 1px solid var(--bordo);
  border-radius: 999px;
  padding: 0.1rem 0.55rem;
  cursor: pointer;
}

.pastiglia:hover {
  border-color: var(--accento);
  color: var(--accento);
}

/* --------------------------------------------------------------- pannello -- */
.riquadro {
  background: var(--superficie);
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
  padding: 0.75rem 0.9rem;
  margin-bottom: 0.75rem;
  box-shadow: var(--ombra);
}

.cattura {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  font-size: 0.88rem;
}

.spia {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex: none;
  background: var(--bordo-forte);
}

.spia[data-stato="attiva"] {
  background: var(--verde);
}

.spia[data-stato="ferma"] {
  background: var(--ambra);
}

.misure {
  display: flex;
  gap: 1rem;
  margin: 0.6rem 0 0;
}

.misure div {
  flex: 1;
}

.misure dt {
  font-size: 0.72rem;
  color: var(--tenue);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.misure dd {
  margin: 0;
  font-size: 1.05rem;
  font-variant-numeric: tabular-nums;
}

.copertura-numero {
  margin: 0;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.barra-copertura {
  height: 8px;
  background: var(--sfondo);
  border: 1px solid var(--bordo);
  border-radius: 999px;
  overflow: hidden;
  margin-top: 0.3rem;
}

.barra-copertura span {
  display: block;
  height: 100%;
  width: 0;
  background: var(--accento);
  transition: width 0.3s ease;
}

.costo {
  margin-top: 0.5rem;
  font-size: 0.75rem;
}

.avviso {
  color: var(--ambra);
  background: var(--ambra-sfondo);
  border-radius: 6px;
  padding: 0.25rem 0.45rem;
}

.riquadro-chiedere {
  border-color: var(--accento);
  background: var(--accento-tenue);
}

.suggerimenti {
  /* Il numero lo disegniamo noi: col marcatore nativo, appena il testo andava
   * a capo, il numero scivolava sulla seconda riga. */
  list-style: none;
  margin: 0;
  padding: 0;
}

.suggerimenti li {
  display: flex;
  gap: 0.4rem;
  align-items: baseline;
}

.suggerimenti li + li {
  margin-top: 0.4rem;
}

.numero-suggerimento {
  color: var(--tenue);
  font-variant-numeric: tabular-nums;
}

.suggerimenti .vuoto {
  color: var(--tenue);
  font-size: 0.85rem;
}

.suggerimento {
  display: inline;
  font: inherit;
  font-size: 0.88rem;
  text-align: left;
  color: var(--testo);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: var(--bordo-forte);
}

.suggerimento:hover {
  color: var(--accento);
}

.blocco-incolla summary {
  cursor: pointer;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--tenue);
}

.blocco-incolla[open] summary {
  margin-bottom: 0.5rem;
}

/* -------------------------------------------------------------- bottoni --- */
.bottone {
  font: inherit;
  font-weight: 600;
  padding: 0.4rem 0.8rem;
  border-radius: 8px;
  border: 1px solid var(--bordo-forte);
  background: var(--superficie);
  color: var(--testo);
  cursor: pointer;
}

.bottone:hover:not(:disabled) {
  border-color: var(--accento);
  color: var(--accento);
}

.bottone:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.bottone.primario {
  background: var(--accento);
  border-color: var(--accento);
  color: #ffffff; /* 6.5:1 */
  width: 100%;
}

.bottone.primario:hover:not(:disabled) {
  color: #ffffff;
  filter: brightness(1.08);
}

.bottone.pericolo {
  color: var(--rosso);
  border-color: #eab5b1;
  width: 100%;
}

.bottone.pericolo:hover:not(:disabled) {
  border-color: var(--rosso);
  color: var(--rosso);
}

.bottone.minuto {
  font-size: 0.78rem;
  padding: 0.15rem 0.5rem;
  width: auto;
}

/* --------------------------------------------------------------- dialogo -- */
.dialogo {
  width: min(760px, 92vw);
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
  padding: 1.25rem;
  color: var(--testo);
}

.dialogo::backdrop {
  background: rgba(27, 33, 48, 0.45);
}

.dialogo h2 {
  margin-top: 0;
}

.dialogo .bottone {
  width: auto;
}

.blocco-rosso {
  background: var(--rosso-sfondo);
  border: 1px solid #f3c6c2;
  border-left: 4px solid var(--rosso);
  border-radius: 8px;
  padding: 0.75rem 0.9rem;
  margin-bottom: 1rem;
}

.blocco-rosso h3 {
  margin: 0 0 0.4rem;
  font-size: 0.95rem;
  color: var(--rosso);
}

.blocco-rosso ul {
  margin: 0;
  padding-left: 1.1rem;
  font-size: 0.9rem;
}

.blocco-verde {
  background: var(--verde-sfondo);
  border: 1px solid #bfe3ce;
  border-left: 4px solid var(--verde);
  border-radius: 8px;
  padding: 0.6rem 0.9rem;
  color: var(--verde);
  margin-bottom: 1rem;
}

#testo-recap {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.82rem;
}

/* ----------------------------------------------------------------- elenco -- */
.contenuto-stretto {
  max-width: 46rem;
  margin: 1.25rem auto;
  padding: 0 1rem;
}

.modulo-inline {
  display: flex;
  gap: 0.5rem;
  align-items: end;
  flex-wrap: wrap;
}

.modulo-inline label {
  flex-basis: 100%;
  font-size: 0.82rem;
  color: var(--tenue);
}

.modulo-inline input {
  flex: 1;
  min-width: 12rem;
}

.modulo-inline .bottone {
  width: auto;
}

.elenco-sessioni {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.riga-sessione {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--bordo);
  flex-wrap: wrap;
}

.riga-sessione:last-child {
  border-bottom: none;
}

.nome-sessione {
  flex: 1;
  min-width: 10rem;
  font-weight: 600;
  color: var(--accento);
  text-decoration: none;
}

.nome-sessione:hover {
  text-decoration: underline;
}

.credenziali {
  margin-top: 0.9rem;
  padding: 0.75rem 0.9rem;
  background: var(--accento-tenue);
  border: 1px solid #c3d8f8;
  border-radius: 8px;
}

.credenziali h3 {
  margin: 0;
  font-size: 0.95rem;
}

.credenziali input {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.82rem;
  margin-bottom: 0.3rem;
}

.credenziali .bottone {
  width: auto;
}

.credenziali a.bottone {
  text-decoration: none;
  display: inline-block;
}

.pagina-login {
  display: grid;
  place-items: center;
  min-height: 100vh;
}

.riquadro-login {
  width: min(24rem, 92vw);
  background: var(--superficie);
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
  padding: 1.5rem;
  box-shadow: var(--ombra);
}

.riquadro-login h1 {
  margin: 0;
  font-size: 1.15rem;
}

.riquadro-login label {
  display: block;
  margin-top: 0.9rem;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--tenue);
}

.riquadro-login input {
  width: 100%;
  margin-top: 0.2rem;
}

.riquadro-login .bottone {
  margin-top: 1.1rem;
}

.riquadro-login .errore {
  margin-top: 0.8rem;
}

.esci {
  margin-left: auto;
  font-size: 0.8rem;
}

/* ------------------------------------------------------------ animazioni -- */
@keyframes lampeggio {
  from {
    background-color: var(--accento-tenue);
  }
  to {
    background-color: transparent;
  }
}

.lampeggia {
  animation: lampeggio 0.9s ease-out;
}

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

/* ------------------------------------------------------------- stretto --- */
@media (max-width: 820px) {
  .griglia {
    grid-template-columns: minmax(0, 1fr);
  }

  .colonna-aree,
  .colonna-pannello {
    position: static;
    max-height: none;
    overflow: visible;
  }

  /* Su schermo stretto conta prima cosa chiedere adesso, poi le aree. */
  .colonna-pannello {
    order: -1;
  }

  .elenco-aree {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .riga-area {
    flex: 1 1 8rem;
  }
}