/* Siciltermica Impianti: stile mobile-first, colori della carta intestata (arancio F29408, grigio 444142) */
:root {
  --arancio: #f29408; --arancio-scuro: #d47f00; --grigio: #444142; --grigio-chiaro: #6b6869; --fondo: #f4f3f1; --bianco: #fff;
  --bordo: #dcdad6; --testo: #222; --muto: #6b6869; --ok: #2e7d32; --errore: #c62828; --avviso: #b26a00; --raggio: 10px;
  --ombra: 0 1px 2px rgba(0,0,0,.06), 0 4px 14px rgba(0,0,0,.05);
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 16px; line-height: 1.45; color: var(--testo); background: var(--fondo); }
a { color: var(--arancio-scuro); text-decoration: none; }
a:hover { text-decoration: underline; }
h1 { font-size: 1.45rem; margin: 0 0 .6rem; color: var(--grigio); }
h2 { font-size: 1.1rem; margin: 0 0 .7rem; color: var(--grigio); }
h3 { font-size: .95rem; margin: 1rem 0 .35rem; color: var(--arancio-scuro); text-transform: uppercase; letter-spacing: .03em; }
code { background: #eee; padding: 0 .25em; border-radius: 3px; font-size: .9em; }
.muto { color: var(--muto); }
.testo-errore { color: var(--errore); }
.destra { float: right; margin-left: .5rem; }
small { font-size: .82rem; }

/* barra */
.barra { background: var(--grigio); color: #fff; display: flex; align-items: center; justify-content: space-between; padding: 0 1rem; min-height: 54px; position: sticky; top: 0; z-index: 20; box-shadow: 0 2px 6px rgba(0,0,0,.2); }
.marchio { color: #fff; font-weight: 700; letter-spacing: .02em; display: flex; align-items: center; gap: .5rem; }
.marchio:hover { text-decoration: none; }
.marchio-punto { width: 12px; height: 12px; border-radius: 50%; background: var(--arancio); display: inline-block; }
.menu-btn { background: none; border: 1px solid rgba(255,255,255,.4); color: #fff; font-size: 1.3rem; border-radius: 6px; padding: .1rem .55rem; cursor: pointer; }
.nav { display: none; position: absolute; top: 54px; left: 0; right: 0; background: var(--grigio); flex-direction: column; padding: .4rem 0 .6rem; box-shadow: 0 8px 16px rgba(0,0,0,.25); }
.nav.aperto { display: flex; }
.nav a, .nav button { color: #fff; padding: .7rem 1.2rem; font-size: 1rem; background: none; border: 0; text-align: left; cursor: pointer; }
.nav a.attivo { color: var(--arancio); font-weight: 600; }
.nav a:hover { text-decoration: none; background: rgba(255,255,255,.06); }
.nav-nuova { color: var(--arancio) !important; font-weight: 600; }
.nav-esci { display: contents; }
@media (min-width: 900px) {
  .menu-btn { display: none; }
  .nav { display: flex; position: static; flex-direction: row; align-items: center; background: none; box-shadow: none; padding: 0; gap: .1rem; }
  .nav a, .nav button { padding: .5rem .7rem; font-size: .95rem; border-radius: 6px; }
  .nav-utente { margin-left: .8rem; opacity: .85; }
}

/* contenuto */
.contenuto { max-width: 1100px; margin: 0 auto; padding: 1rem 1rem 2rem; }
.pie { text-align: center; color: var(--muto); font-size: .8rem; padding: 1rem; }
.intestazione { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem; margin-bottom: .9rem; }
.intestazione h1 { margin: 0; }
.scheda { background: var(--bianco); border-radius: var(--raggio); box-shadow: var(--ombra); padding: 1rem; margin-bottom: 1rem; }
.scheda.stretta { max-width: 640px; }
.due-colonne { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 860px) { .due-colonne { grid-template-columns: 1fr 1fr; align-items: start; } }
.avviso { padding: .7rem .9rem; border-radius: 8px; margin-bottom: .9rem; border-left: 4px solid; }
.avviso-ok { background: #e8f5e9; border-color: var(--ok); }
.avviso-errore { background: #ffebee; border-color: var(--errore); }
.avviso-avviso { background: #fff5e6; border-color: var(--arancio); }
.avviso.piccolo { font-size: .85rem; padding: .45rem .7rem; margin: .4rem 0 0; }

/* bottoni */
.btn { display: inline-block; padding: .55rem 1rem; border-radius: 8px; border: 1px solid var(--bordo); background: #fff; color: var(--grigio); font-size: .95rem; font-weight: 600; cursor: pointer; line-height: 1.2; text-align: center; }
.btn:hover { text-decoration: none; border-color: var(--grigio-chiaro); }
.btn-primario { background: var(--arancio); border-color: var(--arancio); color: #fff; }
.btn-primario:hover { background: var(--arancio-scuro); border-color: var(--arancio-scuro); }
.btn-secondario { background: var(--grigio); border-color: var(--grigio); color: #fff; }
.btn-pericolo { color: var(--errore); border-color: #f3c4c4; }
.btn-testo { border-color: transparent; background: none; }
.btn-piccolo { padding: .3rem .65rem; font-size: .85rem; }
.btn-largo { width: 100%; padding: .8rem; font-size: 1.05rem; }
.btn[disabled] { opacity: .55; cursor: wait; }
.azioni { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.inline { display: inline; }

/* moduli */
label { display: block; font-size: .9rem; font-weight: 600; color: var(--grigio); margin-bottom: .25rem; }
.etichetta-campo { display: block; font-size: .9rem; font-weight: 600; color: var(--grigio); margin-bottom: .25rem; }
input[type=text], input[type=search], input[type=password], input[type=date], input[type=time], input[type=email], select, textarea {
  width: 100%; padding: .6rem .7rem; font-size: 1rem; border: 1px solid var(--bordo); border-radius: 8px; background: #fff; color: var(--testo); font-family: inherit; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--arancio); outline-offset: 1px; border-color: var(--arancio); }
textarea { resize: vertical; }
.obbl { color: var(--errore); }
.campi { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem .9rem; }
@media (min-width: 700px) { .campi { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.campo { grid-column: span 2; min-width: 0; }
.campo-stretto { grid-column: span 1; }
.campo-largo { grid-column: 1 / -1; }
.campo small { display: block; margin-top: .25rem; }
.campo-errore input, .campo-errore select, .campo-errore textarea { border-color: var(--errore); }
.campo[hidden] { display: none; }
.scelte { display: flex; flex-wrap: wrap; gap: .4rem; }
.scelta { display: inline-flex; align-items: center; gap: .45rem; font-weight: 500; font-size: .95rem; padding: .5rem .75rem; border: 1px solid var(--bordo); border-radius: 999px; cursor: pointer; background: #fff; margin: 0; }
.scelta input { margin: 0; width: 1.05rem; height: 1.05rem; accent-color: var(--arancio); }
.scelta:has(input:checked) { border-color: var(--arancio); background: #fff5e6; }
.filtri { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: .9rem; align-items: center; }
.filtri input[type=search] { flex: 1 1 220px; }
.filtri select { width: auto; }
.filtri label { display: flex; align-items: center; gap: .4rem; margin: 0; }
.campi-form .campo label { margin-bottom: .2rem; }

/* scheda di rilievo: passi */
.passi { display: flex; gap: .35rem; margin-bottom: 1rem; overflow-x: auto; padding-bottom: .2rem; }
.passo { flex: 1 0 auto; min-width: 2.4rem; height: 2.4rem; border-radius: 999px; border: 2px solid var(--bordo); background: #fff; color: var(--grigio); font-weight: 700; cursor: pointer; }
.passo.attivo { background: var(--arancio); border-color: var(--arancio); color: #fff; }
.passo.fatto { border-color: var(--arancio); }
.passo-errore { border-color: var(--errore) !important; color: var(--errore); }
.passo[hidden] { display: none; }
.sezione { background: #fff; border-radius: var(--raggio); box-shadow: var(--ombra); padding: 1rem; margin-bottom: 1rem; }
.js .sezione:not(.attiva) { display: none; }
.sezione[hidden] { display: none !important; }
.passi-azioni { display: flex; justify-content: space-between; gap: .5rem; margin-top: 1.1rem; }
.no-js .passi, .no-js .passi-azioni { display: none; }
.azioni-finali { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; position: sticky; bottom: 0; background: linear-gradient(transparent, var(--fondo) 30%); padding: .8rem 0 .4rem; }
.azioni-finali .btn { flex: 1 1 auto; padding: .75rem 1rem; }
.foto-blocco { margin-top: 1rem; padding-top: .8rem; border-top: 1px dashed var(--bordo); }
.foto-griglia { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: .5rem; margin: .5rem 0; }
.foto-item { position: relative; margin: 0; }
.foto-item img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 8px; border: 1px solid var(--bordo); display: block; }
.foto-elimina { position: absolute; top: 4px; right: 4px; width: 26px; height: 26px; border-radius: 50%; border: 0; background: rgba(0,0,0,.6); color: #fff; font-size: 1.1rem; line-height: 1; cursor: pointer; }
.foto-carica { display: inline-block; margin: .3rem 0; }

/* elenchi e tabelle */
.lista-schede { display: flex; flex-direction: column; gap: .5rem; }
.voce { display: block; background: #fff; border-radius: var(--raggio); box-shadow: var(--ombra); padding: .8rem 1rem; color: inherit; }
.voce:hover { text-decoration: none; outline: 2px solid #f7d9a8; }
.voce-testa { display: flex; justify-content: space-between; gap: .5rem; align-items: baseline; }
.voce-riga { font-size: .88rem; margin-top: .2rem; }
.etichetta { display: inline-block; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: .15rem .5rem; border-radius: 999px; background: #eee; color: var(--grigio); vertical-align: middle; }
.etichetta-bozza { background: #eceff1; }
.etichetta-inviato { background: #fff5e6; color: var(--avviso); }
.etichetta-controllato { background: #e8f5e9; color: var(--ok); }
.etichetta-annullato { background: #fbe9e7; color: var(--errore); }
.etichetta-avviso { background: #fff5e6; color: var(--avviso); }
.etichetta-doc-bozza { background: #fff5e6; color: var(--avviso); }
.etichetta-doc-definitivo { background: #e8f5e9; color: var(--ok); }
.etichetta-doc-annullato { background: #eee; color: var(--muto); text-decoration: line-through; }
.tabella-scroll { overflow-x: auto; }
.tabella { width: 100%; border-collapse: collapse; font-size: .92rem; }
.tabella th, .tabella td { text-align: left; padding: .5rem .55rem; border-bottom: 1px solid var(--bordo); vertical-align: top; }
.tabella th { font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muto); }
.riga-spenta { opacity: .55; }
.riga-errore td { color: var(--errore); }
.elenco { list-style: none; margin: 0; padding: 0; }
.elenco li { padding: .45rem 0; border-bottom: 1px solid var(--bordo); }
.elenco li:last-child { border-bottom: 0; }
.elenco-doc { list-style: none; margin: 0 0 .8rem; padding: 0; }
.doc { display: flex; justify-content: space-between; gap: .6rem; flex-wrap: wrap; padding: .6rem 0; border-bottom: 1px solid var(--bordo); }
.doc-annullato { opacity: .5; }
.genera { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-top: .4rem; }
.dati { display: grid; grid-template-columns: max-content 1fr; gap: .3rem .9rem; margin: 0; }
.dati dt { color: var(--muto); font-size: .85rem; }
.dati dd { margin: 0; }
.dati-compatti { font-size: .92rem; }
.azioni-stato { margin-top: .8rem; }
.griglia-numeri { display: grid; grid-template-columns: repeat(2, 1fr); gap: .7rem; margin-bottom: 1rem; }
@media (min-width: 700px) { .griglia-numeri { grid-template-columns: repeat(4, 1fr); } }
.numero { background: #fff; border-radius: var(--raggio); box-shadow: var(--ombra); padding: .9rem 1rem; color: inherit; display: flex; flex-direction: column; }
.numero strong { font-size: 1.8rem; color: var(--arancio-scuro); line-height: 1.1; }
.numero span { font-size: .85rem; color: var(--muto); }
.numero:hover { text-decoration: none; outline: 2px solid #f7d9a8; }
.timeline { list-style: none; margin: 0; padding: 0 0 0 1rem; border-left: 3px solid var(--arancio); }
.timeline > li { position: relative; padding: 0 0 1rem .6rem; }
.timeline > li::before { content: ""; position: absolute; left: -1.55rem; top: .35rem; width: 11px; height: 11px; border-radius: 50%; background: var(--arancio); border: 2px solid #fff; }
.timeline .sotto { list-style: none; margin: .3rem 0 0; padding: 0; font-size: .92rem; }
.timeline .sotto li { padding: .15rem 0; }

/* accesso */
.accesso { display: flex; justify-content: center; padding: 2rem 0; }
.accesso-box { width: 100%; max-width: 400px; }
.accesso-box label { margin-top: .8rem; }
.accesso-box input { margin-top: .25rem; }
.accesso-box .btn { margin-top: 1.2rem; }

@media print { .barra, .pie, .azioni, .azioni-finali, .filtri { display: none !important; } .contenuto { padding: 0; } .scheda { box-shadow: none; } }
.campo-tecnico { max-width: 420px; margin-bottom: .8rem; }