/* Componenti comuni (public/comune/componenti.js). Solo variabili di base.css: nessun colore fisso fuori dai temi. */

:root { --pericolo: #C62828; --pericolo-sopra: #A61F1F; }
[data-tema="scuro"] { --pericolo: #D63B41; --pericolo-sopra: #E5555A; }

.icona { flex: none; }

/* ---- Pulsanti ---- */
.pulsante {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spazio-2);
  min-height: 48px;
  padding: 0 20px;
  border: 1px solid transparent;
  border-radius: var(--raggio-piccolo);
  font-size: 1rem;
  font-weight: 650;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: background-color var(--durata), border-color var(--durata), color var(--durata), transform 80ms;
}
.pulsante:active:not(:disabled) { transform: translateY(1px); }
.pulsante:hover { text-decoration: none; }
.pulsante--piccolo { min-height: var(--tocco); padding: 0 14px; font-size: 0.9375rem; }
.pulsante--pieno { width: 100%; }

.pulsante--principale { background: var(--primario); color: var(--testo-primario); }
.pulsante--principale:hover:not(:disabled) { background: color-mix(in srgb, var(--primario) 86%, #000); }
[data-tema="scuro"] .pulsante--principale:hover:not(:disabled) { background: color-mix(in srgb, var(--primario) 84%, #FFF); }

.pulsante--secondario { background: var(--superficie); color: var(--testo); border-color: var(--bordo-forte); }
.pulsante--secondario:hover:not(:disabled) { background: var(--superficie-2); }

.pulsante--testo { background: transparent; color: var(--accento); padding-inline: 14px; }
.pulsante--testo:hover:not(:disabled) { background: var(--accento-tenue); }

.pulsante--pericolo { background: var(--pericolo); color: #FFF; }
.pulsante--pericolo:hover:not(:disabled) { background: var(--pericolo-sopra); }

.pulsante:disabled { cursor: not-allowed; opacity: 0.5; }
.pulsante.in-caricamento:disabled { opacity: 0.85; cursor: progress; }

.pulsante-icona {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: var(--tocco);
  height: var(--tocco);
  padding: 0;
  border: 0;
  border-radius: var(--raggio-piccolo);
  background: transparent;
  color: var(--testo-tenue);
  cursor: pointer;
  transition: background-color var(--durata), color var(--durata);
}
.pulsante-icona:hover { background: var(--superficie-2); color: var(--testo); }

/* ---- Cerchio di caricamento ---- */
.giro {
  display: inline-block;
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2.5px solid currentColor;
  border-right-color: transparent;
  opacity: 0.9;
  animation: gira 0.75s linear infinite;
}
.giro--piccolo { width: 18px; height: 18px; border-width: 2px; }
@keyframes gira { to { transform: rotate(360deg); } }

.caricamento {
  display: flex;
  align-items: center;
  gap: var(--spazio-3);
  color: var(--testo-tenue);
  padding: var(--spazio-3) 0;
}
.caricamento .giro { color: var(--accento); }

.scheletro { display: flex; flex-direction: column; gap: var(--spazio-3); }
.scheletro__blocco {
  border-radius: 6px;
  background: linear-gradient(90deg, var(--superficie-2) 0%, color-mix(in srgb, var(--superficie-2) 55%, var(--superficie)) 50%, var(--superficie-2) 100%);
  background-size: 200% 100%;
  animation: luccica 1.4s ease-in-out infinite;
}
.scheletro__blocco--immagine { aspect-ratio: 16 / 9; border-radius: var(--raggio-piccolo); margin-bottom: var(--spazio-2); }
.scheletro__riga { height: 14px; }
@keyframes luccica { from { background-position: 100% 0; } to { background-position: -100% 0; } }

/* ---- Campi ---- */
.campo { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.campo__etichetta { font-weight: 620; font-size: 0.9375rem; }
.campo__obbligatorio { font-weight: 450; color: var(--testo-tenue); font-size: 0.875rem; }
.campo__controllo {
  width: 100%;
  min-height: 48px;
  padding: 11px 14px;
  border: 1px solid var(--bordo-forte);
  border-radius: var(--raggio-piccolo);
  background: var(--superficie);
  color: var(--testo);
  font-size: 1rem; /* 16 px: niente zoom automatico su iPhone */
  line-height: 1.4;
  transition: border-color var(--durata), box-shadow var(--durata);
}
.campo__controllo::placeholder { color: var(--testo-tenue); opacity: 0.75; }
.campo__controllo:hover { border-color: var(--testo-tenue); }
.campo__controllo:focus-visible {
  outline: none;
  border-color: var(--accento);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accento) 28%, transparent);
}
textarea.campo__controllo { resize: vertical; min-height: 112px; }
.campo__scelta { position: relative; }
.campo__scelta select { appearance: none; -webkit-appearance: none; padding-right: 44px; cursor: pointer; }
.campo__freccia { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); pointer-events: none; color: var(--testo-tenue); }
.campo--errore .campo__controllo { border-color: var(--errore); }
.campo--errore .campo__controllo:focus-visible { box-shadow: 0 0 0 3px color-mix(in srgb, var(--errore) 25%, transparent); }
.campo__errore { display: flex; gap: 6px; align-items: flex-start; color: var(--errore); font-size: 0.875rem; font-weight: 560; }
.campo__errore .icona { margin-top: 2px; }
.campo__aiuto { color: var(--testo-tenue); font-size: 0.875rem; }

/* ---- Scheda (riquadro) ---- */
.scheda {
  background: var(--superficie);
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
  box-shadow: var(--ombra);
  padding: 20px;
  min-width: 0;
}
@media (min-width: 640px) { .scheda { padding: 24px; } }
.scheda--piatta { box-shadow: none; background: var(--superficie-2); border-color: transparent; }
.scheda__testa {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--spazio-3);
  margin-bottom: var(--spazio-5);
}
.scheda__titolo { font-size: 1.1875rem; }
.scheda__azioni { display: flex; gap: var(--spazio-2); flex: none; }

/* ---- Schede (tab) ---- */
.schede__elenco {
  display: flex;
  gap: var(--spazio-1);
  overflow-x: auto;
  scrollbar-width: none;
  border-bottom: 1px solid var(--bordo);
  margin-inline: -4px;
  padding-inline: 4px;
}
.schede__elenco::-webkit-scrollbar { display: none; }
.schede__scheda {
  position: relative;
  flex: none;
  min-height: var(--tocco);
  padding: 0 14px;
  border: 0;
  background: none;
  color: var(--testo-tenue);
  font-weight: 620;
  cursor: pointer;
  border-radius: 8px 8px 0 0;
  transition: color var(--durata), background-color var(--durata);
}
.schede__scheda:hover { color: var(--testo); background: var(--superficie-2); }
.schede__scheda[aria-selected="true"] { color: var(--testo); }
.schede__scheda[aria-selected="true"]::after {
  content: "";
  position: absolute;
  left: 10px; right: 10px; bottom: -1px;
  height: 3px;
  border-radius: 3px 3px 0 0;
  background: var(--accento);
}
.schede__scheda:focus-visible { outline-offset: -3px; }
.schede__pannello { padding-top: var(--spazio-4); }
.schede__pannello:focus-visible { outline-offset: 4px; }

/* ---- Interruttore ---- */
.interruttore {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spazio-4);
  width: 100%;
  min-height: 56px;
  padding: var(--spazio-2) 0;
  border: 0;
  background: none;
  color: var(--testo);
  text-align: left;
  cursor: pointer;
}
.interruttore:disabled { cursor: not-allowed; opacity: 0.5; }
.interruttore__testi { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.interruttore__etichetta { font-weight: 560; }
.interruttore__descrizione { font-size: 0.875rem; color: var(--testo-tenue); }
.interruttore__binario {
  position: relative;
  flex: none;
  width: 50px;
  height: 30px;
  border-radius: var(--raggio-pieno);
  background: var(--bordo-forte);
  transition: background-color var(--durata);
}
.interruttore__pomello {
  position: absolute;
  top: 3px; left: 3px;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: #FFF;
  box-shadow: 0 1px 3px rgb(0 0 0 / 0.25);
  transition: transform var(--durata) cubic-bezier(.3, .7, .4, 1);
}
.interruttore[aria-checked="true"] .interruttore__binario { background: var(--primario); }
.interruttore[aria-checked="true"] .interruttore__pomello { transform: translateX(20px); }
.interruttore:focus-visible { outline-offset: 4px; border-radius: 8px; }

/* ---- Avvisi ---- */
.avviso {
  display: flex;
  align-items: flex-start;
  gap: var(--spazio-3);
  padding: 14px 16px;
  border: 1px solid;
  border-radius: var(--raggio);
  color: var(--testo);
}
.avviso__icona { margin-top: 2px; }
.avviso__corpo { flex: 1; min-width: 0; }
.avviso__titolo { font-weight: 680; margin-bottom: 2px; }
.avviso__chiudi {
  flex: none;
  display: grid; place-items: center;
  width: 36px; height: 36px;
  margin: -6px -8px -6px 0;
  border: 0; border-radius: 8px;
  background: none; color: var(--testo-tenue);
  cursor: pointer;
}
.avviso__chiudi:hover { color: var(--testo); background: color-mix(in srgb, currentColor 10%, transparent); }
.avviso--info { background: var(--accento-tenue); border-color: var(--accento-medio); }
.avviso--info .avviso__icona { color: var(--accento); }
.avviso--successo { background: var(--successo-tenue); border-color: color-mix(in srgb, var(--successo) 30%, transparent); }
.avviso--successo .avviso__icona { color: var(--successo); }
.avviso--errore { background: var(--errore-tenue); border-color: color-mix(in srgb, var(--errore) 30%, transparent); }
.avviso--errore .avviso__icona { color: var(--errore); }
.avviso--attenzione { background: var(--attenzione-tenue); border-color: color-mix(in srgb, var(--attenzione) 30%, transparent); }
.avviso--attenzione .avviso__icona { color: var(--attenzione); }

/* ---- Stato vuoto ---- */
.vuoto {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--spazio-2);
  padding: 40px 20px;
  border: 1.5px dashed var(--bordo-forte);
  border-radius: var(--raggio);
}
.vuoto__icona {
  display: grid;
  place-items: center;
  width: 64px; height: 64px;
  margin-bottom: var(--spazio-2);
  border-radius: 20px;
  background: var(--accento-tenue);
  color: var(--accento);
}
.vuoto__titolo { font-size: 1.125rem; }
.vuoto__testo { color: var(--testo-tenue); max-width: 42ch; }
.vuoto__azione { margin-top: var(--spazio-3); }

/* ---- Barra di avanzamento ---- */
.barra { display: flex; flex-direction: column; gap: var(--spazio-2); min-width: 0; }
.barra__testa { display: flex; justify-content: space-between; align-items: baseline; gap: var(--spazio-3); }
.barra__etichetta { font-weight: 620; min-width: 0; }
.barra__valore { font-weight: 720; font-variant-numeric: tabular-nums; color: var(--accento); }
.barra__binario {
  height: 10px;
  border-radius: var(--raggio-pieno);
  background: var(--superficie-2);
  box-shadow: inset 0 0 0 1px var(--bordo);
  overflow: hidden;
}
.barra__riempimento {
  height: 100%;
  min-width: 0;
  border-radius: inherit;
  background: var(--primario);
  transition: width 500ms cubic-bezier(.2, .7, .3, 1);
}
.barra--completa .barra__riempimento { background: var(--successo); }
.barra--completa .barra__valore { color: var(--successo); }
.barra__dettaglio { font-size: 0.875rem; color: var(--testo-tenue); }

/* ---- Finestra (modale): dal basso sul telefono, al centro dal tablet in su ---- */
.finestra {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.finestra__velo { position: absolute; inset: 0; background: var(--velo); animation: appare 160ms ease-out; }
.finestra__riquadro {
  position: relative;
  width: 100%;
  max-height: 92dvh;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--superficie);
  border-radius: 16px 16px 0 0;
  box-shadow: var(--ombra-alta);
  padding: 20px 20px calc(20px + env(safe-area-inset-bottom));
  animation: sale 220ms cubic-bezier(.2, .8, .3, 1);
}
.finestra__riquadro:focus-visible { outline: none; }
.finestra__testa { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--spazio-3); margin-bottom: var(--spazio-3); }
.finestra__titolo { font-size: 1.25rem; padding-top: 8px; }
.finestra__testa .pulsante-icona { margin: -2px -10px 0 0; }
.finestra__corpo { color: var(--testo); }
.finestra__piede { display: flex; flex-direction: column; gap: var(--spazio-2); margin-top: var(--spazio-5); }
.finestra__piede .pulsante { width: 100%; }
@media (min-width: 640px) {
  .finestra { align-items: center; padding: var(--spazio-5); }
  .finestra__riquadro { max-width: 520px; border-radius: 16px; padding: 24px; border: 1px solid var(--bordo); animation-name: entra; }
  .finestra__riquadro--larga { max-width: 760px; }
  .finestra__piede { flex-direction: row; justify-content: flex-end; }
  .finestra__piede .pulsante { width: auto; }
}
@keyframes appare { from { opacity: 0; } }
@keyframes sale { from { transform: translateY(24px); opacity: 0; } }
@keyframes entra { from { transform: translateY(8px) scale(0.98); opacity: 0; } }

/* ---- Menu a tendina ---- */
.menu { position: relative; display: inline-block; }
.menu__elenco {
  position: absolute;
  top: calc(100% + 6px);
  z-index: 30;
  min-width: 232px;
  max-width: calc(100vw - 32px);
  padding: 6px;
  background: var(--superficie);
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
  box-shadow: var(--ombra-alta);
  animation: entra 120ms ease-out;
}
.menu__elenco--fine { right: 0; }
.menu__elenco--inizio { left: 0; }
.menu__voce {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: var(--tocco);
  padding: 0 12px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--testo);
  font-weight: 520;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.menu__voce .icona { color: var(--testo-tenue); }
.menu__voce:hover, .menu__voce:focus-visible { background: var(--superficie-2); outline: none; text-decoration: none; }
.menu__voce:focus-visible { box-shadow: inset 0 0 0 2px var(--anello); }
.menu__voce--pericolo, .menu__voce--pericolo .icona { color: var(--errore); }

/* ---- Scelta del tema ---- */
.scelta-tema {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border-radius: var(--raggio-pieno);
  background: var(--superficie-2);
  border: 1px solid var(--bordo);
}
.scelta-tema__voce {
  display: grid;
  place-items: center;
  width: var(--tocco); height: var(--tocco);
  border: 0;
  border-radius: var(--raggio-pieno);
  background: none;
  color: var(--testo-tenue);
  cursor: pointer;
}
.scelta-tema__voce:hover { color: var(--testo); }
.scelta-tema__voce[aria-pressed="true"] { background: var(--superficie); color: var(--testo); box-shadow: 0 1px 3px rgb(0 0 0 / 0.12); }
.scelta-tema__voce:focus-visible { outline-offset: 0; border-radius: var(--raggio-pieno); }

/* ---- Pagina di prova dei componenti ---- */
.vetrina__intro { max-width: 60ch; }
.vetrina__griglia { display: grid; gap: var(--spazio-4); grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 960px) {
  .vetrina__griglia { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--spazio-5); }
  .vetrina__larga { grid-column: 1 / -1; }
}
.vetrina__elenco > * + * { border-top: 1px solid var(--bordo); }
.vetrina__scelta { margin-top: var(--spazio-3); }