/* teca.css - ACSE Teca. Grigi chiari, un solo colore forte (l'ambra ACSE),
   niente ombre: deve sembrare uno strumento, non un sito. */

* { box-sizing: border-box; }

html, body {
  margin: 0; height: 100%;
  font: 14px/1.45 -apple-system, "Segoe UI", Roboto, system-ui, sans-serif;
  color: #1b1b1b; background: #f2f3f4;
}

/* --- barra ------------------------------------------------------------- */

.barra {
  display: flex; align-items: center; gap: 18px;
  padding: 0 18px; height: 52px;
  background: #16181a; color: #fff;
}
.marchio { font-size: 17px; font-weight: 700; letter-spacing: .3px; }
.marchio span { color: #e8a317; font-weight: 500; }
.sottotitolo { color: #9aa0a6; font-size: 12.5px; }
.cat { margin-left: auto; color: #9aa0a6; font-size: 12.5px; }
.azioni-barra { display: flex; gap: 8px; }

/* --- struttura --------------------------------------------------------- */

.corpo {
  display: grid; grid-template-columns: 1fr 372px;
  height: calc(100% - 52px - 34px);
}
/* sotto i 1100 px il pannello va sotto: a fianco resterebbero 500 px di
   disegno, e la vista 3D si schiaccerebbe a una striscia */
@media (max-width: 1100px) {
  .corpo { grid-template-columns: 1fr; height: auto; }
  .tela { height: auto; }
  .pannello { border-left: 0; border-top: 1px solid #dfe1e3; }
}

.tela { display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow: hidden; background: #f2f3f4; }

.strumenti {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  padding: 8px 12px; background: #fff; border-bottom: 1px solid #dfe1e3;
}
.s {
  border: 1px solid #cfd2d5; background: #fff; color: #26292c;
  padding: 5px 11px; border-radius: 4px; cursor: pointer; font-size: 13px;
}
.s:hover { background: #f4f5f6; }
.s.attivo { background: #16181a; color: #fff; border-color: #16181a; }
.s.on { background: #eef4ff; border-color: #9db7e0; color: #1c3d70; }
.sep { width: 1px; height: 20px; background: #dfe1e3; margin: 0 4px; }
.griglia { font-size: 12.5px; color: #52575c; display: flex; align-items: center; gap: 5px; }
.griglia select { border: 1px solid #cfd2d5; border-radius: 4px; padding: 4px; }
.suggerimento { font-size: 12.5px; color: #7a7f85; margin-left: auto; }

.viste { flex: 1; display: flex; flex-direction: column; gap: 10px; padding: 10px; min-height: 0; }
.vista { position: relative; background: #fff; border: 1px solid #dfe1e3; border-radius: 5px; flex: 1; min-height: 0; }
.vista.tre-d { flex: 1 1 60%; min-height: 300px; background: #16181a; border-color: #2a2e33; }
.viste-basso { flex: 0 0 230px; display: flex; gap: 10px; min-height: 200px; }
/* separatore trascinabile: la pianta si allarga quando si disegna */
.maniglia {
  flex: 0 0 10px; margin: -4px 0; cursor: row-resize;
  display: flex; align-items: center; justify-content: center;
}
.maniglia span { display: block; width: 54px; height: 4px; border-radius: 2px; background: #d2d5d8; }
.maniglia:hover span, .maniglia.presa span { background: #e8a317; }
.viste-basso .vista { flex: 1 1 auto; }
.vista.alzato { flex: 0 0 240px; }
.et {
  position: absolute; top: 8px; left: 10px; z-index: 2;
  font-size: 11px; letter-spacing: .6px; text-transform: uppercase; color: #9aa0a6;
}
.tre-d .et { color: #767d85; }
.et span { text-transform: none; letter-spacing: 0; color: #6d747c; margin-left: 6px; }
canvas { display: block; width: 100%; height: 100%; border-radius: 5px; }
#c-pianta { cursor: crosshair; }
#c-3d { cursor: grab; }
#c-3d:active { cursor: grabbing; }

/* --- pannello ---------------------------------------------------------- */

.pannello { background: #fff; border-left: 1px solid #dfe1e3; overflow-y: auto; padding: 4px 0 20px; }
.scheda { padding: 14px 16px; border-bottom: 1px solid #eceef0; }
.scheda h2 { font-size: 13px; text-transform: uppercase; letter-spacing: .6px; color: #52575c; margin: 0 0 10px; }
.conta { background: #eceef0; color: #52575c; border-radius: 9px; padding: 1px 7px; font-size: 11px; margin-left: 4px; }

.riga { display: flex; align-items: center; gap: 8px; margin-bottom: 7px; }
.riga label { flex: 1; color: #3c4045; font-size: 13px; }
.riga input[type=number], .riga input[type=text], .riga select {
  width: 92px; padding: 4px 6px; border: 1px solid #cfd2d5; border-radius: 4px; font: inherit;
}
/* le tendine hanno testi lunghi («alta fedelta' 3500 K»): con 92 px si
   leggono a meta' */
.riga select { width: auto; max-width: 180px; min-width: 92px; }
.riga .u { width: 54px; color: #8b9096; font-size: 12px; }

/* l'intestazione della relazione sta su due righe: il nome di un'azienda non
   ci sta in 92 px */
#sch-intestazione .riga { display: block; margin-bottom: 9px; }
#sch-intestazione .riga label { display: block; margin-bottom: 3px; font-size: 12px; color: #52575c; }
#sch-intestazione .riga input[type=text] { width: 100%; padding: 6px 8px; }

.lista { display: flex; flex-direction: column; gap: 6px; }
.el {
  display: flex; align-items: center; gap: 8px; padding: 7px 9px;
  border: 1px solid #e3e5e7; border-radius: 4px; cursor: pointer; background: #fbfbfc;
}
.el:hover { border-color: #c3c7ca; }
.el.sel { border-color: #e8a317; background: #fff8ea; }
.el .n { flex: 1; font-size: 13px; }
.el .d { color: #8b9096; font-size: 11.5px; }
.el .via {
  border: 0; background: none; color: #b0b5ba; cursor: pointer;
  font-size: 16px; line-height: 1; padding: 0 2px;
}
.el .via:hover { color: #c0392b; }
.vuoto { color: #8b9096; font-size: 12.5px; padding: 6px 0; }
.nota { color: #8b9096; font-size: 11.5px; margin: 10px 0 0; }

.b {
  border: 1px solid #cfd2d5; background: #fff; color: #26292c;
  padding: 6px 13px; border-radius: 4px; cursor: pointer; font: inherit; font-size: 13px;
}
.barra .b { background: #26292c; color: #e6e8ea; border-color: #3a3e42; }
.b:hover { background: #f4f5f6; }
.barra .b:hover { background: #34383c; }
.b:disabled { opacity: .45; cursor: default; }
a.b { text-decoration: none; display: inline-flex; align-items: center; }
.barra .b.torna { border-color: #e8a317; color: #e8a317; }
.barra .b.torna:hover { background: #e8a317; color: #16181a; }
.b.primario { background: #e8a317; border-color: #e8a317; color: #16181a; font-weight: 600; }
.b.grande { width: 100%; padding: 10px; font-size: 14px; font-weight: 600; background: #16181a; color: #fff; border-color: #16181a; margin-bottom: 8px; }
.b.grande:hover { background: #26292c; }
.calcolo .b:not(.grande) { width: 100%; }
.msg { margin-top: 9px; font-size: 12.5px; color: #8b9096; min-height: 17px; }
.msg.err { color: #b3261e; }

/* --- risultati --------------------------------------------------------- */

.ris { border: 1px solid #e3e5e7; border-radius: 5px; padding: 10px 11px; margin-bottom: 9px; }
.ris h3 { margin: 0 0 2px; font-size: 14px; }
.ris .cat { color: #8b9096; font-size: 11.5px; margin: 0 0 8px; }
.ris table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.ris td { padding: 2px 0; }
.ris td:last-child { text-align: right; font-variant-numeric: tabular-nums; }
.barra-budget { height: 8px; background: #eceef0; border-radius: 4px; overflow: hidden; margin: 9px 0 5px; }
.barra-budget i { display: block; height: 100%; }
.verde i { background: #2e9e4f; } .giallo i { background: #e8a317; } .rosso i { background: #d0392b; }
.esito { font-size: 12px; font-weight: 600; }
.verde .esito { color: #2e9e4f; } .giallo .esito { color: #b6790a; } .rosso .esito { color: #d0392b; }

/* --- modale ------------------------------------------------------------ */

.modale { position: fixed; inset: 0; background: rgba(20,22,24,.45); display: flex; align-items: center; justify-content: center; z-index: 10; }
.modale[hidden] { display: none; }
[hidden] { display: none !important; }
.finestra { background: #fff; border-radius: 7px; padding: 18px 20px; width: 380px; max-height: 88vh; overflow-y: auto; }
.finestra h3 { margin: 0 0 14px; font-size: 15px; }
.m-azioni { display: flex; gap: 8px; justify-content: flex-end; margin-top: 16px; }
.m-azioni .b:first-child { margin-right: auto; color: #b3261e; }

.pie { height: 34px; display: flex; align-items: center; gap: 6px; padding: 0 18px; font-size: 12px; color: #8b9096; background: #fff; border-top: 1px solid #dfe1e3; }
.pie a { color: #8b9096; }

/* --- testo della pagina (serve a Google, non al disegno) --------------- */

.spiega { max-width: 780px; margin: 0 auto; padding: 26px 18px 8px; color: #4b5156; font-size: 13px; line-height: 1.55; }
.spiega h1 { font-size: 17px; color: #22262a; margin: 0 0 8px; }
.spiega h2 { font-size: 14px; color: #22262a; margin: 16px 0 6px; }
.spiega ul { margin: 0; padding-left: 18px; }
.spiega a { color: #b6790a; }