/* GTgold - stile base. Colori come variabili, tema chiaro e scuro automatico. */
:root {
  --sfondo: #f6f5f2; --pannello: #ffffff; --testo: #1f1d1a; --tenue: #6b665e; --bordo: #e4e0d8;
  --oro: #a8842c; --oro-chiaro: #f3ead2; --ok: #2f7d4f; --ok-chiaro: #e3f2e8; --attenzione: #a5521d;
  --attenzione-chiaro: #fbeadf; --errore: #b3261e; --link: #7a5d14;
  --raggio: 10px; --ombra: 0 1px 2px rgba(0,0,0,.05), 0 2px 8px rgba(0,0,0,.04);
}
@media (prefers-color-scheme: dark) {
  :root {
    --sfondo: #151412; --pannello: #1e1c19; --testo: #eeeae3; --tenue: #a49d91; --bordo: #34312c;
    --oro: #d4b05a; --oro-chiaro: #3a3122; --ok: #6fc38f; --ok-chiaro: #1f3327; --attenzione: #e59a66;
    --attenzione-chiaro: #3b2a1e; --errore: #f08a82; --link: #e2c477;
  }
}
* { box-sizing: border-box; }
html { font-size: 15px; }
body { margin: 0; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; background: var(--sfondo);
       color: var(--testo); line-height: 1.45; }
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }
h1 { font-size: 1.45rem; margin: 0 0 .2rem; font-weight: 650; }
h2 { font-size: 1.1rem; margin: 1.4rem 0 .6rem; font-weight: 650; }
h3 { font-size: .95rem; margin: 1rem 0 .4rem; color: var(--tenue); text-transform: uppercase; letter-spacing: .04em; }
.sottotitolo { color: var(--tenue); margin: 0 0 1rem; }

/* barra superiore */
.barra { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
         padding: .55rem 1.2rem; background: var(--pannello); border-bottom: 1px solid var(--bordo); }
.logo { font-weight: 750; font-size: 1.15rem; color: var(--testo); letter-spacing: .02em; }
.logo span { color: var(--oro); }
.badge-amb { font-size: .7rem; background: var(--attenzione-chiaro); color: var(--attenzione); padding: .1rem .45rem;
             border-radius: 99px; font-weight: 600; text-transform: uppercase; }
nav.menu { display: flex; gap: .2rem; flex-wrap: wrap; }
nav.menu a { padding: .35rem .65rem; border-radius: 8px; color: var(--testo); font-weight: 500; }
nav.menu a:hover, nav.menu a.attivo { background: var(--oro-chiaro); text-decoration: none; }
.cerca-globale { flex: 1; min-width: 180px; max-width: 420px; margin-left: auto; }
.utente { color: var(--tenue); font-size: .9rem; white-space: nowrap; }
.utente form { display: inline; }
.utente button { background: none; border: 0; color: var(--link); cursor: pointer; font: inherit; padding: 0; }

main { max-width: 1280px; margin: 0 auto; padding: 1.3rem 1.2rem 3rem; }
.griglia { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.due-colonne { display: grid; gap: 1.2rem; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
@media (max-width: 900px) { .due-colonne { grid-template-columns: 1fr; } }
.pannello { background: var(--pannello); border: 1px solid var(--bordo); border-radius: var(--raggio);
            padding: 1rem 1.1rem; box-shadow: var(--ombra); }
.pannello > h2:first-child, .pannello > h3:first-child { margin-top: 0; }
.numero { font-size: 1.8rem; font-weight: 700; }
.etichetta { color: var(--tenue); font-size: .85rem; }

/* tabelle */
.tabella-scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: .92rem; }
th { text-align: left; font-weight: 600; color: var(--tenue); font-size: .8rem; text-transform: uppercase;
     letter-spacing: .03em; padding: .45rem .5rem; border-bottom: 1px solid var(--bordo); white-space: nowrap; }
td { padding: .5rem; border-bottom: 1px solid var(--bordo); vertical-align: top; }
tr:hover td { background: color-mix(in srgb, var(--oro-chiaro) 45%, transparent); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
dl.dati { display: grid; grid-template-columns: max-content 1fr; gap: .35rem 1rem; margin: 0; }
dl.dati dt { color: var(--tenue); }
dl.dati dd { margin: 0; }

/* moduli */
input, select, textarea { font: inherit; color: var(--testo); background: var(--pannello); border: 1px solid var(--bordo);
                          border-radius: 8px; padding: .45rem .6rem; width: 100%; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--oro); outline-offset: -1px; border-color: transparent; }
label { display: block; font-size: .85rem; color: var(--tenue); margin-bottom: .2rem; }
.campi { display: grid; gap: .8rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.campo.largo { grid-column: 1 / -1; }
.filtri { display: flex; gap: .6rem; flex-wrap: wrap; align-items: end; margin-bottom: 1rem; }
.filtri > div { min-width: 140px; }
.errorlist { color: var(--errore); margin: .2rem 0 0; padding: 0; list-style: none; font-size: .85rem; }
.bottone, button.bottone { display: inline-block; background: var(--oro); color: #fff; border: 0; border-radius: 8px;
                           padding: .5rem .95rem; font: inherit; font-weight: 600; cursor: pointer; }
.bottone:hover { filter: brightness(1.07); text-decoration: none; }
.bottone.secondario { background: transparent; color: var(--link); border: 1px solid var(--bordo); }
.azioni { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }

/* etichette di stato */
.tag { display: inline-block; font-size: .78rem; padding: .08rem .5rem; border-radius: 99px; background: var(--bordo);
       color: var(--testo); white-space: nowrap; }
.tag.disponibile { background: var(--ok-chiaro); color: var(--ok); }
.tag.venduto, .tag.chiuso { background: var(--bordo); color: var(--tenue); }
.tag.avviso { background: var(--attenzione-chiaro); color: var(--attenzione); }
.tag.oro { background: var(--oro-chiaro); color: var(--link); }
.messaggi { list-style: none; padding: 0; margin: 0 0 1rem; }
.messaggi li { padding: .6rem .8rem; border-radius: 8px; background: var(--ok-chiaro); color: var(--ok); margin-bottom: .4rem; }
.messaggi li.error { background: var(--attenzione-chiaro); color: var(--errore); }
.vuoto { color: var(--tenue); padding: 1rem 0; }
.storico { list-style: none; padding: 0; margin: 0; }
.storico li { padding: .7rem 0; border-bottom: 1px solid var(--bordo); }
.storico .testo { white-space: pre-wrap; margin-top: .3rem; }
.foto-segnaposto { aspect-ratio: 1; background: var(--oro-chiaro); border-radius: var(--raggio); display: grid;
                   place-items: center; color: var(--tenue); font-size: .85rem; text-align: center; padding: 1rem; }

/* accesso */
.accesso { max-width: 360px; margin: 12vh auto; }
.accesso .logo { font-size: 1.8rem; display: block; text-align: center; margin-bottom: 1.2rem; }