/* La mini app del bot Cerca Offerte. Colori e forme del prototipo v2 approvato
   da Enzo il 9/10/2026, e quelli della pagina /offerte/ per il dettaglio.
   Il tema (chiaro o scuro) lo decide Telegram: app.js mette data-tema. */

@font-face {
  font-family: "Cabin";
  src: url("caratteri/cabin-400-700-latin.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
}

:root {
  --accento: #e8710a;
  --accento-scuro: #c25c05;
  --accento-lieve: #fdf1e6;
  --oro: #f5a25e;
  --verde: #059669;
  --verde-lieve: #e6f6ef;
  --rosso: #dc2626;
  --ambra: #b45309;
  --notte: #0f172a;
  --inchiostro: #0f172a;
  --inchiostro-lieve: #475569;
  --tenue: #6f7888;
  --bordo: #e7e5df;
  --bordo-forte: #d6d3cb;
  --fondo: #f4f2ee;
  --superficie: #ffffff;
  --superficie-2: #ebe8e1;
  --voto-alto: #047857;
  --voto-medio: #4c9a2a;
  --voto-base: #d99a06;
  --link: #2a8bd6;
  --pillola: 100px;
  --raggio: 16px;
  --testo: "Cabin", "Trebuchet MS", Arial, sans-serif;
  --titolo: "Cabin", "Trebuchet MS", Arial, sans-serif;
  color-scheme: light;
}
:root[data-tema="scuro"] {
  --fondo: #0b1220; --superficie: #151f31; --superficie-2: #1f2b40; --inchiostro: #eef2f6; --inchiostro-lieve: #b7c2ce; --tenue: #8d9bad;
  --bordo: #22304a; --bordo-forte: #33435f; --verde: #3ccf91; --verde-lieve: rgba(60, 207, 145, .14); --rosso: #f87171; --ambra: #f2b544;
  --voto-alto: #3ccf91; --voto-medio: #8bd450; --voto-base: #f2c230; --accento-lieve: rgba(232, 113, 10, .2); --accento-scuro: #f5a25e; --link: #62b3f0;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { background: var(--fondo); color: var(--inchiostro); font: 400 15px/1.45 var(--testo); -webkit-font-smoothing: antialiased; overflow: hidden; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; -webkit-tap-highlight-color: transparent; }
img { max-width: 100%; }
a { color: var(--link); }
:focus-visible { outline: 2px solid var(--accento); outline-offset: 2px; }
.nascosto { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.aiuto { margin: 0; font-size: 12.5px; color: var(--tenue); }
.etichetta { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--tenue); font-weight: 700; }
.ico { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* -- La struttura: testa, contenuto che scorre, barra delle schede ---------- */
.app { position: fixed; inset: 0; display: flex; flex-direction: column; }
.app-testa { --dente: 6px; flex: none; position: relative; background: var(--notte); color: #fff; padding: 12px 16px 24px;
  -webkit-mask: radial-gradient(circle var(--dente) at 50% 100%, transparent 97%, #000 100%) 50% 100% / calc(var(--dente) * 3.2) 100% repeat-x;
  mask: radial-gradient(circle var(--dente) at 50% 100%, transparent 97%, #000 100%) 50% 100% / calc(var(--dente) * 3.2) 100% repeat-x; }
.app-testa-riga { display: flex; align-items: center; gap: 12px; }
.avatar-sc { width: 52px; height: 52px; border-radius: 50%; background: #fff; border: 2.5px solid var(--accento); overflow: hidden; display: grid; place-items: end center; flex: none; }
.avatar-sc img { width: 100%; }
.app-ciao { flex: 1; min-width: 0; }
.app-ciao b { display: block; font-family: var(--titolo); font-size: 24px; line-height: 1.05; }
.app-ciao span { font-size: 13px; color: #c7cfdb; }
.ingranaggio { width: 40px; height: 40px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .18); background: rgba(255, 255, 255, .06); color: #fff; display: grid; place-items: center; flex: none; }
.app-numeri { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 14px; }
.app-numeri div { background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .12); border-radius: 14px; padding: 9px 10px; display: grid; gap: 2px; }
.app-numeri b { font-family: var(--titolo); font-size: 24px; line-height: 1; color: #fff; font-variant-numeric: tabular-nums; }
.app-numeri b.oro { color: var(--oro); }
.app-numeri span { font-size: 11.5px; color: #aab4c4; font-weight: 600; line-height: 1.2; }

.app-contenuto { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 14px 14px 22px; display: grid; gap: 14px; align-content: start; grid-template-columns: minmax(0, 1fr); grid-auto-rows: max-content; }
.app-h3 { margin: 4px 0 0; font-size: 15px; display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.app-h3 small { font-size: 12.5px; color: var(--tenue); font-weight: 500; }
.app-nota { margin: 0; font-size: 13px; color: var(--inchiostro-lieve); background: var(--superficie-2); border-radius: 12px; padding: 9px 11px; }

/* Attaccata al bordo in basso, fuori dal contenuto che scorre: niente ci passa sotto (Enzo, 16/10). */
.app-tab { flex: none; position: relative; z-index: 4; display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 6px max(10px, calc((100% - 520px) / 2)) calc(6px + env(safe-area-inset-bottom, 0px)); background: var(--superficie); border-top: 1px solid var(--bordo); box-shadow: 0 -6px 18px rgba(15, 23, 42, .08); }
.app-tab button { position: relative; border: 0; background: none; display: grid; justify-items: center; gap: 2px; padding: 6px 2px; border-radius: 16px; font-size: 11.5px; font-weight: 700; color: var(--tenue); }
.app-tab button[aria-current="page"] { background: var(--accento-lieve); color: var(--accento-scuro); }
.app-tab .ico { width: 22px; height: 22px; }
.bolla { position: absolute; top: 2px; right: calc(50% - 22px); min-width: 18px; height: 18px; border-radius: 9px; background: var(--accento); color: #fff; font-size: 11px; line-height: 18px; text-align: center; padding: 0 5px; font-variant-numeric: tabular-nums; }

/* -- Pezzi comuni ----------------------------------------------------------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: var(--pillola); font-weight: 700; font-size: 15px; padding: 11px 18px; border: 1.5px solid transparent; text-decoration: none; white-space: nowrap; line-height: 1.2; }
.btn svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.btn-vai { background: var(--accento); color: #fff; }
.btn-scuro { background: var(--inchiostro); color: var(--fondo); }
.btn-bordo { background: var(--superficie); border-color: var(--bordo-forte); color: var(--inchiostro); }
.btn-bordo.rosso { color: var(--rosso); border-color: var(--rosso); }
.btn[disabled] { opacity: .55; cursor: default; }
.largo { width: 100%; }
.link-testo { border: 0; background: none; padding: 2px 0; color: var(--link); font-weight: 600; text-align: left; }

.segm { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border-radius: 16px; background: var(--superficie-2); }
.segm button { border: 0; background: transparent; border-radius: 12px; padding: 9px 8px; font-weight: 700; font-size: 14px; color: var(--inchiostro-lieve); display: inline-flex; justify-content: center; align-items: center; gap: 6px; }
.segm button[aria-pressed="true"] { background: var(--superficie); color: var(--inchiostro); box-shadow: 0 2px 8px rgba(15, 23, 42, .14); }
.segm .n { font-size: 12px; background: var(--accento); color: #fff; border-radius: 9px; padding: 0 7px; font-variant-numeric: tabular-nums; }
.segm button[aria-pressed="false"] .n { background: var(--bordo-forte); color: var(--inchiostro); }

.app-cerca { display: flex; align-items: center; gap: 8px; background: var(--superficie); border: 1.5px solid var(--bordo-forte); border-radius: 14px; padding: 0 6px 0 12px; }
.app-cerca:focus-within { border-color: var(--accento); }
.app-cerca .ico { stroke: var(--tenue); }
.app-cerca input { flex: 1; min-width: 0; border: 0; outline: none; background: transparent; padding: 11px 0; font-size: 16px; }
.app-cerca .btn { padding: 7px 14px; }

.chips { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chip { flex: none; border: 1px solid var(--bordo); background: var(--superficie); border-radius: var(--pillola); padding: 6px 12px; font-size: 13.5px; font-weight: 600; color: var(--inchiostro); }
.chip[aria-pressed="true"] { background: var(--inchiostro); color: var(--fondo); border-color: var(--inchiostro); }
.chips-scelta { display: flex; flex-wrap: wrap; gap: 6px; }
.chips-scelta button { border: 1px solid var(--bordo); background: var(--fondo); border-radius: var(--pillola); padding: 6px 12px; font-size: 13.5px; font-weight: 600; color: var(--inchiostro); }
.chips-scelta button[aria-pressed="true"] { background: var(--inchiostro); color: var(--fondo); border-color: var(--inchiostro); }
.chips-scelta.escludi button[aria-pressed="true"] { background: var(--rosso); border-color: var(--rosso); color: #fff; text-decoration: line-through; }

.anello { position: relative; display: inline-grid; place-items: center; width: 44px; height: 44px; flex: none; }
.anello svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.anello .a-fondo { fill: none; stroke: var(--superficie-2); stroke-width: 4.5; }
.anello .a-pieno { fill: none; stroke: var(--col); stroke-width: 4.5; stroke-linecap: round; }
.anello b { position: relative; font-family: var(--titolo); font-size: 15px; font-weight: 700; color: var(--inchiostro); font-variant-numeric: tabular-nums; line-height: 1; }
.anello.su-bianco { background: #fff; border-radius: 50%; box-shadow: 0 4px 12px rgba(15, 23, 42, .15); }
.anello.su-bianco b { color: #0f172a; }
.anello.su-bianco .a-fondo { stroke: #ebe8e1; }
.anello.grande { width: 84px; height: 84px; }
.anello.grande .a-fondo, .anello.grande .a-pieno { stroke-width: 3.4; }
.anello.grande b { font-size: 28px; }

.bollini { position: absolute; top: 10px; left: 10px; right: 64px; display: flex; flex-wrap: wrap; gap: 4px; z-index: 1; }
.bollino { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: var(--pillola); line-height: 1.35; white-space: nowrap; }
.bollino svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.bollino.minimo { background: #059669; color: #fff; }
.bollino.tempo { background: #fff4e8; color: #a14a04; border: 1px solid #f7c99a; }
.bollino.vantaggio { background: #eef2ff; color: #3730a3; border: 1px solid #c7d2fe; }
.bollino.scelta { background: #0f172a; color: #ffd84d; }
.negozio-pill { position: absolute; left: 10px; bottom: 10px; z-index: 1; display: inline-flex; align-items: center; gap: 5px; background: rgba(255, 255, 255, .96); border: 1px solid #d6d3cb; color: #0f172a; border-radius: var(--pillola); font-size: 11.5px; font-weight: 700; padding: 2px 9px; }
.negozio-pill i { width: 7px; height: 7px; border-radius: 50%; background: var(--tinta, #94a3b8); }

.prezzo { font-family: var(--titolo); font-size: 24px; font-weight: 700; line-height: 1; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.meno { color: var(--rosso); font-weight: 700; font-variant-numeric: tabular-nums; }
.verita { margin: 0; font-size: 12.5px; color: var(--inchiostro-lieve); }
.verita b { color: var(--verde); }

/* -- Le schede delle offerte ------------------------------------------------- */
.lista-schede { display: grid; gap: 12px; }
.app-card { position: relative; background: var(--superficie); border: 1px solid var(--bordo); border-radius: 20px; overflow: hidden; display: grid; }
.app-card-foto { position: relative; display: block; background: #fff; height: 190px; border: 0; padding: 0; width: 100%; overflow: hidden; }
.app-card-foto img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: contain; padding: 14px; }
.app-card-foto .anello { position: absolute; top: 10px; right: 10px; z-index: 1; }
.app-card-corpo { padding: 12px 14px 14px; display: grid; gap: 6px; }
.perche-te { justify-self: start; display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--accento-scuro); background: var(--accento-lieve); border-radius: var(--pillola); padding: 3px 10px; max-width: 100%; }
.perche-te svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.perche-te span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.riga-prezzo { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 8px; }
.riga-prezzo .prezzo { font-size: 27px; }
.riga-prezzo s { color: var(--tenue); font-size: 13.5px; }
.riga-prezzo .tipo-b { font-size: 11px; color: var(--tenue); font-weight: 600; }
.app-card h3 { margin: 0; font-size: 15px; line-height: 1.3; font-weight: 700; }
.apri { border: 0; background: none; padding: 0; text-align: left; color: inherit; font: inherit; }
.app-azioni { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; gap: 8px; margin-top: 4px; }
.app-azioni .btn { padding: 11px 12px; }
.icona-btn { width: 44px; height: 44px; border-radius: 14px; border: 1px solid var(--bordo-forte); background: var(--superficie); color: var(--inchiostro); display: grid; place-items: center; }
.icona-btn.campana { color: var(--accento-scuro); }
.icona-btn[aria-pressed="true"] { background: var(--accento-lieve); border-color: var(--accento); }
.altre { justify-self: center; }

.sc-blocco { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: center; background: var(--superficie); border: 1px solid var(--bordo); border-radius: 20px; padding: 12px 14px; }
.sc-blocco img { width: 66px; }
.sc-blocco b { display: block; font-family: var(--titolo); font-size: 20px; line-height: 1.1; }
.sc-blocco p { margin: 3px 0 0; font-size: 13.5px; color: var(--inchiostro-lieve); }
.sc-blocco .btn { margin-top: 8px; }

/* -- Cerca -------------------------------------------------------------------- */
.cerca-eroe { position: relative; background: var(--notte); color: #fff; border-radius: 22px; padding: 16px 16px 14px; overflow: hidden; display: grid; gap: 10px; }
.cerca-eroe img.sc { position: absolute; right: -4px; top: 6px; width: 92px; pointer-events: none; }
.cerca-eroe h2 { margin: 0; font-family: var(--titolo); font-size: 27px; line-height: 1; padding-right: 86px; }
.cerca-eroe p { margin: 0; font-size: 13px; color: #c7cfdb; padding-right: 90px; }
.cerca-eroe form { position: relative; z-index: 1; display: flex; gap: 6px; background: #fff; border-radius: 14px; padding: 4px 4px 4px 12px; }
.cerca-eroe input { flex: 1; min-width: 0; border: 0; outline: none; font-size: 16px; color: #0f172a; background: transparent; padding: 8px 0; }
.cerca-eroe .btn { padding: 8px 14px; }
.esempi { display: flex; flex-wrap: wrap; gap: 6px; position: relative; z-index: 1; }
.esempi .chip { font-size: 12.5px; padding: 5px 10px; }
.cerca-eroe .esempi .chip { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .18); color: #fff; }
.griglia-tipi { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.tipo-t { display: grid; justify-items: center; align-content: start; gap: 6px; padding: 12px 6px 10px; border-radius: 16px; border: 1px solid var(--bordo); background: var(--superficie); font-size: 12.5px; font-weight: 700; text-align: center; line-height: 1.2; }
.tipo-t .ico { width: 26px; height: 26px; stroke: var(--accento-scuro); }
.tipo-t .n { font-size: 11px; color: var(--tenue); font-weight: 600; }
.tipo-t[aria-pressed="true"] { border-color: var(--accento); background: var(--accento-lieve); }
.invito-avviso { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; background: var(--accento-lieve); border: 1px dashed var(--accento); border-radius: 18px; padding: 12px 14px; }
.invito-avviso b { display: block; font-size: 15px; }
.invito-avviso span { font-size: 13px; color: var(--inchiostro-lieve); }

/* -- Le righe: offerte compatte, avvisi, prodotti seguiti -------------------- */
.app-lista, .app-avvisi, .app-seguiti { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.app-riga { position: relative; display: grid; grid-template-columns: 60px minmax(0, 1fr) auto; gap: 10px; align-items: center; background: var(--superficie); border: 1px solid var(--bordo); border-radius: 16px; padding: 8px 10px 8px 8px; }
.app-riga img, .app-seguiti img { width: 60px; height: 60px; object-fit: contain; border-radius: 10px; background: #fff; }
.app-info { display: grid; gap: 3px; min-width: 0; justify-items: start; }
.app-info .apri { font-weight: 600; font-size: 14px; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.app-riga .apri::after { content: ""; position: absolute; inset: 0; }
.app-prezzo { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; font-size: 12.5px; }
.app-prezzo b { font-size: 16px; font-variant-numeric: tabular-nums; }
.verde { color: var(--verde); font-weight: 700; }
.app-prezzo .rosso { color: var(--rosso); font-weight: 700; }
.app-avvisi li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; background: var(--superficie); border: 1px solid var(--bordo); border-radius: 16px; padding: 10px 12px; }
.tondo-ico { width: 38px; height: 38px; border-radius: 12px; background: var(--superficie-2); display: grid; place-items: center; color: var(--accento-scuro); }
.app-avvisi b { font-size: 14px; display: block; }
.app-avvisi li > div > span { display: block; font-size: 12.5px; color: var(--tenue); }
.modifica { border: 0; background: none; padding: 0; color: var(--accento-scuro); font-weight: 700; font-size: 12.5px; }
.app-seguiti li { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: 10px; align-items: center; background: var(--superficie); border: 1px solid var(--bordo); border-radius: 16px; padding: 8px 10px 8px 8px; }
.app-seguiti img { width: 48px; height: 48px; }
.app-seguiti b { font-size: 13.5px; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.app-seguiti li > div > span { display: block; font-size: 12.5px; color: var(--tenue); }
.app-seguiti span strong { color: var(--inchiostro); }
.togli { border: 1px solid var(--bordo-forte); background: var(--superficie); border-radius: 10px; padding: 6px 9px; font-size: 12.5px; font-weight: 700; color: var(--inchiostro-lieve); }

.leva-btn { border: 0; background: none; padding: 4px; }
.leva { display: block; width: 40px; height: 24px; border-radius: 12px; background: var(--bordo-forte); position: relative; transition: background .15s; }
.leva::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform .15s; }
.leva-btn[aria-pressed="true"] .leva { background: var(--verde); }
.leva-btn[aria-pressed="true"] .leva::after { transform: translateX(16px); }

/* -- Verifica prezzo -------------------------------------------------------- */
.verdetto { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); }
.verdetto-testa { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; align-items: center; background: var(--superficie); border: 1px solid var(--bordo); border-radius: 18px; padding: 14px; }
.verdetto-testa h3 { margin: 2px 0 0; font-family: var(--titolo); font-size: 22px; line-height: 1.05; }
.verdetto-testa p { margin: 4px 0 0; font-size: 13.5px; color: var(--inchiostro-lieve); }
.semaforo { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; color: #fff; }
.semaforo svg { width: 34px; height: 34px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.semaforo.si { background: var(--verde); }
.semaforo.forse { background: var(--voto-base); }
.semaforo.no, .semaforo.nd { background: var(--inchiostro-lieve); }
.prodotto-v { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 12px; align-items: center; background: var(--superficie); border: 1px solid var(--bordo); border-radius: 16px; padding: 10px; }
.prodotto-v img { width: 72px; height: 72px; object-fit: contain; background: #fff; border-radius: 10px; }
.prodotto-v b { font-size: 14px; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.attesa { display: grid; justify-items: center; gap: 8px; padding: 18px; color: var(--tenue); font-size: 14px; }
.attesa i { width: 26px; height: 26px; border-radius: 50%; border: 3px solid var(--bordo-forte); border-top-color: var(--accento); animation: gira .8s linear infinite; }
@keyframes gira { to { transform: rotate(360deg); } }

/* -- I fogli a tutto schermo: dettaglio, nuovo avviso, impostazioni --------- */
.foglio-app { position: fixed; inset: 0; z-index: 6; background: var(--fondo); display: flex; flex-direction: column; }
.foglio-app[hidden] { display: none; }
.foglio-app-testa { flex: none; display: flex; align-items: center; gap: 6px; padding: 8px 10px; background: var(--superficie); border-bottom: 1px solid var(--bordo); min-height: 50px; }
.foglio-app-testa b { font-family: var(--titolo); font-size: 20px; }
.indietro { border: 0; background: none; display: inline-flex; align-items: center; gap: 2px; color: var(--link); font-weight: 600; padding: 4px; }
.indietro svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.foglio-app-corpo { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.foglio-app-corpo.moduli { padding: 14px 14px 190px; display: grid; gap: 12px; align-content: start; grid-template-columns: minmax(0, 1fr); grid-auto-rows: max-content; }
.foglio-app-cta { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--bordo); background: var(--superficie); }
.cta-prezzo { display: grid; line-height: 1.15; min-width: 0; }
.cta-prezzo b { font-family: var(--titolo); font-size: 24px; font-variant-numeric: tabular-nums; }
.cta-prezzo span { font-size: 12.5px; color: var(--tenue); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.blocco { background: var(--superficie); border: 1px solid var(--bordo); border-radius: 18px; padding: 14px; display: grid; gap: 10px; grid-template-columns: minmax(0, 1fr); }
.blocco-testa { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.blocco-testa b { font-size: 15px; }
.blocco-testa span { font-size: 12.5px; color: var(--tenue); text-align: right; }
.blocco > p { margin: 0; font-size: 12.5px; color: var(--tenue); }
.blocco input[type="text"] { width: 100%; border: 1.5px solid var(--bordo-forte); border-radius: 12px; padding: 10px 12px; background: var(--fondo); font-size: 16px; }
.blocco input[type="text"]:focus { outline: none; border-color: var(--accento); }
.blocco input[type="range"] { width: 100%; accent-color: var(--accento); }
.passo { display: flex; align-items: center; gap: 8px; }
.passo button { width: 42px; height: 42px; border-radius: 12px; border: 1px solid var(--bordo-forte); background: var(--fondo); font-size: 20px; font-weight: 700; line-height: 1; }
.passo output { flex: 1; text-align: center; font-family: var(--titolo); font-size: 24px; font-weight: 700; color: var(--accento-scuro); font-variant-numeric: tabular-nums; }
.scala-r { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--tenue); }
.riga-leva { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.riga-leva b { display: block; font-size: 14px; }
.riga-leva span { font-size: 12.5px; color: var(--tenue); }
.opzione { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: start; padding: 10px; border-radius: 12px; border: 1px solid var(--bordo); background: var(--fondo); cursor: pointer; }
.opzione input { margin-top: 3px; accent-color: var(--accento); }
.opzione b { display: block; font-size: 14px; color: var(--inchiostro); }
.opzione span { font-size: 12.5px; color: var(--tenue); }
.riepilogo-fisso { position: fixed; left: 0; right: 0; bottom: 0; z-index: 7; padding: 18px 14px calc(14px + env(safe-area-inset-bottom, 0px)); background: linear-gradient(to top, var(--fondo) 72%, transparent); display: grid; gap: 8px; }
.riepilogo { background: var(--notte); color: #fff; border-radius: 16px; padding: 10px 12px; display: grid; gap: 6px; font-size: 13px; }
.riepilogo b { color: var(--oro); }
.facce-mini { display: flex; gap: 4px; }
.facce-mini img { width: 32px; height: 32px; border-radius: 8px; background: #fff; object-fit: contain; }

/* -- Il dettaglio di un'offerta: come il pannello di /offerte/ --------------- */
.det { padding: 16px 14px 26px; display: grid; gap: 18px; max-width: 640px; margin: 0 auto; grid-template-columns: minmax(0, 1fr); }
.det h3 { margin: 0 0 10px; font-size: 17px; }
.det-alto { display: grid; grid-template-columns: 116px minmax(0, 1fr); gap: 14px; align-items: start; }
.det-foto { position: relative; background: #fff; border: 1px solid var(--bordo); border-radius: 14px; overflow: hidden; aspect-ratio: 1 / 1; }
.det-foto img { width: 100%; height: 100%; object-fit: contain; }
.det-testo { display: grid; gap: 5px; min-width: 0; }
.det-testo h2 { font-family: var(--titolo); font-size: 22px; line-height: 1.08; margin: 0; }
.det-testo .cat { margin: 0; font-size: 12.5px; color: var(--tenue); font-weight: 600; }
.sotto { margin: 0; color: var(--inchiostro-lieve); font-size: 14px; line-height: 1.35; }
.stelle { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; color: var(--inchiostro-lieve); }
.stelle svg { width: 15px; height: 15px; fill: #f59e0b; stroke: none; }
.stelle b { color: var(--inchiostro); }
.a-tempo-banner { display: flex; gap: 8px; align-items: center; background: #fff4e8; border: 1px solid #f7c99a; color: #a14a04; border-radius: 12px; padding: 9px 12px; font-weight: 700; font-size: 14px; }
.a-tempo-banner svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.det-prezzo { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.det-prezzo .prezzo { font-size: 40px; line-height: .95; }
.det-prezzo s { color: var(--tenue); font-size: 16px; }
.det-prezzo .meno { font-size: 16px; }
.det-prezzo .aiuto { flex-basis: 100%; margin-top: 2px; }
.tipo-barrato { font-size: 11px; color: var(--tenue); font-weight: 600; }
.risparmi { background: var(--verde-lieve); color: var(--verde); font-weight: 700; border-radius: var(--pillola); padding: 2px 10px; font-size: 13px; }
.verificato { display: inline-flex; align-items: center; gap: 4px; }
.verificato svg { width: 14px; height: 14px; fill: none; stroke: var(--verde); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.termometro { display: grid; gap: 5px; flex-basis: 100%; margin-top: 8px; }
.traccia { position: relative; height: 6px; border-radius: 4px; background: var(--superficie-2); }
.traccia .zona { position: absolute; top: 0; bottom: 0; left: 0; border-radius: 4px; background: rgba(5, 150, 105, .38); }
.traccia .media { position: absolute; top: -4px; width: 2px; height: 14px; background: var(--inchiostro-lieve); border-radius: 1px; }
.traccia .oggi { position: absolute; top: 50%; width: 14px; height: 14px; border-radius: 50%; background: var(--superficie); border: 3px solid var(--accento); transform: translate(-50%, -50%); }
.scala { display: flex; justify-content: space-between; gap: 6px; font-size: 11.5px; color: var(--tenue); font-variant-numeric: tabular-nums; }
.codice-box { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; background: var(--accento-lieve); border: 1.5px dashed var(--accento); border-radius: 12px; padding: 10px 12px; font-size: 14px; }
.codice-box b { font-family: ui-monospace, Consolas, monospace; letter-spacing: .08em; font-size: 16px; }
.codice-box button { border: 0; background: var(--accento); color: #fff; border-radius: 8px; padding: 6px 12px; font-weight: 700; }
.azioni { display: flex; flex-wrap: wrap; gap: 8px; }
.azioni .btn-scuro { flex: 1 1 100%; }
.azioni .btn-bordo { flex: 1 1 0; }
.giudizio { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px 16px; align-items: center; background: var(--superficie); border: 1px solid var(--bordo); border-radius: var(--raggio); padding: 16px; }
.giudizio h3 { margin: 2px 0 0; font-family: var(--titolo); font-size: 24px; line-height: 1; }
.giudizio p { margin: 6px 0 0; color: var(--inchiostro-lieve); font-size: 14px; }
.parti { grid-column: 1 / -1; display: grid; gap: 10px; padding-top: 14px; border-top: 1px solid var(--bordo); }
.parte { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; font-size: 13.5px; }
.parte b { font-variant-numeric: tabular-nums; }
.parte .barra { grid-column: 1 / -1; height: 6px; border-radius: 4px; background: var(--superficie-2); overflow: hidden; }
.parte .barra i { display: block; height: 100%; border-radius: 4px; }
.perche ul, .condizioni ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.perche li, .condizioni li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 8px; font-size: 14.5px; }
.perche li svg, .condizioni li svg { width: 20px; height: 20px; margin-top: 1px; fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.lista-si svg { stroke: var(--verde); }
.lista-dubbi svg { stroke: var(--ambra); }
.perche .da-sapere { margin-top: 18px; }
.condizioni { background: var(--accento-lieve); border: 1px solid #f6d3b3; border-radius: var(--raggio); padding: 14px 16px; display: grid; gap: 10px; }
:root[data-tema="scuro"] .condizioni { border-color: rgba(245, 162, 94, .35); }
.condizioni h3 { margin: 0; }
.condizioni li svg { stroke: var(--accento-scuro); stroke-width: 2; }
.condizioni a { color: var(--accento-scuro); }
.caratteristiche ul { margin: 0; padding-left: 18px; display: grid; gap: 8px; color: var(--inchiostro-lieve); font-size: 14px; }
.caratteristiche b, .due-righe b { color: var(--inchiostro); }
.due-righe { display: grid; gap: 8px; font-size: 14px; color: var(--inchiostro-lieve); }
.due-righe p { margin: 0; }
.striscia-simili { display: grid; grid-auto-flow: column; grid-auto-columns: 132px; gap: 10px; overflow-x: auto; padding-bottom: 6px; overscroll-behavior-x: contain; scrollbar-width: none; }
.mini { display: grid; gap: 6px; align-content: start; text-align: left; background: var(--superficie); border: 1px solid var(--bordo); border-radius: 12px; padding: 8px; }
.mini img { width: 100%; aspect-ratio: 1 / 1; object-fit: contain; border-radius: 8px; background: #fff; }
.mini-nome { font-size: 12.5px; font-weight: 600; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.5em; }
.mini-basso { display: flex; align-items: center; justify-content: space-between; gap: 4px; }
.mini-basso b { font-size: 14px; font-variant-numeric: tabular-nums; }
.mini .anello { width: 32px; height: 32px; }
.mini .anello b { font-size: 11.5px; }

.grafico-box { background: var(--superficie); border: 1px solid var(--bordo); border-radius: var(--raggio); padding: 14px 12px 12px; display: grid; gap: 8px; grid-template-columns: minmax(0, 1fr); }
.grafico-testa { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; padding-inline: 4px; }
.grafico-testa h3 { margin: 0; }
.grafico-svg { min-height: 120px; }
.grafico-svg svg { display: block; width: 100%; height: auto; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.segmenti { display: flex; flex-wrap: wrap; gap: 6px; }
.segmenti button { border: 1px solid var(--bordo); background: var(--fondo); border-radius: var(--pillola); padding: 4px 10px; font-size: 12.5px; font-weight: 700; color: var(--inchiostro-lieve); }
.segmenti button[aria-pressed="true"] { background: var(--inchiostro); color: var(--fondo); border-color: var(--inchiostro); }
.g-griglia { stroke: var(--bordo); stroke-width: 1; }
.g-testo { fill: var(--tenue); font: 600 11px Arial, sans-serif; }
.g-area { fill: rgba(15, 23, 42, .07); }
:root[data-tema="scuro"] .g-area { fill: rgba(238, 242, 246, .07); }
.g-linea { fill: none; stroke: var(--inchiostro); stroke-width: 2; stroke-linejoin: round; }
.g-media { stroke: var(--inchiostro-lieve); stroke-width: 1.3; stroke-dasharray: 4 4; }
.g-min { fill: var(--verde); stroke: var(--superficie); stroke-width: 2; }
.g-oggi { fill: var(--accento); stroke: var(--superficie); stroke-width: 2.5; }
.g-guida { stroke: var(--inchiostro-lieve); stroke-width: 1; stroke-dasharray: 2 3; }
.g-punto { fill: var(--superficie); stroke: var(--inchiostro); stroke-width: 2.5; }
.g-etichetta rect { fill: var(--inchiostro); }
.g-etichetta text { fill: var(--fondo); font: 700 12px Arial, sans-serif; }
.legenda-g { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0; font-size: 12.5px; color: var(--inchiostro-lieve); padding-inline: 4px; }
.legenda-g b { color: var(--inchiostro); font-variant-numeric: tabular-nums; }
.legenda-g i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 5px; vertical-align: -1px; }
.legenda-g .l-oggi { background: var(--accento); }
.legenda-g .l-min { background: var(--verde); }
.legenda-g .l-media { width: 16px; height: 0; border-top: 2px dashed var(--inchiostro-lieve); border-radius: 0; vertical-align: 3px; }
.ramo-amazon { margin: 0; font-size: 12.5px; color: var(--tenue); }

/* -- Avvisi brevi in basso --------------------------------------------------- */
.toast { position: fixed; left: 14px; right: 14px; bottom: calc(78px + env(safe-area-inset-bottom, 0px)); z-index: 9; display: flex; align-items: center; gap: 10px; background: var(--notte); color: #fff; border-radius: 16px; padding: 10px 14px; font-size: 14px; box-shadow: 0 10px 30px rgba(2, 6, 23, .35); max-width: 520px; margin: 0 auto; }
.toast[hidden] { display: none; }
.toast img { width: 34px; flex: none; }
:root[data-tema="scuro"] .toast { background: #f4f2ee; color: #0f172a; }

/* Fuori da Telegram: si spiega dove aprirla. */
.fuori { max-width: 440px; margin: 0 auto; padding: 32px 18px; display: grid; gap: 14px; justify-items: center; text-align: center; }
.fuori img { width: 120px; }
.fuori h1 { margin: 0; font-family: var(--titolo); font-size: 28px; line-height: 1.05; }
.fuori p { margin: 0; color: var(--inchiostro-lieve); }

@media (min-width: 560px) {
  .app-contenuto, .det { padding-inline: max(14px, calc(50% - 270px)); }
  .foglio-app-corpo.moduli { padding-inline: max(14px, calc(50% - 270px)); }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}