/* Wema Social — stile del gestionale. I colori sono variabili: si cambiano qui (es. con i colori Wema). */
:root {
  --sfondo: #f5f6f8;
  --superficie: #ffffff;
  --bordo: #e2e5ea;
  --testo: #1d2330;
  --tenue: #6b7280;
  --primario: #3b4bdb;
  --primario-testo: #ffffff;
  --verde: #15803d;   --verde-sf: #dcfce7;
  --giallo: #a16207;  --giallo-sf: #fef3c7;
  --rosso: #b91c1c;   --rosso-sf: #fee2e2;
  --raggio: 8px;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--testo);
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--sfondo); font-size: 15px; line-height: 1.45; }
h1 { font-size: 1.5rem; margin: 0.2rem 0; display: flex; align-items: center; gap: 0.5rem; }
h2 { font-size: 1.1rem; margin: 0 0 0.5rem; }
a { color: var(--primario); text-decoration: none; }
a:hover { text-decoration: underline; }
.tenue, small { color: var(--tenue); }
small { font-weight: normal; margin-left: 0.3rem; }
.caricamento { padding: 2rem; color: var(--tenue); }
.errore { color: var(--rosso); background: var(--rosso-sf); padding: 0.6rem 0.8rem; border-radius: var(--raggio); }
.nascosto { display: none !important; }

/* pulsanti e campi */
button { font: inherit; cursor: pointer; border-radius: var(--raggio); border: 1px solid var(--bordo); background: var(--superficie); padding: 0.5rem 1rem; }
button.primario { background: var(--primario); color: var(--primario-testo); border-color: var(--primario); font-weight: 600; }
button.link { border: 0; background: none; padding: 0; color: var(--primario); }
button:disabled { opacity: 0.6; cursor: wait; }
input, select, textarea { font: inherit; width: 100%; padding: 0.5rem 0.6rem; border: 1px solid var(--bordo); border-radius: var(--raggio); background: var(--superficie); color: var(--testo); }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--primario); outline-offset: -1px; }
input:disabled, select:disabled, textarea:disabled { background: var(--sfondo); }
textarea { resize: vertical; }
label { display: block; font-weight: 600; margin-bottom: 1rem; }
label > input, label > select, label > textarea { margin-top: 0.3rem; font-weight: normal; }
label.spunta { display: inline-flex; align-items: center; gap: 0.4rem; font-weight: normal; margin: 0 1rem 0.6rem 0; }
label.spunta input { width: auto; margin: 0; }

/* login */
.login { min-height: 100vh; display: grid; place-items: center; padding: 1rem; }
.login-box { background: var(--superficie); padding: 2rem; border-radius: 12px; border: 1px solid var(--bordo); width: min(380px, 100%); }
.login-box h1 { margin: 0; }
.sottotitolo { color: var(--tenue); margin: 0 0 1.5rem; }
.login-box button { width: 100%; }

/* struttura */
.struttura { display: grid; grid-template-columns: 220px 1fr; min-height: 100vh; }
.barra { background: var(--testo); color: #fff; padding: 1.2rem 1rem; display: flex; flex-direction: column; gap: 1.5rem; position: sticky; top: 0; height: 100vh; }
.marchio { font-weight: 700; font-size: 1.1rem; }
.menu { display: flex; flex-direction: column; gap: 0.2rem; flex: 1; }
.menu a, .menu .presto { color: #cbd2e0; padding: 0.5rem 0.7rem; border-radius: var(--raggio); }
.menu a:hover { background: rgba(255,255,255,0.08); text-decoration: none; }
.menu a.attivo { background: rgba(255,255,255,0.14); color: #fff; }
.menu .presto { opacity: 0.45; cursor: default; }
.utente { font-size: 0.9rem; }
.utente .ruolo { color: #9aa3b5; text-transform: capitalize; margin-bottom: 0.3rem; }
.utente .link { color: #cbd2e0; }
#contenuto { padding: 1.5rem 2rem; max-width: 1100px; width: 100%; }

.intestazione { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 1.2rem; gap: 1rem; }
.indietro { font-size: 0.9rem; }
.conteggio { font-size: 0.9rem; color: var(--tenue); font-weight: normal; }

/* elenco */
.filtri { display: flex; gap: 0.6rem; margin-bottom: 1rem; flex-wrap: wrap; }
.filtri input { flex: 1; min-width: 200px; }
.filtri select { width: auto; }
.tabella { width: 100%; border-collapse: collapse; background: var(--superficie); border-radius: var(--raggio); overflow: hidden; border: 1px solid var(--bordo); }
.tabella th, .tabella td { text-align: left; padding: 0.6rem 0.8rem; border-bottom: 1px solid var(--bordo); }
.tabella th { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--tenue); background: var(--sfondo); }
.tabella tbody tr { cursor: pointer; }
.tabella tbody tr:hover { background: #f0f2ff; }
.tabella tr.spento { opacity: 0.5; }

.badge { display: inline-block; font-size: 0.75rem; font-weight: 600; padding: 0.1rem 0.5rem; border-radius: 99px; background: var(--sfondo); color: var(--tenue); margin-left: 0.3rem; vertical-align: middle; }
.badge-verde { background: var(--verde-sf); color: var(--verde); }
.badge-giallo { background: var(--giallo-sf); color: var(--giallo); }
.badge-rosso { background: var(--rosso-sf); color: var(--rosso); }

/* dettaglio cliente */
.schede-tab { display: flex; gap: 0.3rem; margin-bottom: -1px; }
.tab { border-radius: var(--raggio) var(--raggio) 0 0; border-bottom: 0; background: transparent; }
.tab.attivo { background: var(--superficie); font-weight: 600; }
.pannello { background: var(--superficie); border: 1px solid var(--bordo); border-radius: var(--raggio); padding: 1.5rem; margin-bottom: 1rem; }
.due-colonne { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
fieldset { border: 1px solid var(--bordo); border-radius: var(--raggio); padding: 1rem 1rem 0.4rem; margin: 0 0 1.2rem; }
legend { font-weight: 700; padding: 0 0.4rem; }
fieldset.emergenza { border-color: var(--rosso-sf); }
.gruppo-spunte { margin-bottom: 0.8rem; }
.gruppo-spunte > span { display: block; font-weight: 600; margin-bottom: 0.3rem; }
.nota { color: var(--giallo); margin: 0 0 0.6rem; }
.nota:empty { display: none; }
.campioni { display: flex; gap: 0.3rem; margin-top: 0.4rem; }
.campioni i { width: 22px; height: 22px; border-radius: 4px; border: 1px solid var(--bordo); }
details { margin-bottom: 1rem; }
summary { cursor: pointer; color: var(--tenue); }

/* controllo */
.riquadri { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 1rem; margin-bottom: 1.5rem; }
.riquadro { background: var(--superficie); border: 1px solid var(--bordo); border-left: 4px solid var(--bordo); border-radius: var(--raggio); padding: 1rem; display: flex; flex-direction: column; color: var(--testo); }
.riquadro:hover { text-decoration: none; }
.riquadro strong { font-size: 1.8rem; }
.riquadro span { color: var(--tenue); }
.riquadro.verde { border-left-color: var(--verde); }
.riquadro.giallo { border-left-color: var(--giallo); }
.riquadro.rosso { border-left-color: var(--rosso); }

/* avvisi */
.avviso { position: fixed; bottom: 1.2rem; right: 1.2rem; padding: 0.8rem 1.2rem; border-radius: var(--raggio); font-weight: 600; box-shadow: 0 4px 16px rgba(0,0,0,0.12); z-index: 10; }
.avviso-ok { background: var(--verde-sf); color: var(--verde); }
.avviso-errore { background: var(--rosso-sf); color: var(--rosso); }

/* telefono */
@media (max-width: 760px) {
  .struttura { grid-template-columns: 1fr; }
  .barra { position: static; height: auto; flex-direction: row; flex-wrap: wrap; align-items: center; padding: 0.8rem 1rem; gap: 0.8rem; }
  .menu { flex-direction: row; flex-wrap: wrap; flex: 1 1 100%; order: 3; }
  .menu .presto { display: none; }
  .utente { margin-left: auto; text-align: right; }
  #contenuto { padding: 1rem; }
  .due-colonne { grid-template-columns: 1fr; }
  .tabella th:nth-child(3), .tabella td:nth-child(3), .tabella th:nth-child(5), .tabella td:nth-child(5) { display: none; }
}

/* piano editoriale */
.genera { display: flex; flex-wrap: wrap; gap: 0 1rem; align-items: flex-end; background: var(--superficie); border: 1px solid var(--bordo); border-radius: var(--raggio); padding: 1rem 1rem 0; margin-bottom: 1rem; }
.genera label { margin-bottom: 1rem; }
.genera button { margin-bottom: 1rem; }
.genera p { flex-basis: 100%; margin: 0 0 1rem; }
#elenco-piani { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: 1rem; }
.riga-piano { display: flex; gap: 1rem; align-items: center; text-align: left; }
.riga-piano span:nth-child(2) { color: var(--tenue); flex: 1; }
.riga-piano.attivo { border-color: var(--primario); background: #f0f2ff; }
.nota-piano { background: var(--sfondo); padding: 0.7rem 0.9rem; border-radius: var(--raggio); margin-top: 0; }
.tabella.piano tbody tr { cursor: default; }
.tabella.piano td { vertical-align: top; }
.tabella.piano td.largo { width: 55%; }
.tabella.piano td.largo input { margin-bottom: 0.3rem; font-weight: 600; }
.tabella.piano tr.settimana td { background: var(--sfondo); font-weight: 700; font-size: 0.85rem; color: var(--tenue); }
.tabella.piano .quando { white-space: nowrap; }
.azioni { display: flex; gap: 1rem; align-items: center; margin-top: 1rem; }
.tabella.piano select { min-width: 8.5rem; }
.tabella.piano td.largo { min-width: 260px; }
.pannello:has(.tabella.piano) { overflow-x: auto; }

/* approvazione piano (gestionale) */
button.pericolo { color: var(--rosso); border-color: var(--rosso-sf); }
.azioni { flex-wrap: wrap; }
.commento { background: var(--giallo-sf); color: var(--testo); padding: 0.4rem 0.6rem; border-radius: var(--raggio); margin: 0.4rem 0 0; font-size: 0.9rem; }
.commento.risolto { opacity: 0.5; text-decoration: line-through; }
.tabella.piano tr.con-commento td { background: #fffbeb; }
.esito-ok { background: var(--verde-sf); color: var(--verde); padding: 0.6rem 0.8rem; border-radius: var(--raggio); font-weight: 600; margin-top: 0; }
.esito-attesa { background: var(--giallo-sf); color: var(--giallo); padding: 0.6rem 0.8rem; border-radius: var(--raggio); font-weight: 600; margin-top: 0; }
.box-link { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; background: var(--sfondo); padding: 0.8rem; border-radius: var(--raggio); }
.box-link p { flex-basis: 100%; margin: 0; font-weight: 600; }
.box-link input { flex: 1; min-width: 240px; }

/* pagina pubblica del cliente */
.pagina-cliente #app { max-width: 720px; margin: 0 auto; padding: 1.5rem 1rem 3rem; }
.cliente-box, .cliente-intestazione { background: var(--superficie); border: 1px solid var(--bordo); border-radius: 12px; padding: 1.5rem; margin-bottom: 1.2rem; }
.cliente-intestazione h1 { margin: 0 0 0.3rem; }
.cliente-intestazione > p { margin: 0.2rem 0; }
.settimana-cliente { font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--tenue); margin: 1.6rem 0 0.6rem; }
.voce-cliente { background: var(--superficie); border: 1px solid var(--bordo); border-radius: var(--raggio); padding: 1rem 1.2rem; margin-bottom: 0.7rem; }
.voce-cliente h3 { margin: 0.4rem 0 0.3rem; font-size: 1.05rem; }
.voce-cliente > p { margin: 0 0 0.4rem; color: var(--tenue); }
.voce-quando { display: flex; flex-wrap: wrap; gap: 0 0.6rem; font-size: 0.9rem; }
.voce-quando strong { text-transform: capitalize; }
.voce-quando span { color: var(--tenue); }
.voce-cliente details { margin: 0.4rem 0 0; }
.voce-cliente textarea { margin-top: 0.4rem; }
.cliente-risposta { background: var(--superficie); border: 1px solid var(--bordo); border-radius: 12px; padding: 1.5rem; margin-top: 1.5rem; }
.cliente-risposta .azioni { margin-top: 0; }

/* contenuti */
.barra-contenuti { display: flex; flex-wrap: wrap; gap: 0.8rem; align-items: center; justify-content: space-between; background: var(--sfondo); padding: 0.7rem 0.9rem; border-radius: var(--raggio); margin-bottom: 1rem; }
.rosso { color: var(--rosso); }
.riga-slide { display: grid; grid-template-columns: 2rem 1fr auto; gap: 0.5rem; align-items: start; margin-bottom: 0.7rem; }
.riga-slide .numero { font-weight: 700; color: var(--tenue); padding-top: 0.5rem; text-align: center; }
.riga-slide input { font-weight: 600; margin-bottom: 0.3rem; }
.riga-slide .togli { color: var(--rosso); padding-top: 0.5rem; }

/* grafiche */
.galleria { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0.8rem; margin-bottom: 0.8rem; }
.galleria figure { margin: 0; }
.galleria img, .galleria video { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--raggio); border: 1px solid var(--bordo); display: block; background: var(--sfondo); }
.galleria figcaption { font-size: 0.8rem; color: var(--tenue); margin-top: 0.3rem; }
label.carica { display: inline-flex; align-items: center; gap: 0.4rem; font-weight: normal; margin: 0; border: 1px solid var(--bordo); border-radius: var(--raggio); padding: 0.5rem 1rem; cursor: pointer; background: var(--superficie); }
label.carica input { display: none; }