/* «Sintesi prodotti»: pulsante nella barra di ricerca + riquadro (sintesi.js). Segue i temi con le stesse variabili della scheda. */
/* 14/10/2026 (Marco): pulsante pieno con il colore d'accento e icona a griglia, perché è il riepilogo di tutto il catalogo */
.sintesi-btn{display:inline-flex;align-items:center;gap:10px;font:600 15px var(--display);letter-spacing:.02em;padding:9px 20px 9px 16px;border-radius:999px;border:1px solid var(--ciano);background:linear-gradient(135deg,var(--ciano),var(--ciano-forte));color:#03203a;cursor:pointer;white-space:nowrap;box-shadow:0 4px 16px rgba(76,195,255,.32);transition:transform .15s,box-shadow .15s}
.sintesi-btn::before{content:"";flex:none;width:5px;height:5px;margin:0 7px 7px 0;background:currentColor;border-radius:1px;box-shadow:7px 0 currentColor,0 7px currentColor,7px 7px currentColor}
.sintesi-btn:hover{transform:translateY(-1px);box-shadow:0 6px 22px rgba(76,195,255,.48)}
html:is([data-tema="chiaro"],[data-tema="blu"]) .sintesi-btn{background:linear-gradient(135deg,var(--ciano),var(--ciano-forte));border-color:var(--ciano-forte);color:#fff;box-shadow:0 4px 14px rgba(11,99,206,.30)}
html:is([data-tema="chiaro"],[data-tema="blu"]) .sintesi-btn:hover{box-shadow:0 6px 20px rgba(11,99,206,.42)}
.sintesi-btn:focus-visible{outline:3px solid rgba(76,195,255,.55);outline-offset:2px}

dialog.sintesi{width:min(1040px,96vw);height:min(680px,90vh);display:none;flex-direction:column}
dialog.sintesi[open]{display:flex}
.sn-testa{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 18px;border-bottom:1px solid var(--linea)}
.sn-titolo{margin:0;font:700 22px var(--display);letter-spacing:.02em}
.sn-x{font:600 18px var(--display);width:38px;height:38px;border-radius:8px;border:1px solid var(--linea-forte);background:transparent;color:inherit;cursor:pointer}
.sn-x:hover{border-color:var(--ciano)}
.sn-corpo{flex:1 1 auto;min-height:0;display:grid;grid-template-columns:minmax(220px,260px) minmax(0,1fr)}

/* colonna di miniature: più grandi di quelle delle anteprime (.cn-th, 78 px) */
.sn-elenco{list-style:none;margin:0;padding:12px;overflow-y:auto;border-right:1px solid var(--linea);display:flex;flex-direction:column;gap:10px}
.sn-elenco button{width:100%;display:flex;flex-direction:column;gap:6px;text-align:left;font:600 14.5px var(--display);color:inherit;padding:8px;border-radius:10px;border:1px solid var(--linea);background:transparent;cursor:pointer}
.sn-elenco button:hover{border-color:var(--linea-forte)}
.sn-elenco button[aria-pressed="true"]{border-color:var(--ciano);background:rgba(76,195,255,.12);box-shadow:0 0 0 1px var(--ciano) inset}
.sn-mini{display:grid;place-items:center;width:100%;aspect-ratio:16/10;border-radius:7px;overflow:hidden;background:var(--pannello2);border:1px solid var(--linea)}
.sn-mini img{width:100%;height:100%;object-fit:cover;object-position:0 0;display:block}
.sn-mini svg{width:44px;height:44px;fill:none;stroke:var(--luce);stroke-width:1.5}

.sn-pannello{padding:20px 24px;overflow-y:auto}
.sn-area{margin:0 0 4px;font:600 12.5px var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--ciano-forte)}
.sn-pn{margin:0 0 6px;font:700 28px/1.15 var(--display)}
.sn-riga{margin:0 0 16px;color:var(--muted)}
.sn-dati{display:flex;flex-wrap:wrap;gap:12px 32px;margin:0 0 18px;padding:12px 14px;border:1px solid var(--linea);border-radius:10px}
.sn-dati dt{font:600 12px var(--display);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:3px}
.sn-dati dd{margin:0;font-size:16px}
.sn-cat{font:700 15px var(--display);letter-spacing:.06em;text-transform:uppercase}
.sn-pannello h4{margin:0 0 6px;font:700 13px var(--display);letter-spacing:.12em;text-transform:uppercase;color:var(--ciano-forte)}
.sn-funz{margin:0 0 16px;padding-left:20px}
.sn-funz li{margin:0 0 5px}
.sn-ai{margin:0 0 16px}
.sn-btns{margin-top:6px}

@media (max-width:760px){
  dialog.sintesi{width:100vw;height:100dvh;max-height:100dvh;border-radius:0}
  .sn-corpo{grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr)}
  .sn-elenco{flex-direction:row;overflow-x:auto;overflow-y:hidden;border-right:0;border-bottom:1px solid var(--linea);padding:10px}
  .sn-elenco li{flex:0 0 132px}
  .sn-pannello{padding:16px}
  .sn-pn{font-size:23px}
}
@media (prefers-reduced-motion:no-preference){
  .sn-pannello{animation:sn-entra .25s ease}
  @keyframes sn-entra{from{opacity:.4;transform:translateY(6px)}to{opacity:1;transform:none}}
}

/* temi chiaro e blu: i colori della scheda sono scritti a mano in temi.css, qui li ripeto */
html:is([data-tema="chiaro"],[data-tema="blu"]) .sn-elenco button[aria-pressed="true"]{background:#e8f1fd}
html:is([data-tema="chiaro"],[data-tema="blu"]) .sn-pn,html:is([data-tema="chiaro"],[data-tema="blu"]) .sn-titolo{color:#13294b}