/* stile.css — aggiunte specifiche di media-factory (il resto è in kit.css)
   Tema CHIARO come tutta la suite (24/09/2026): segue le variabili del kit. */

.gruppo-preset { margin-bottom: .3rem; }
.gruppo-preset > h4 { font-size: .74rem; text-transform: uppercase; letter-spacing: .05em;
  color: var(--mut2); margin-bottom: .45rem; }
.preset-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: .5rem; }
.preset-btn { text-align: left; background: var(--panel2); border: 1px solid var(--line);
  border-radius: var(--radius-s); padding: .6rem .7rem; color: var(--ink); transition: .14s; }
.preset-btn:hover { border-color: var(--line2); }
.preset-btn.sel { border-color: var(--accent); background: #e9f0fc; box-shadow: 0 0 0 1px var(--accent); }
.preset-btn b { display: block; font-size: .88rem; margin-bottom: .15rem; }
.preset-btn span { display: block; font-size: .74rem; color: var(--mut); line-height: 1.35; }
.preset-btn .prezzo { color: #15724f; font-weight: 600; margin-top: .3rem; font-size: .72rem; }

.risultato { border: 1px solid var(--line); border-radius: var(--radius-s);
  padding: .7rem; margin-bottom: .7rem; background: var(--panel2); }
.risultato .testa { display: flex; align-items: center; gap: .5rem; margin-bottom: .5rem; font-size: .82rem; }
.risultato .testa .p { color: var(--mut); margin-right: auto; }
.risultato .descr { font-size: .8rem; color: var(--mut); margin-bottom: .5rem;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.risultato audio { width: 100%; }
.risultato .errore { color: var(--err); font-size: .82rem; }

/* sezione Brain: una riga per azione, con il payload in chiaro */
.azione-brain { border: 1px solid var(--line); border-radius: var(--radius-s);
  padding: .7rem .8rem; margin-bottom: .6rem; background: var(--panel2); }
.azione-brain .testa { display: flex; align-items: center; gap: .5rem;
  flex-wrap: wrap; font-size: .82rem; }
.azione-brain .tipo { font-weight: 600; }
.azione-brain .payload { margin-top: .5rem; padding: .5rem .6rem; border-radius: var(--radius-xs);
  background: var(--panel); color: var(--mut); font-size: .76rem; line-height: 1.5;
  white-space: pre-wrap; word-break: break-word; max-height: 11rem; overflow: auto; }

/* la crocetta sta sopra la foto, non sul pannello: resta scura col segno bianco */
.rif-tile { position: relative; }
.rif-tile button { position: absolute; top: 3px; right: 3px; border: 0; background: rgba(0,0,0,.65);
  color: #fff; border-radius: 50%; width: 20px; height: 20px; line-height: 1; font-size: .8rem; }