/* ============================================================
   scheda.css — la scheda immobile sul sistema nuovo (06/10/2026).

   Terza pagina dopo /agenzie/ e la pagina di sistema. Solo i token di
   tokens.css, nessun colore scritto a mano. Tutte le sezioni sono qui
   dall'08/10/2026, nell'ordine A, C, B, D, H (cosa compri), G (comprarlo),
   E (se lo ristrutturi), F (appendice), I (dossier). I tre componenti che
   la scheda condivide con /valuta/ e /app/ (stima lavori, mutuo,
   composizione) hanno il loro aspetto vecchio fuori da .sistema e quello
   nuovo dentro: stima lavori e mutuo stanno in componenti.css dall'11/10/2026,
   quando /valuta/ e' passata sul sistema; le altre regole valgono solo qui.
   ============================================================ */

/* ---------- A · identita': la fascia scura ---------- */
.sk-identita { padding-top: 26px; padding-bottom: 54px; }
.sk-briciole { font-size: 13.5px; color: var(--carta-testo); margin-bottom: 34px; }
.sk-briciole a { color: var(--carta-testo); text-decoration: none; }
.sk-briciole a:hover { color: var(--paper); }
.sk-conclusa { border: 1px solid var(--tag-allarme-bordo); background: var(--tag-allarme-fondo);
  color: var(--tag-allarme-testo); padding: 14px 18px; margin-bottom: 26px; font-size: 15px; line-height: 1.55; }
.sistema .sk-conclusa b { color: var(--paper); }
/* .sistema p (17,5 px) vincerebbe su .etichetta: la procedura e' un'etichetta */
.sistema .scuro p.sk-procedura { font-size: 11.5px; line-height: 1.6; color: var(--brass-2); margin-bottom: 16px; }
.sistema .sk-titolo { font-size: 56px; line-height: 1.04; letter-spacing: -.028em; margin: 0 0 12px;
  overflow-wrap: anywhere; }
.sistema .scuro .sk-sotto { font-size: 15.5px; color: var(--carta-testo); margin-bottom: 24px; }
.sk-etichette { display: flex; flex-wrap: wrap; gap: 9px; }
.sk-tag { font-family: var(--mono); font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase;
  padding: 8px 14px; border: 1px solid var(--carta-28); color: var(--carta-88); line-height: 1.35; }
.sk-tag small { font-size: inherit; color: var(--carta-testo); text-transform: none; letter-spacing: 0; }
.sk-tag.asta { background: var(--tag-asta-fondo); border-color: var(--tag-asta-bordo); color: var(--tag-asta-testo); }
.sk-tag.libero { background: var(--tag-libero-fondo); border-color: var(--tag-libero-bordo); color: var(--tag-libero-testo); }
.sk-tag.occupato, .sk-tag.allarme { background: var(--tag-allarme-fondo); border-color: var(--tag-allarme-bordo);
  color: var(--tag-allarme-testo); }

/* ---------- A · il confronto col valore di zona, gli avvisi, l'avviso ufficiale ---------- */
.sk-carta { padding-top: 0; padding-bottom: 0; }
/* senza, il margine negativo del confronto collassa con quello della sezione:
   la carta copriva la fascia invece di posarcisi sopra */
.sk-carta > .contenitore { display: flow-root; }
.sk-confronto { margin-top: -30px; position: relative; z-index: 2; }
.sistema .sk-confronto-frase { font-family: var(--serif); font-size: 34px; line-height: 1.12;
  letter-spacing: -.015em; color: var(--ink); margin: 12px 0 10px; }
.sistema .sk-confronto-cifre { font-size: 15px; color: var(--testo-2); }
.sk-avvisi { margin-top: 26px; display: grid; gap: 12px; }
.sistema .sk-avviso { font-size: 15px; line-height: 1.6; color: var(--testo); border-left: 2px solid var(--rust);
  padding: 2px 0 2px 18px; }
.sistema .sk-avviso-dentro { margin-top: 14px; }
.sk-documenti { display: flex; gap: 18px; align-items: flex-start; margin-top: 26px; text-decoration: none; }
.sistema .sk-documenti { padding: 22px 26px; }
.sk-documenti:hover { border-color: var(--testo-3); }
.sk-documenti-testo { display: grid; gap: 6px; }
.sk-documenti-testo b { font-family: var(--serif); font-size: 20px; font-weight: 500; color: var(--ink); }
.sk-documenti-testo span { font-size: 15px; line-height: 1.55; color: var(--testo-2); }
.sk-documenti-vai { color: var(--rust); font-weight: 600; }

/* l'avviso di affidabilita' prima di ogni numero (07/10/2026) */
.sistema .sk-avviso-primo { margin-bottom: 20px; }
.sistema .sk-avviso-solo { margin-top: 30px; }

/* ---------- C · i tre numeri, sotto il confronto ---------- */
.sistema .sk-numeri { margin-top: 18px; padding: 0; }
.sk-numeri-griglia { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
.sk-numero { padding: 30px 32px 28px; border-right: 1px solid var(--line-2); display: grid; align-content: start; gap: 12px; }
.sk-numero:last-child { border-right: 0; }
.sistema .sk-cifra { font-family: var(--serif); font-size: 44px; font-weight: 500; line-height: 1;
  letter-spacing: -.02em; color: var(--ink); }
.sistema #numero-costo .etichetta, .sistema #numero-costo .sk-cifra { color: var(--rust); }
/* da anonimo il valore e' coperto: nella pagina non c'e' */
.sistema .sk-coperto { height: 44px; width: 78%;
  background: repeating-linear-gradient(135deg, var(--line) 0 6px, var(--line-2) 6px 12px); }
.sistema .sk-fonte { font-size: 13.5px; line-height: 1.55; color: var(--testo-2); }
.sistema .sk-fonte span { color: var(--testo-3); }
/* il paywall dentro il riquadro: sul sistema, non sui vecchi strati */
.sistema .sk-numeri .paywall { border: 0; border-top: 1px solid var(--line-2); border-radius: 0; background: var(--paper);
  box-shadow: none; margin: 0; padding: 28px 32px 32px; text-align: left; }
.sistema .sk-numeri .paywall-lock { display: none; }
.sistema .sk-numeri .paywall-testo strong { font-family: var(--serif); font-size: 24px; font-weight: 500; color: var(--ink); margin-bottom: 8px; }
.sistema .sk-numeri .paywall-testo p { font-size: 15.5px; line-height: 1.6; color: var(--testo-2); max-width: 760px; margin: 0 0 20px; }
.sistema .sk-numeri .paywall .btn-primary { background: var(--ink); color: var(--paper); border-radius: 0; padding: 15px 26px;
  font-family: var(--sans); font-size: 15px; font-weight: 600; min-height: 48px; }
.sistema .sk-numeri .paywall .btn-primary:hover { background: var(--rust); }
.sistema .sk-numeri .paywall .btn-ghost { color: var(--ink); border: 1px solid var(--line); border-radius: 0; padding: 14px 22px;
  background: transparent; min-height: 48px; }
.sistema .sk-numeri .paywall-nota { color: var(--testo-3); font-size: 13.5px; }
.solo-lettore { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- B · dove si trova ---------- */
.sk-sezione { padding-top: 72px; padding-bottom: 0; }
.sistema .sk-sezione h2 { font-size: 40px; margin: 14px 0 14px; }
.sistema .sk-posizione { font-size: 15.5px; color: var(--testo-2); max-width: 760px; margin-bottom: 22px; }
.sistema .sk-posizione[data-precisione="comune"] { color: var(--testo); }
.sistema #mini-map { height: 380px; border: 1px solid var(--line); border-radius: 0; background: var(--line-2); margin: 0; }
.sk-liquidita { margin-top: 18px; display: grid; gap: 4px; }
.sk-liquidita b { font-family: var(--serif); font-size: 21px; font-weight: 500; color: var(--ink); }
.sk-liquidita span { font-size: 15px; line-height: 1.55; color: var(--testo-2); }

/* il controllo dei livelli: le regole mobile dei vecchi strati su label e
   input lo mettevano a capo */
.sistema .leaflet-control-layers label { display: flex; align-items: center; gap: 8px; margin: 2px 0; font-size: 13px; }
.sistema .leaflet-control-layers input { width: auto; min-height: 0; margin: 0; }

/* ---------- D · fin dove rilanciare ---------- */
.sistema .sk-intro { max-width: 720px; font-size: 16px; color: var(--testo-2); margin-bottom: 30px; }
.sistema .sk-nota { font-size: 13.5px; color: var(--testo-3); margin-top: 14px; }
.sistema #wa-box .calc-avviso { font-size: 15px; color: var(--testo); border-left: 2px solid var(--rust); padding: 2px 0 2px 18px; margin-bottom: 18px; }
.sistema .wa-chips { display: flex; gap: 9px; flex-wrap: wrap; margin-bottom: 22px; }
.sistema .wa-chip { font-family: var(--sans); font-size: 13.5px; font-weight: 600; cursor: pointer;
  padding: 10px 16px; min-height: 44px; border-radius: 0; background: transparent; color: var(--testo);
  border: 1px solid var(--line); }
.sistema .wa-chip.on { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.sk-scala { position: relative; margin: 34px 0 10px; }
.sk-barra { position: absolute; left: 0; right: 0; height: 12px; background: var(--line-2); }
.sk-tick { position: absolute; top: -7px; width: 3px; height: 26px; background: var(--ink); transform: translateX(-50%); }
.sk-tick.walkaway { top: -11px; width: 5px; height: 34px; background: var(--rust); }
.sk-tick.valore { background: var(--brass); }
.sk-etichetta { position: absolute; white-space: nowrap; text-align: center; display: grid; gap: 3px; }
/* l'etichetta si aggancia al suo trattino: centrata, o dal lato interno agli estremi */
.sk-etichetta.ancora-centro { transform: translateX(-50%); }
.sk-etichetta.ancora-sinistra { text-align: left; transform: translateX(-1px); }
.sk-etichetta.ancora-destra { text-align: right; transform: translateX(calc(-100% + 2px)); }
/* il filo fra la barra e l'etichetta: lungo quanto la riga lo allontana */
.sk-etichetta::before { content: ""; position: absolute; width: 1px; height: var(--gambo, 22px); background: var(--line); left: 50%; }
.sk-etichetta.ancora-sinistra::before { left: 0; }
.sk-etichetta.ancora-destra::before { left: auto; right: 0; }
.sk-etichetta.sopra::before { top: 100%; }
.sk-etichetta.sotto::before { bottom: 100%; }
.sk-etichetta-nome { font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--testo-3); }
.sk-etichetta-valore { font-family: var(--serif); font-size: 21px; font-weight: 500; color: var(--ink); }
.sk-etichetta.walkaway .sk-etichetta-nome, .sk-etichetta.walkaway .sk-etichetta-valore { color: var(--rust); }
.sk-etichetta.walkaway .sk-etichetta-valore { font-size: 24px; font-weight: 600; }
.sk-etichetta.walkaway::before { background: var(--rust); }
/* l'ottone segna il valore di mercato sul trattino e sul filo, non sul testo:
   sulla carta il --brass e' sotto i 3:1 */
.sk-etichetta.valore::before { background: var(--brass); }
.sk-scala-lista { display: none; list-style: none; margin: 8px 0 0; padding: 0; border-top: 1px solid var(--line); }
.sk-scala-lista li { padding: 14px 0; border-bottom: 1px solid var(--line-2); }
.sk-lista-testa { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; }
.sk-lista-nome { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--testo-2); }
.sk-lista-valore { font-family: var(--serif); font-size: 21px; font-weight: 500; color: var(--ink); white-space: nowrap; }
.sistema .sk-lista-significa { font-size: 14px; line-height: 1.5; color: var(--testo-3); margin-top: 4px; }
.sk-scala-lista li.walkaway { border-left: 4px solid var(--rust); padding-left: 14px; background: var(--paper-2); }
.sk-scala-lista li.walkaway .sk-lista-nome, .sk-scala-lista li.walkaway .sk-lista-valore { color: var(--rust); }
.sistema .sk-frasi { font-family: var(--serif); font-size: 22px; line-height: 1.35; color: var(--ink); margin-top: 26px; max-width: 760px;
  display: grid; gap: 8px; }
.sistema .sk-sintesi-titolo { font-size: 24px; margin: 46px 0 12px; }
.sk-sintesi { width: 100%; max-width: 760px; border-collapse: collapse; }
.sk-sintesi th, .sk-sintesi td { padding: 14px 0; border-bottom: 1px solid var(--line-2); vertical-align: baseline; }
.sk-sintesi th { text-align: left; font-size: 15px; font-weight: 500; color: var(--testo); padding-right: 18px; }
.sk-sintesi th small { display: block; font-size: 13px; font-weight: 400; color: var(--testo-3); margin-top: 2px; }
.sk-sintesi td { text-align: right; font-family: var(--mono); font-size: 15px; color: var(--ink); white-space: nowrap; }
.sk-sintesi td.sk-testo { font-family: var(--sans); white-space: normal; color: var(--testo-2); }

/* ---------- H · cosa compri ---------- */
.sk-fatti { margin-top: 8px; }
.sistema .sk-avviso-dopo { margin-top: 22px; }
.sk-foto { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; margin-top: 30px; }
.sk-foto a { display: block; aspect-ratio: 4 / 3; overflow: hidden; border: 1px solid var(--line); }
.sk-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sk-composizione { margin-top: 46px; }
.sistema .sk-composizione h3, .sistema .sk-blocco h3, .sistema #se-ristrutturi h3 { font-size: 24px; margin: 0 0 14px; }
.sistema .vis-comp { width: 100%; border-collapse: collapse; font-size: 15px; }
.sistema .vis-comp th { text-align: left; font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
  font-weight: 400; color: var(--testo-3); padding: 0 12px 10px 0; border-bottom: 1px solid var(--line); }
.sistema .vis-comp td { padding: 12px 12px 12px 0; border-bottom: 1px solid var(--line-2); color: var(--testo); vertical-align: top; }
.sistema .vis-comp th, .sistema .vis-comp td { text-align: left; background: transparent; }
.sistema .vis-comp th:last-child, .sistema .vis-comp td:last-child { text-align: right; padding-right: 0; white-space: nowrap; }
.sistema .vis-comp-motivo { font-size: 13.5px; line-height: 1.45; color: var(--testo-3); text-align: left; }
.sistema .vis-comp-fuori td { color: var(--testo-3); }
.sistema .vis-comp-sub { display: block; font-size: 13px; color: var(--testo-3); }
.sk-paywall { margin-top: 40px; }
.sistema .sk-paywall .paywall { border: 1px solid var(--line); border-radius: 0; background: var(--paper-2); box-shadow: none;
  margin: 0; padding: 30px 32px 32px; text-align: left; }
.sistema .sk-paywall .paywall-lock { display: none; }
.sistema .sk-paywall .paywall-testo strong { display: block; font-family: var(--serif); font-size: 24px; font-weight: 500; color: var(--ink); margin-bottom: 8px; }
.sistema .sk-paywall .paywall-testo p { font-size: 15.5px; line-height: 1.6; color: var(--testo-2); max-width: 760px; margin: 0 0 20px; }
.sistema .sk-paywall .btn-primary { display: inline-block; background: var(--ink); color: var(--paper); border-radius: 0; padding: 15px 26px;
  font-family: var(--sans); font-size: 15px; font-weight: 600; min-height: 48px; text-decoration: none; border: 0; }
.sistema .sk-paywall .btn-primary:hover { background: var(--rust); }
.sistema .sk-paywall .btn-ghost { display: inline-block; color: var(--ink); border: 1px solid var(--line); border-radius: 0; padding: 14px 22px;
  background: transparent; min-height: 48px; text-decoration: none; }
.sistema .sk-paywall .paywall-nota { color: var(--testo-3); font-size: 13.5px; }

/* ---------- G · comprarlo ---------- */
.sk-blocco { margin-top: 46px; }
.sk-blocco:first-of-type { margin-top: 30px; }
.sistema .sk-testo-blocco { font-size: 16px; color: var(--testo-2); margin-bottom: 14px; }
.sk-scelte { display: flex; gap: 9px; flex-wrap: wrap; margin-bottom: 4px; }
.sistema .ct-caso { font-family: var(--sans); font-size: 13.5px; font-weight: 600; cursor: pointer; padding: 10px 16px; min-height: 44px;
  border-radius: 0; background: transparent; color: var(--testo); border: 1px solid var(--line); }
.sistema .ct-caso.attivo { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.sistema .ct-caso:focus-visible, .sistema .wa-chip:focus-visible { outline: 2px solid var(--rust); outline-offset: 2px; }
.sk-conti { margin-top: 18px; }
.sk-sintesi tr[hidden] { display: none; }
.sk-sintesi tr.sk-totale th { font-weight: 600; color: var(--ink); }
.sk-sintesi tr.sk-totale td { font-weight: 600; }
.sk-celle { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.sk-celle > div { display: grid; gap: 10px; padding: 22px 24px 22px 0; }
.sk-celle b { font-family: var(--serif); font-size: 32px; font-weight: 500; color: var(--ink); line-height: 1; }

/* ---------- E · se lo ristrutturi ---------- */
.sk-scenari { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); background: var(--paper-2);
  border: 1px solid var(--line); margin-top: 22px; }
.sk-scenario { padding: 26px 28px 24px; border-right: 1px solid var(--line-2); display: grid; align-content: start; gap: 10px; }
.sk-scenario:last-child { border-right: 0; }
.sistema .sk-scenario .sk-cifra { font-size: 38px; }
.sistema #se-ristrutturi .sk-nota { max-width: 760px; }

/* ---------- F · l'appendice ---------- */
.sk-provenienza { margin: 8px 0 0; max-width: 820px; border-top: 1px solid var(--line); }
.sk-provenienza > div { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 18px; padding: 14px 0; border-bottom: 1px solid var(--line-2); }
.sk-provenienza > div > dd:only-child { grid-column: 1 / -1; }
.sk-provenienza dt { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--testo-3); padding-top: 3px; }
.sk-provenienza dd { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--testo); }

/* ---------- I · il dossier: la fascia scura in fondo ---------- */
.sk-dossier { margin-top: 90px; }
.sk-dossier .contenitore { display: flex; align-items: center; justify-content: space-between; gap: 48px; flex-wrap: wrap; }
.sk-dossier-testo { max-width: 600px; }
.sistema .sk-dossier h2 { font-size: 42px; margin: 18px 0 16px; }

/* ---------- telefono ---------- */
@media (max-width: 600px) {
  .sk-identita { padding-top: 18px; padding-bottom: 46px; }
  .sk-briciole { margin-bottom: 22px; }
  .sistema .sk-titolo { font-size: 34px !important; }
  .sk-confronto { margin-top: -22px; }
  .sistema .sk-confronto-frase { font-size: 27px; }
  .sk-sezione { padding-top: 56px; }
  .sistema .sk-sezione h2, .sistema .sk-dossier h2 { font-size: 30px !important; }
  .sistema #mini-map { height: 280px !important; }
  /* C: i tre numeri uno sotto l'altro */
  .sk-numeri-griglia { grid-auto-flow: row; }
  .sk-numero { border-right: 0; border-bottom: 1px solid var(--line-2); padding: 24px 22px; }
  .sistema .sk-cifra { font-size: 38px; }
  .sistema .sk-numeri .paywall { padding: 24px 22px 26px; }
  .sistema .sk-numeri .paywall .btn-primary, .sistema .sk-numeri .paywall .btn-ghost { display: block; text-align: center; margin: 0 0 10px; }
  /* D: sotto i 600 px la scala diventa lista (deciso il 07/10/2026) */
  .sk-scala { display: none !important; }
  .sk-scala-lista:not([hidden]) { display: block; }
  .sistema .sk-frasi { font-size: 19px; }
  .sk-sintesi th { font-size: 14.5px; }
  /* break-even zero: la frase occupa la riga, sotto il titolo, invece di
     pestarsi con lui in due colonne */
  .sk-sintesi, .sk-sintesi tbody { display: block; }
  .sk-sintesi tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 14px;
    border-bottom: 1px solid var(--line-2); }
  .sk-sintesi th, .sk-sintesi td { border-bottom: 0; }
  .sk-sintesi tr.be-zero { grid-template-columns: minmax(0, 1fr); }
  .sk-sintesi tr.be-zero td { text-align: left; padding-top: 0; }
  /* H, G, E, F */
  .sk-celle { grid-template-columns: minmax(0, 1fr); }
  .sk-celle > div { padding: 18px 0; border-bottom: 1px solid var(--line-2); }
  .sk-scenari { grid-auto-flow: row; }
  .sk-scenario { border-right: 0; border-bottom: 1px solid var(--line-2); padding: 22px; }
  .sistema .sk-paywall .paywall { padding: 24px 22px 26px; }
  .sistema .sk-paywall .btn-primary, .sistema .sk-paywall .btn-ghost { display: block; text-align: center; margin: 0 0 10px; }
  .sk-provenienza > div { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .sistema .vis-comp thead { display: none; }
  .sistema .vis-comp tr { display: block; padding: 10px 0; border-bottom: 1px solid var(--line-2); }
  .sistema .vis-comp td { display: flex; justify-content: space-between; gap: 12px; border: 0; padding: 4px 0; }
  .sistema .vis-comp td::before { content: attr(data-label); font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--testo-3); }
  .sk-dossier { margin-top: 64px; }
  .sk-dossier .pulsante { width: 100%; }
}