:root {
  --fondo: #faf8f4; --carta: #ffffff; --testo: #24221f; --tenue: #6b665e; --linea: #e3ded5;
  --accento: #7c2d2d; --accento-chiaro: #f3e7e5; --errore: #a8281e;
  --T: #1558d6; --M: #b8860b; --f: #027a48;
}
@media (prefers-color-scheme: dark) {
  :root {
    --fondo: #181715; --carta: #211f1c; --testo: #ece8e1; --tenue: #a39d93; --linea: #3a3631;
    --accento: #e09a8f; --accento-chiaro: #3a2724; --errore: #ff8a7a;
    --T: #7aa7ff; --M: #e2b84d; --f: #4cc38a;
  }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--fondo); color: var(--testo); font: 16px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif; }
header, main, footer { max-width: 60rem; margin: 0 auto; padding: 0 16px; }
header { padding-top: 1.5rem; }
header a { color: var(--tenue); text-decoration: none; font-size: .9rem; }
h1 { font-size: 1.6rem; margin: .3rem 0 .2rem; }
h2 { font-size: 1.1rem; margin: 1.6rem 0 .5rem; }
p.sotto { color: var(--tenue); margin: 0 0 1rem; }
.scheda { background: var(--carta); border: 1px solid var(--linea); border-radius: 10px; padding: 1rem; margin: 1rem 0; }
.griglia { display: grid; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); gap: .8rem; }
label { display: flex; flex-direction: column; gap: .2rem; font-size: .9rem; color: var(--tenue); }
input, select { font: inherit; color: var(--testo); background: var(--fondo); border: 1px solid var(--linea); border-radius: 6px; padding: .4rem .5rem; min-width: 0; }
input:focus, select:focus { outline: 2px solid var(--accento); outline-offset: 1px; }
button { font: inherit; cursor: pointer; border-radius: 6px; padding: .45rem .9rem; border: 1px solid var(--accento); background: var(--accento); color: var(--carta); }
button.lieve { background: transparent; color: var(--accento); }
button.x { padding: .2rem .55rem; border-color: var(--linea); background: transparent; color: var(--tenue); }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: .3rem .4rem; border-bottom: 1px solid var(--linea); vertical-align: middle; }
th { font-weight: 600; font-size: .85rem; color: var(--tenue); }
td input, td select { width: 100%; }
.num { text-align: right; font-variant-numeric: tabular-nums; }
.tabella-scorre { overflow-x: auto; }
.risultati { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: .6rem; }
.risultato { border: 1px solid var(--linea); border-radius: 8px; padding: .5rem .7rem; background: var(--fondo); }
.risultato .nome { color: var(--tenue); font-size: .85rem; }
.risultato .valore { font-size: 1.25rem; font-variant-numeric: tabular-nums; }
.risultato .dove { color: var(--tenue); font-size: .8rem; }
.errore { color: var(--errore); background: var(--accento-chiaro); border-radius: 6px; padding: .5rem .7rem; }
.azioni { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .8rem; }
svg { width: 100%; height: auto; display: block; }
svg text { fill: var(--tenue); font: 11px system-ui, sans-serif; }
.avviso { font-size: .85rem; color: var(--tenue); border-left: 3px solid var(--accento); padding-left: .7rem; }
.elenco a { display: block; padding: .8rem 1rem; border: 1px solid var(--linea); border-radius: 10px; background: var(--carta); color: var(--testo); text-decoration: none; margin: .6rem 0; }
.elenco a:hover { border-color: var(--accento); }
.elenco b { color: var(--accento); }
footer { color: var(--tenue); font-size: .8rem; padding-bottom: 2rem; }

/* il catalogo (2026-10-12: ricerca, aree e schede come il catalogo interno) */
.catalogo { max-width: 72rem; }
.filtri { position: sticky; top: 0; z-index: 5; display: flex; flex-wrap: wrap; gap: .5rem .7rem; align-items: center; padding: .6rem 0; background: var(--fondo); border-bottom: 1px solid var(--linea); margin-bottom: .4rem; }
.filtri input[type=search] { flex: 1 1 18rem; min-width: 0; max-width: 30rem; padding: .5rem .75rem; border-radius: 999px; background: var(--carta); }
.aree { display: flex; flex-wrap: wrap; gap: .35rem; }
.chip { font-size: .85rem; padding: .3rem .8rem; border-radius: 999px; border: 1px solid var(--linea); background: var(--carta); color: var(--tenue); }
.chip:hover { border-color: var(--accento); color: var(--accento); }
.chip.scelto { background: var(--accento); border-color: var(--accento); color: var(--carta); }
.conta { margin-left: auto; color: var(--tenue); font-size: .85rem; }
.area h2 { color: var(--tenue); text-transform: uppercase; letter-spacing: .04em; font-size: 1rem; font-weight: 600; }
.area h2 .quanti { font-size: .75rem; border: 1px solid var(--linea); border-radius: 999px; padding: 0 .45rem; margin-left: .3rem; letter-spacing: 0; }
.schede { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: .9rem; margin: .8rem 0; }
.catalogo .scheda { display: flex; flex-direction: column; justify-content: space-between; gap: .6rem; margin: 0; background: var(--carta); border: 1px solid var(--linea); border-radius: 12px; padding: 1rem 1.05rem .85rem; color: inherit; text-decoration: none; transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease; }
.catalogo a.scheda:hover, .catalogo a.scheda:focus-visible { border-color: var(--accento); box-shadow: 0 6px 18px rgba(0,0,0,.12); transform: translateY(-2px); outline: none; }
.scheda .testa { display: flex; gap: .8rem; align-items: flex-start; }
.scheda .sigla { flex: 0 0 auto; width: 2.6rem; height: 2.6rem; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: .95rem; color: #fff; }
.sigla.c0 { background: #7c2d2d; } .sigla.c1 { background: #2f5e8a; } .sigla.c2 { background: #a3521b; } .sigla.c3 { background: #2f6e4f; } .sigla.c4 { background: #6a4c93; } .sigla.c5 { background: #5a6a85; }
.scheda .titolo { font-weight: 650; font-size: 1.05rem; line-height: 1.25; }
.catalogo a.scheda:hover .titolo { color: var(--accento); }
.scheda .descr { margin: .2rem 0 0; font-size: .9rem; color: var(--tenue); }
.scheda .piede { font-size: .8rem; }
.scheda .stato { color: var(--tenue); } .scheda .stato.si { color: #1f6b45; } .scheda .stato.no { color: var(--accento); }
@media (prefers-color-scheme: dark) { .scheda .stato.si { color: #6fc39a; } }
.scheda.riservato { opacity: .6; cursor: not-allowed; } .scheda.riservato .sigla { filter: grayscale(1); }
.scheda[hidden], section.area[hidden] { display: none; }
.nessuno { color: var(--tenue); font-style: italic; padding: 2rem 0; text-align: center; }
.chi { color: var(--tenue); font-size: .85rem; }
.testata { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
header a.accedi, .accedi { margin-left: auto; font-size: .9rem; padding: .35rem .95rem; border-radius: 999px; border: 1px solid var(--accento); color: var(--accento); text-decoration: none; }
header a.accedi.primario, .accedi.primario { background: var(--accento); color: var(--carta); }
.accedi:hover { filter: brightness(1.1); }

/* pagina di cortesia della vetrina: strumento non disponibile o riservato (server.mjs, cortesia) */
body.cortesia { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px 16px; }
body.cortesia main { max-width: 34rem; width: 100%; padding: 0; }
.cortesia .riquadro { background: var(--carta); border: 1px solid var(--linea); border-radius: 14px; padding: 1.8rem 1.6rem; box-shadow: 0 10px 30px rgba(0,0,0,.08); }
.cortesia .marchio { color: var(--accento); font-weight: 700; font-size: .85rem; letter-spacing: .04em; text-transform: uppercase; }
.cortesia h1 { font-size: 1.45rem; margin: .5rem 0 .6rem; }
.cortesia p { color: var(--tenue); margin: 0 0 1.2rem; }
.cortesia .azioni { display: flex; gap: .6rem; flex-wrap: wrap; margin: 0; }
.cortesia .bottone { display: inline-block; padding: .55rem 1.1rem; border-radius: 999px; background: var(--accento); color: var(--carta); text-decoration: none; font-weight: 600; }
.cortesia .bottone.secondario { background: transparent; color: var(--accento); border: 1px solid var(--accento); }