/* Aspetto provvisorio del portale (fase 2): leggibile e sobrio. Il disegno vero arriva in fase 5. */
:root { --testo: #1d1d1f; --tenue: #6b6b70; --sfondo: #f6f6f4; --carta: #fff; --bordo: #dcdcd8;
        --accento: #1f5f8b; --ok: #1e6b3a; --errore: #a32020; }
* { box-sizing: border-box; }
body { margin: 0; font: 15px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif; color: var(--testo); background: var(--sfondo); }
a { color: var(--accento); }
.testata { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; padding: .75rem 1rem; background: var(--carta); border-bottom: 1px solid var(--bordo); }
.marchio { font-weight: 700; text-decoration: none; color: var(--testo); }
.menu { display: flex; flex-wrap: wrap; gap: .9rem; flex: 1; }
.persona { display: flex; align-items: center; gap: .5rem; }
main { max-width: 1200px; margin: 0 auto; padding: 1rem; }
h1 { font-size: 1.5rem; margin: .5rem 0 1rem; }
.riquadro { background: var(--carta); border: 1px solid var(--bordo); border-radius: 6px; padding: 1rem; margin: 1rem 0; }
.stretto { max-width: 420px; margin: 3rem auto; }
.modulo { display: flex; flex-direction: column; gap: .4rem; }
.modulo.largo { background: var(--carta); border: 1px solid var(--bordo); border-radius: 6px; padding: 1rem; }
.in-linea { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin: 0; }
.campi { border: 1px solid var(--bordo); border-radius: 6px; margin: .5rem 0; padding: .75rem; display: flex; flex-direction: column; gap: .35rem; }
.casella { display: block; }
input, select, button { font: inherit; padding: .35rem .5rem; border: 1px solid var(--bordo); border-radius: 4px; }
button, .pulsante { background: var(--accento); color: #fff; border-color: var(--accento); cursor: pointer; text-decoration: none; padding: .4rem .8rem; border-radius: 4px; }
button.secondario { background: var(--carta); color: var(--accento); }
.avviso { padding: .6rem .8rem; border-radius: 4px; }
.avviso.ok { background: #e7f3ea; color: var(--ok); }
.avviso.errore { background: #f8e8e8; color: var(--errore); }
.vuoto, .nota { color: var(--tenue); }
.grande { font-size: 1.4rem; font-weight: 600; margin: 0; }
.griglia { width: 100%; border-collapse: collapse; background: var(--carta); font-size: .9rem; }
.griglia th, .griglia td { border-bottom: 1px solid var(--bordo); padding: .35rem .5rem; text-align: left; vertical-align: top; }
.classe-personale { color: var(--errore); }
.classe-testo_libero { color: #8a5a00; }
.classe-nessuna { color: var(--tenue); font-style: italic; }
code { font-size: .85em; word-break: break-all; }
@media (max-width: 700px) { .griglia { display: block; overflow-x: auto; } }
.token { font-size: 1rem; background: #fff7d6; padding: .3rem .5rem; display: inline-block; user-select: all; }

/* Fase 5: galleria, cornice della vista dashboard, guida. Aspetto provvisorio (DOCUMENTO-UI.md). */
[hidden] { display: none !important; }
main.largo { max-width: 1600px; }
.intestazione-pagina { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .5rem 1rem; }
.meta { display: flex; flex-wrap: wrap; gap: .4rem .8rem; color: var(--tenue); margin: .2rem 0; font-size: .9rem; }
.etichetta { display: inline-block; padding: 0 .45rem; border-radius: 999px; background: #eef2f5; color: var(--testo); font-size: .8rem; margin-right: .25rem; }
.modo-daytime { background: #e7f0fa; }
.modo-statica { background: #f1efe8; }
.filtri { display: flex; flex-wrap: wrap; gap: .4rem; margin: 1rem 0 .5rem; }
.filtro { padding: .25rem .7rem; border: 1px solid var(--bordo); border-radius: 999px; background: var(--carta); text-decoration: none; }
.filtro.attivo { background: var(--accento); color: #fff; border-color: var(--accento); }
.ricerca { margin: .5rem 0 1rem; }
.galleria { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem; }
.scheda { background: var(--carta); border: 1px solid var(--bordo); border-radius: 8px; padding: 1rem; }
.titolo-scheda { font-weight: 600; font-size: 1.05rem; text-decoration: none; }
.piccolo { font-size: .85rem; padding: .2rem .5rem; }
.cornice-griglia { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 1rem; align-items: start; }
.vista { width: 100%; height: 75vh; min-height: 480px; border: 1px solid var(--bordo); border-radius: 6px; background: #fff; }
.selettori { margin-bottom: .5rem; }
.laterale .riquadro { margin-top: 0; }
.laterale h2 { font-size: 1rem; margin: .2rem 0 .5rem; }
.azioni { display: flex; flex-wrap: wrap; gap: .4rem; }
.elenco-semplice { padding-left: 1.1rem; margin: .2rem 0 .8rem; }
.versioni li { margin-bottom: .35rem; }
.versioni li.corrente > a { font-weight: 700; }
textarea { font: inherit; width: 100%; padding: .4rem; border: 1px solid var(--bordo); border-radius: 4px; }
.appunti { white-space: pre-wrap; font: inherit; margin: 0; }
.guida { width: 100%; height: 80vh; border: 1px solid var(--bordo); border-radius: 6px; background: #fff; }
@media (max-width: 900px) { .cornice-griglia { grid-template-columns: 1fr; } }
/* fase 7: campanella, vista esterna, scheda esterni */
.campanella { text-decoration: none; }
.campanella .conteggio { display: inline-block; min-width: 1.4em; padding: 0 .35em; border-radius: 1em; background: #b42318; color: #fff; text-align: center; font-size: .85em; }
.notifiche li.non-letta { font-weight: 600; }
.testata.esterna { justify-content: flex-start; }
.piede { margin-top: .5rem; }
.avviso.rosso, .personali { color: #b42318; }
.link-nuovo { font-family: ui-monospace, monospace; word-break: break-all; width: 100%; }
.chiuso td { color: #888; }

/* Fase 8: menu impostazioni («tre lineette») della cornice, editor dei blocchi di testo, Admin · Sistema */
.intestazione-pagina { position: relative; }
.menu-impostazioni { order: 99; margin-left: auto; position: relative; }
.menu-impostazioni > summary { list-style: none; cursor: pointer; font-size: 1.4rem; line-height: 1; padding: .2rem .5rem;
  border: 1px solid var(--bordo); border-radius: 6px; background: var(--carta); }
.menu-impostazioni > summary::-webkit-details-marker { display: none; }
.menu-impostazioni .menu-voci { position: absolute; right: 0; top: 2.4rem; z-index: 10; width: min(26rem, 90vw);
  background: var(--carta); border: 1px solid var(--bordo); border-radius: 6px; padding: .8rem; box-shadow: 0 4px 16px rgba(0,0,0,.12); }
.menu-impostazioni .voce { border-bottom: 1px solid var(--bordo); padding-bottom: .5rem; margin-bottom: .5rem; }
.menu-impostazioni h3 { font-size: 1rem; margin: .2rem 0; }
.editor-testo textarea { width: 100%; }
.semaforo { display: inline-block; padding: 0 .5rem; border-radius: 4px; font-weight: 600; }
.semaforo.verde { background: #dff3e4; color: #145c2c; }
.semaforo.ambra { background: #fff1d6; color: #7a4b00; }
.semaforo.rosso { background: #fde2e1; color: #8a1c17; }
.griglia-sistema { display: grid; grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr)); gap: 1rem; }
.griglia-sistema .riquadro { margin: 0; }
pre.righe-log { white-space: pre-wrap; font-size: .85rem; max-height: 12rem; overflow: auto; }