/* =========================================================================
   A2 - Applicazione
   =========================================================================
   Il foglio del nuovo applicativo, derivato dal riferimento approvato
   _design/v3/1-sidebar-fissa.html (shell 1: sidebar fissa). I token stanno
   in a2-tokens.css; qui ci sono telaio, testate, schede, tabelle, pulsanti
   e campi. Le classi hanno tutte il prefisso a2-.

   Differenze dal riferimento: il telaio .a2-app e' la finestra intera
   (100dvh) invece di un riquadro; i blocchi di sola presentazione della
   pagina di riferimento (cornici, pannello di sistema, tavolozza) non ci
   sono.
   ========================================================================= */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0;
  background:var(--a2-bg);
  color:var(--a2-t1);
  font-family:var(--a2-f-sans);
  font-size:14px;
  line-height:1.5;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
h1,h2,h3,h4,p,figure,ul,ol{ margin:0; }
ul,ol{ padding:0; list-style:none; }
button,input,select,textarea{ font:inherit; color:inherit; }
table{ border-collapse:collapse; width:100%; }
svg{ display:block; }
[hidden]{ display:none !important; }

::selection{ background:var(--a2-acc-100); color:var(--a2-acc-p); }
input,textarea{ caret-color:var(--a2-acc); }

*{ scrollbar-width:thin; scrollbar-color:var(--a2-line-str) transparent; }
::-webkit-scrollbar{ width:11px; height:11px; }
::-webkit-scrollbar-track{ background:transparent; }
::-webkit-scrollbar-thumb{
  background:var(--a2-line-str);
  border-radius:var(--a2-rp);
  border:3px solid var(--a2-bg);
}
::-webkit-scrollbar-thumb:hover{ background:#B9C1CD; }
.a2-side ::-webkit-scrollbar-thumb,
.a2-side-nav::-webkit-scrollbar-thumb,
.a2-card ::-webkit-scrollbar-thumb,
.a2-scroll::-webkit-scrollbar-thumb{ border-color:var(--a2-surface); }

:focus{ outline:none; }
:focus-visible{
  outline:2px solid var(--a2-acc);
  outline-offset:2px;
  border-radius:var(--a2-r1);
}

.a2-num, table td, table th, .a2-metric b, .a2-prov-v, .a2-mk, .a2-key-v{
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1;
}
.a2-sr{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* Icone: una sola griglia 24, un solo spessore 1.5, stessi terminali. */
.a2-ico{
  width:16px; height:16px; flex:none;
  fill:none; stroke:currentColor; stroke-width:1.5;
  stroke-linecap:round; stroke-linejoin:round;
}
.a2-ico-12{ width:12px; height:12px; }
.a2-ico-13{ width:13px; height:13px; }
.a2-ico-14{ width:14px; height:14px; }
.a2-ico-18{ width:18px; height:18px; }
.a2-ico-28{ width:28px; height:28px; }

/* Telaio applicativo: sidebar fissa + colonna principale che scorre da sola. */
.a2-app{
  position:relative;
  display:grid; grid-template-columns:var(--a2-side-w) minmax(0,1fr);
  height:100dvh;
  background:var(--a2-surface);
  overflow:hidden;
}

/* =========================================================================
   SIDEBAR
   Si distingue dal contenuto per superficie: bianca contro il fondo freddo
   della pagina, separata da un filo da 1px. Nessun colore acceso.
   ========================================================================= */
.a2-side{
  display:flex; flex-direction:column; min-height:0;
  background:var(--a2-surface);
  border-right:1px solid var(--a2-line);
}
.a2-side-top{
  display:flex; align-items:center; gap:9px;
  height:var(--a2-top-h); padding:0 14px; flex:none;
  border-bottom:1px solid var(--a2-line);
}
.a2-mark{
  width:26px; height:26px; border-radius:7px; flex:none;
  background:var(--a2-acc); color:#fff;
  display:grid; place-items:center;
}
.a2-brand-name{ font-size:14.5px; font-weight:600; letter-spacing:-.012em; line-height:1.15; }
.a2-brand-sub{ font-size:11.5px; color:var(--a2-t3); line-height:1.15; }

.a2-side-nav{ flex:1 1 auto; min-height:0; overflow-y:auto; overflow-x:hidden; padding:6px 10px 10px; }
.a2-nav-g{ margin-top:10px; }
.a2-nav-g:first-child{ margin-top:2px; }
.a2-nav-gt{
  display:block; padding:0 10px 4px;
  font-size:10.5px; font-weight:600; letter-spacing:.07em;
  text-transform:uppercase; color:var(--a2-t3);
}
.a2-nav-a{
  display:flex; align-items:center; gap:10px;
  height:30px; padding:0 10px; border-radius:var(--a2-r1);
  font-size:13.5px; font-weight:450; color:var(--a2-t2);
  text-decoration:none; white-space:nowrap;
  transition:background-color var(--a2-fast) var(--a2-ease), color var(--a2-fast) var(--a2-ease);
}
.a2-nav-a .a2-ico{ color:var(--a2-t3); transition:color var(--a2-fast) var(--a2-ease); }
.a2-nav-a:hover{ background:var(--a2-sunken); color:var(--a2-t1); }
.a2-nav-a:hover .a2-ico{ color:var(--a2-t2); }
.a2-nav-a:active{ background:var(--a2-line); }
.a2-nav-a[aria-current="page"]{ background:var(--a2-acc-50); color:var(--a2-acc-h); font-weight:600; }
.a2-nav-a[aria-current="page"] .a2-ico{ color:var(--a2-acc); }
.a2-nav-n{
  margin-left:auto; font-size:11.5px; font-weight:500; color:var(--a2-t3);
  font-variant-numeric:tabular-nums;
}
.a2-nav-a[aria-current="page"] .a2-nav-n{ color:var(--a2-acc-t2); }

/* Sotto-voci della sola voce attiva: le sezioni della pagina corrente. */
.a2-nav-sub{ margin:2px 0 4px 20px; padding-left:11px; border-left:1px solid var(--a2-line); }
.a2-nav-s{
  display:flex; align-items:center; gap:8px;
  height:26px; padding:0 8px; border-radius:var(--a2-r1);
  font-size:12.5px; color:var(--a2-t2); text-decoration:none; white-space:nowrap;
  background:none; border:0; width:100%; text-align:left; cursor:pointer;
  transition:background-color var(--a2-fast) var(--a2-ease), color var(--a2-fast) var(--a2-ease);
}
.a2-nav-s:hover{ background:var(--a2-sunken); color:var(--a2-t1); }
.a2-nav-s:active{ background:var(--a2-line); }
.a2-nav-s[aria-current="true"]{ color:var(--a2-acc-h); font-weight:550; }
.a2-nav-sn{ font-family:var(--a2-f-mono); font-size:10.5px; color:var(--a2-t-off); font-variant-numeric:tabular-nums; }
.a2-nav-s[aria-current="true"] .a2-nav-sn{ color:var(--a2-acc); }
.a2-nav-sd{ margin-left:auto; width:6px; height:6px; border-radius:50%; background:var(--a2-obs-500); flex:none; }
.a2-nav-s .a2-ico{ width:14px; height:14px; color:var(--a2-t3); }
.a2-nav-s[aria-current="true"] .a2-ico{ color:var(--a2-acc); }

/* L'azienda in cui si lavora, sotto "Tutte le aziende": il suo spazio. */
.a2-nav-az{
  display:flex; align-items:center; gap:10px; height:34px; margin-top:4px; padding:0 10px;
  border-radius:var(--a2-r1); font-size:13.5px; font-weight:600; color:var(--a2-t1); text-decoration:none;
}
.a2-nav-az:hover{ background:var(--a2-sunken); }
.a2-nav-az .a2-comp-sq{ width:22px; height:22px; font-size:10px; }
.a2-nav-az-t{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.a2-side-foot{
  flex:none; padding:6px 10px 8px;
  border-top:1px solid var(--a2-line);
}
.a2-side-note{ padding:6px 10px 2px; font-size:11.5px; color:var(--a2-t-off); }

/* =========================================================================
   COLONNA PRINCIPALE
   ========================================================================= */
.a2-main{ display:flex; flex-direction:column; min-width:0; min-height:0; background:var(--a2-bg); }
.a2-topbar{
  position:relative; z-index:20; flex:none;
  display:flex; align-items:center; gap:14px;
  height:var(--a2-top-h); padding:0 18px;
  background:var(--a2-surface);
  border-bottom:1px solid var(--a2-line);
}
.a2-burger{
  display:none; place-items:center;
  width:32px; height:32px; padding:0; flex:none;
  background:var(--a2-surface); color:var(--a2-t2);
  border:1px solid var(--a2-line-str); border-radius:var(--a2-r1); cursor:pointer;
  transition:background-color var(--a2-fast) var(--a2-ease);
}
.a2-burger:hover{ background:var(--a2-sunken); }
.a2-burger:active{ background:var(--a2-line); }
.a2-scrim{
  position:absolute; inset:0; z-index:30;
  background:rgba(16,22,34,.34);
  opacity:0; pointer-events:none;
  transition:opacity var(--a2-med) var(--a2-ease);
}
.a2-app.a2-drawer .a2-scrim{ opacity:1; pointer-events:auto; }

.a2-content{
  flex:1 1 auto; min-height:0;
  overflow-y:auto; overflow-x:hidden;
  padding:18px 22px 44px;
}
.a2-content > *{ min-width:0; }

/* Selettore azienda: il gesto piu' frequente, quindi il primo elemento
   della barra e il piu' grande. */
.a2-comp{ position:relative; }
.a2-comp-btn{
  display:flex; align-items:center; gap:10px;
  height:40px; padding:0 12px 0 8px;
  background:var(--a2-surface);
  border:1px solid var(--a2-line-str);
  border-radius:var(--a2-r2);
  cursor:pointer;
  transition:border-color var(--a2-fast) var(--a2-ease),
             background-color var(--a2-fast) var(--a2-ease),
             transform 90ms var(--a2-ease);
}
.a2-comp-btn:hover{ border-color:#BFC7D3; background:#FCFDFD; }
.a2-comp-btn:active{ transform:translateY(1px); background:var(--a2-sunken); }
.a2-comp-btn[aria-expanded="true"]{ border-color:var(--a2-acc); }
.a2-comp-sq{
  width:26px; height:26px; border-radius:var(--a2-r1); flex:none;
  background:var(--a2-acc); color:#fff;
  display:grid; place-items:center; font-size:11px; font-weight:600;
}
.a2-comp-txt{ text-align:left; min-width:0; }
.a2-comp-lab{ display:block; font-size:11px; color:var(--a2-t3); line-height:1.15; }
.a2-comp-val{ display:block; font-size:14px; font-weight:550; line-height:1.25; letter-spacing:-.005em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.a2-comp-btn .a2-ico{ color:var(--a2-t3); margin-left:2px; transition:transform var(--a2-med) var(--a2-ease); }
.a2-comp-btn[aria-expanded="true"] .a2-ico{ transform:rotate(180deg); }

.a2-menu{
  position:absolute; top:calc(100% + 8px); left:0; z-index:70;
  min-width:290px; padding:6px;
  background:var(--a2-surface);
  border-radius:var(--a2-r3);
  box-shadow:var(--a2-lift-2);
  opacity:0; transform:translateY(-4px) scale(.985);
  transform-origin:top left; pointer-events:none;
  transition:opacity var(--a2-fast) var(--a2-ease), transform var(--a2-med) var(--a2-ease);
}
.a2-menu.a2-open{ opacity:1; transform:none; pointer-events:auto; }
.a2-menu-search{ position:relative; padding:2px 2px 6px; }
.a2-menu-search .a2-ico{ position:absolute; left:11px; top:11px; color:var(--a2-t3); }
.a2-menu-search input{
  width:100%; height:34px; padding:0 10px 0 32px;
  background:var(--a2-sunken);
  border:1px solid transparent; border-radius:var(--a2-r1);
  font-size:13px;
}
.a2-menu-search input::placeholder{ color:var(--a2-t3); }
.a2-menu-search input:focus{ background:var(--a2-surface); border-color:var(--a2-line-str); }
.a2-menu-item{
  display:flex; align-items:center; gap:10px; width:100%;
  padding:8px 10px; border:0; background:transparent;
  border-radius:var(--a2-r1); text-align:left; cursor:pointer; font-size:13.5px;
  transition:background-color var(--a2-fast) var(--a2-ease);
}
.a2-menu-item:hover{ background:var(--a2-sunken); }
.a2-menu-item:active{ background:var(--a2-line); }
.a2-menu-item .a2-ico{ margin-left:auto; color:var(--a2-acc); opacity:0; }
.a2-menu-item[aria-current="true"]{ font-weight:550; }
.a2-menu-item[aria-current="true"] .a2-ico{ opacity:1; }
.a2-menu-sq{
  width:22px; height:22px; border-radius:5px; flex:none;
  background:var(--a2-sunken); color:var(--a2-t2);
  display:grid; place-items:center; font-size:10px; font-weight:600;
}
.a2-menu-item[aria-current="true"] .a2-menu-sq{ background:var(--a2-acc); color:#fff; }

.a2-top-end{ margin-left:auto; display:flex; align-items:center; gap:14px; }
.a2-session{ display:flex; align-items:center; gap:6px; font-size:12.5px; color:var(--a2-t2); }
.a2-session .a2-ico{ color:var(--a2-t3); }
.a2-user{ display:flex; align-items:center; gap:8px; padding-left:14px; border-left:1px solid var(--a2-line); }
.a2-avatar{
  width:28px; height:28px; border-radius:var(--a2-rp); flex:none;
  background:var(--a2-acc-100); color:var(--a2-acc-h);
  display:grid; place-items:center; font-size:11px; font-weight:600;
}
.a2-user-name{ display:block; font-size:13px; font-weight:500; line-height:1.2; }
.a2-user-role{ display:block; font-size:11.5px; color:var(--a2-t3); line-height:1.2; }

/* =========================================================================
   TESTATA DI PAGINA, ETICHETTE
   ========================================================================= */
.a2-head{ display:flex; align-items:flex-start; gap:16px; margin-bottom:14px; }
.a2-h1{ font-size:24px; font-weight:600; letter-spacing:-.021em; line-height:1.22; margin-bottom:6px; }
/* Che cosa e' la pagina, sopra il titolo: Prompt, Template, Variante, Asset. */
.a2-head-tipo{ font-size:11px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--a2-t3); margin-bottom:2px; }
.a2-head-meta{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; font-size:13px; color:var(--a2-t2); }
.a2-sep{ width:3px; height:3px; border-radius:50%; background:var(--a2-t-off); flex:none; }
/* Le azioni si stringono e vanno a capo: con tre o quattro non escono dal bordo destro. */
.a2-head-act{ margin-left:auto; display:flex; gap:8px; flex:0 1 auto; min-width:0; flex-wrap:wrap; justify-content:flex-end; }

.a2-tag{
  display:inline-flex; align-items:center; gap:5px;
  height:22px; padding:0 9px; border-radius:var(--a2-rp);
  font-size:12px; font-weight:500; line-height:1; white-space:nowrap;
}
.a2-tag-neutro{ background:var(--a2-sunken); color:var(--a2-t2); box-shadow:inset 0 0 0 1px var(--a2-line); }
.a2-tag-obs{ background:var(--a2-obs-100); color:var(--a2-obs-700); }
.a2-tag-acc{ background:var(--a2-acc-100); color:var(--a2-acc-h); }
.a2-tag-mai{ background:var(--a2-surface); color:var(--a2-t3); box-shadow:inset 0 0 0 1px var(--a2-line-str); }
.a2-tag-err{ background:var(--a2-err-100); color:var(--a2-err-700); }
/* Informativo: un aiuto disponibile, non uno stato (es. asset di setup con un prompt suggerito). */
.a2-tag-info{ background:var(--a2-fmt-immagine-bg); color:var(--a2-fmt-immagine); }
.a2-tag-dot{ width:5px; height:5px; border-radius:50%; background:currentColor; opacity:.85; flex:none; }

/* =========================================================================
   PROVENIENZA, MARCATORE, OBSOLESCENZA, DIFFERENZE
   ========================================================================= */
.a2-prov{
  position:sticky; top:0; z-index:15;
  display:flex; flex-wrap:wrap; align-items:stretch;
  background:var(--a2-surface);
  border:1px solid var(--a2-line);
  border-radius:var(--a2-r2);
  margin-bottom:14px;
}
.a2-prov-i{ display:flex; flex-direction:column; gap:2px; padding:9px 15px; min-width:0; border-left:1px solid var(--a2-line); }
.a2-prov-i:first-child{ border-left:0; }
.a2-prov-k{ font-size:10.5px; font-weight:600; letter-spacing:.07em; text-transform:uppercase; color:var(--a2-t3); line-height:1.3; }
.a2-prov-v{ display:flex; align-items:center; gap:6px; font-size:12.5px; font-weight:500; color:var(--a2-t1); line-height:1.3; white-space:nowrap; }
.a2-prov-mono{ font-family:var(--a2-f-mono); font-size:12px; font-weight:500; }

.a2-mk{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:17px; height:17px; padding:0 4px;
  border:0; border-radius:var(--a2-r1);
  background:var(--a2-obs-100); color:var(--a2-obs-700);
  font-family:var(--a2-f-mono); font-size:11px; font-weight:600; line-height:1;
  cursor:pointer; vertical-align:1px;
  transition:background-color var(--a2-fast) var(--a2-ease), color var(--a2-fast) var(--a2-ease);
}
.a2-mk:hover{ background:var(--a2-obs-200); }
.a2-mk:active{ background:#E7CB92; }
.a2-mk[aria-pressed="true"]{ background:var(--a2-obs-600); color:#fff; }

.a2-dep{
  border-radius:var(--a2-r1);
  transition:background-color 260ms var(--a2-ease), box-shadow 260ms var(--a2-ease);
  transition-delay:var(--a2-d,0ms);
}
.a2-dep.a2-lit{ background:var(--a2-obs-50); box-shadow:inset 0 0 0 1px var(--a2-obs-100); }
tr.a2-dep{ box-shadow:none; }
tr.a2-dep.a2-lit{ background:var(--a2-obs-50); box-shadow:none; }
tr.a2-dep.a2-lit td{ border-top-color:var(--a2-obs-100); }

.a2-obs{ display:flex; gap:12px; align-items:flex-start; background:var(--a2-obs-50); border-radius:var(--a2-r2); padding:13px 16px; margin-bottom:18px; }
.a2-obs-mk{ flex:none; margin-top:2px; }
.a2-obs-body{ min-width:0; flex:1 1 auto; }
.a2-obs-txt{ font-size:14px; line-height:1.55; color:var(--a2-obs-700); max-width:27.5em; }
.a2-obs-txt strong{ font-weight:600; }
.a2-obs-when{ color:var(--a2-obs-600); }
.a2-obs-ext{ display:flex; align-items:flex-start; gap:6px; font-size:12.5px; color:var(--a2-obs-600); margin-top:7px; }
.a2-obs-ext .a2-ico{ margin-top:2px; }
.a2-obs-act{ display:flex; flex-wrap:wrap; gap:8px; margin-top:11px; }

.a2-diff{ background:var(--a2-surface); border:1px solid var(--a2-line); border-radius:var(--a2-r2); margin-bottom:18px; overflow:hidden; }
.a2-diff-hd{ display:flex; align-items:center; gap:10px; padding:12px 16px; border-bottom:1px solid var(--a2-line); }
.a2-diff-hd .a2-ico{ color:var(--a2-t3); }
.a2-diff-t{ font-size:13.5px; font-weight:600; }
.a2-diff-sub{ font-size:12.5px; color:var(--a2-t3); }
.a2-diff-cols{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
.a2-diff-col{ padding:14px 16px; min-width:0; }
.a2-diff-col + .a2-diff-col{ border-left:1px solid var(--a2-line); }
.a2-diff-k{ display:flex; align-items:center; gap:7px; font-size:11px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--a2-t3); margin-bottom:9px; }
.a2-diff-txt{ font-family:var(--a2-f-mono); font-size:12.5px; line-height:1.85; color:var(--a2-t2); white-space:pre-wrap; word-break:break-word; }
.a2-del{ background:var(--a2-sunken); color:var(--a2-t3); text-decoration:line-through; border-radius:var(--a2-r1); padding:0 3px; }
.a2-ins{ background:var(--a2-acc-50); color:var(--a2-acc-h); border-radius:var(--a2-r1); padding:0 3px; box-shadow:inset 0 0 0 1px var(--a2-acc-100); }
.a2-diff-ft{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; padding:11px 16px; border-top:1px solid var(--a2-line); font-size:12.5px; color:var(--a2-t3); }
.a2-diff-leg{ display:flex; align-items:center; gap:6px; }
.a2-diff-sw{ width:18px; height:12px; border-radius:var(--a2-r1); }

/* =========================================================================
   SCHEDE E GRIGLIA DI CONTENUTO
   ========================================================================= */
/* Due colonne: la principale prende lo spazio, quella di destra ha una
   misura da scheda (stati, libreria, copie). Con a2-grid-pari sono uguali:
   serve dove le due meta' pesano allo stesso modo (testo inviato / risposta). */
.a2-grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(320px,420px); gap:20px; align-items:start; }
.a2-grid-pari{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
.a2-stack{ display:flex; flex-direction:column; gap:18px; min-width:0; }
.a2-card{ background:var(--a2-surface); border:1px solid var(--a2-line); border-radius:var(--a2-r3); }
.a2-card-hd{ display:flex; align-items:center; gap:10px; padding:13px 18px; border-bottom:1px solid var(--a2-line); }
.a2-card-hd .a2-ico{ color:var(--a2-t3); }
.a2-card-t{ font-size:14px; font-weight:600; letter-spacing:-.008em; }
.a2-card-sub{ font-size:12.5px; color:var(--a2-t3); }
.a2-card-hd-end{ margin-left:auto; display:flex; align-items:center; gap:14px; }
.a2-card-bd{ padding:18px; }
.a2-card-ft{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:13px 18px; border-top:1px solid var(--a2-line); }

.a2-prompt-box{ background:var(--a2-sunken); border-radius:var(--a2-r2); padding:15px 17px; font-family:var(--a2-f-mono); font-size:13px; line-height:1.8; color:var(--a2-t2); white-space:pre-wrap; word-break:break-word; }
/* Il frammento {{Nome}} fuori dall'editor: l'etichetta bruna dell'asset
   (gli stessi colori del segno). Obsoleto: l'ambra degli stati, con l'icona. */
.a2-ph{ display:inline-flex; align-items:center; padding:1px 8px; border-radius:999px; font-family:var(--a2-f-mono); font-size:12px; font-weight:500; color:var(--a2-asset-testo); background:var(--a2-asset-tenue); box-shadow:inset 0 0 0 1px var(--a2-asset-bordo); }
.a2-ph-stale{ gap:5px; padding:1px 6px 1px 8px; background:var(--a2-obs-50); color:var(--a2-obs-700); box-shadow:inset 0 0 0 1px var(--a2-obs-100); }
.a2-prompt-meta{ display:flex; gap:16px; align-items:center; font-size:12.5px; color:var(--a2-t3); }
.a2-prompt-meta b{ font-weight:550; color:var(--a2-t2); }

.a2-scroll{ overflow-x:auto; }
.a2-tbl{ font-size:13.5px; }
.a2-tbl th{ text-align:left; font-weight:500; font-size:12px; color:var(--a2-t3); padding:0 14px 8px; white-space:nowrap; }
.a2-tbl td{ padding:11px 14px; border-top:1px solid var(--a2-line); vertical-align:middle; }
.a2-tbl .a2-r{ text-align:right; }
.a2-cell-soft{ color:var(--a2-t3); }
.a2-riv-nota{ font-size:12.5px; color:var(--a2-t3); border-left:3px solid var(--a2-riv-200); padding:4px 10px; margin:6px 0 0; font-weight:400; }
.a2-cell-num{ font-variant-numeric:tabular-nums; color:var(--a2-t2); }
.a2-asset-nm{ display:flex; align-items:center; gap:9px; font-weight:500; letter-spacing:-.005em; }
.a2-asset-ico{ width:26px; height:26px; flex:none; border-radius:var(--a2-r1); background:var(--a2-sunken); color:var(--a2-t2); display:grid; place-items:center; }

.a2-live{ display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:500; color:var(--a2-acc-h); background:var(--a2-acc-50); border-radius:var(--a2-rp); height:22px; padding:0 9px 0 7px; }
.a2-live-bars{ display:flex; align-items:flex-end; gap:1.5px; height:9px; }
.a2-live-bars i{ display:block; width:2px; background:var(--a2-acc); border-radius:1px; height:3px; }
.a2-live-bars i:nth-child(1){ animation:a2-flow 900ms var(--a2-ease) infinite; }
.a2-live-bars i:nth-child(2){ animation:a2-flow 900ms var(--a2-ease) 150ms infinite; }
.a2-live-bars i:nth-child(3){ animation:a2-flow 900ms var(--a2-ease) 300ms infinite; }
@keyframes a2-flow{ 0%,100%{ height:3px; } 50%{ height:9px; } }

.a2-out{ display:flex; flex-direction:column; gap:14px; }
.a2-out-p{ font-size:15.5px; line-height:1.68; color:var(--a2-t1); max-width:33em; white-space:pre-wrap; word-break:break-word; }
.a2-out-dep{ padding:10px 12px; margin:-10px -12px; }
.a2-dep-lab{ display:flex; align-items:center; gap:7px; font-size:12px; color:var(--a2-obs-600); margin-bottom:6px; }
.a2-caret{ display:inline-block; width:2px; height:1.05em; background:var(--a2-acc); border-radius:1px; vertical-align:-.18em; margin-left:2px; animation:a2-blink 1.05s steps(1,end) infinite; }
@keyframes a2-blink{ 0%,55%{ opacity:1; } 56%,100%{ opacity:0; } }
.a2-metrics{ display:flex; flex-wrap:wrap; gap:20px; }
.a2-metric{ font-size:12.5px; color:var(--a2-t3); }
.a2-metric b{ font-weight:550; color:var(--a2-t1); font-size:13px; }

.a2-cmp-row.a2-win{ background:var(--a2-acc-50); }
.a2-cmp-row.a2-win td{ border-top-color:var(--a2-acc-100); }
.a2-cmp-row.a2-win + tr td{ border-top-color:var(--a2-acc-100); }
.a2-cmp-name{ font-family:var(--a2-f-mono); font-size:12.5px; font-weight:500; }
.a2-judge{ display:flex; gap:12px; background:var(--a2-acc-50); border-radius:var(--a2-r2); padding:13px 15px; margin-top:14px; }
.a2-judge-ico{ color:var(--a2-acc); flex:none; margin-top:1px; }
.a2-judge-t{ font-size:12.5px; font-weight:600; color:var(--a2-acc-h); margin-bottom:3px; }
.a2-judge-p{ font-size:14px; line-height:1.6; color:var(--a2-acc-t2); max-width:33em; }

.a2-rail{ display:flex; flex-direction:column; gap:18px; position:sticky; top:0; }
.a2-model{
  display:grid; grid-template-columns:auto 1fr auto; gap:2px 11px;
  width:100%; text-align:left; cursor:pointer;
  padding:11px 14px; border:0; background:transparent;
  border-top:1px solid var(--a2-line);
  transition:background-color var(--a2-fast) var(--a2-ease);
}
.a2-model:first-of-type{ border-top:0; }
.a2-model:hover{ background:var(--a2-sunken); }
.a2-model:active{ background:var(--a2-line); }
.a2-model-mark{ grid-row:span 2; width:22px; height:22px; margin-top:2px; border-radius:var(--a2-rp); box-shadow:inset 0 0 0 1.5px var(--a2-line-str); display:grid; place-items:center; color:transparent; transition:box-shadow var(--a2-fast) var(--a2-ease), background-color var(--a2-fast) var(--a2-ease); }
.a2-model-prov{ font-size:13.5px; font-weight:500; }
.a2-model-id{ font-family:var(--a2-f-mono); font-size:12px; color:var(--a2-t3); }
.a2-model-cost{ grid-row:span 2; text-align:right; font-size:12px; color:var(--a2-t3); line-height:1.45; }
.a2-model-cost b{ font-weight:550; color:var(--a2-t2); font-variant-numeric:tabular-nums; }
.a2-model[aria-pressed="true"]{ background:var(--a2-acc-50); }
.a2-model[aria-pressed="true"] .a2-model-mark{ background:var(--a2-acc); box-shadow:none; color:#fff; }
.a2-model[aria-pressed="true"] .a2-model-prov{ color:var(--a2-acc-h); font-weight:600; }
.a2-model[aria-pressed="true"] .a2-model-id,
.a2-model[aria-pressed="true"] .a2-model-cost{ color:var(--a2-acc-t2); }
.a2-model[aria-pressed="true"] .a2-model-cost b{ color:var(--a2-acc-h); }
.a2-model:disabled{ cursor:not-allowed; background:transparent; }
.a2-model:disabled .a2-model-prov,
.a2-model:disabled .a2-model-id,
.a2-model:disabled .a2-model-cost,
.a2-model:disabled .a2-model-cost b{ color:var(--a2-t-off); }
.a2-model:disabled .a2-model-mark{ box-shadow:inset 0 0 0 1.5px var(--a2-line); }
.a2-model-why{ grid-column:2 / -1; display:flex; align-items:center; gap:5px; font-size:11.5px; color:var(--a2-t3); margin-top:4px; }

/* =========================================================================
   PULSANTI E CAMPI
   ========================================================================= */
.a2-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  height:34px; padding:0 13px;
  border:1px solid transparent; border-radius:var(--a2-r2);
  font-size:13.5px; font-weight:500; letter-spacing:-.005em;
  cursor:pointer; white-space:nowrap;
  transition:background-color var(--a2-fast) var(--a2-ease),
             border-color var(--a2-fast) var(--a2-ease),
             color var(--a2-fast) var(--a2-ease),
             transform 80ms var(--a2-ease);
}
.a2-btn:active,.a2-btn.a2-s-press{ transform:translateY(1px); }
/* La regola dei pulsanti (mockup 43): il colore dice che cosa fa il pulsante.
   1 primaria, una per riquadro; 2 le altre azioni, verde tenue; 3 annullare,
   tornare o guardare altrove, bianco; x togliere, rosso. Il bordo resta
   sempre: su una riga o una card il pulsante non si fonde con lo sfondo. */
.a2-btn-1{ background:var(--a2-acc); color:#fff; }
.a2-btn-1:hover:not(:disabled),.a2-btn-1.a2-s-hover{ background:var(--a2-acc-h); }
.a2-btn-1:active:not(:disabled),.a2-btn-1.a2-s-press{ background:var(--a2-acc-p); }
.a2-btn-2{ background:var(--a2-acc-50); color:var(--a2-acc); border-color:#A9D3CC; }
.a2-btn-2:hover:not(:disabled),.a2-btn-2.a2-s-hover{ background:var(--a2-acc-100); border-color:#86C2B8; }
.a2-btn-2:active:not(:disabled),.a2-btn-2.a2-s-press{ background:var(--a2-acc-100-h); }
.a2-btn-3{ background:var(--a2-surface); color:var(--a2-t1); border-color:var(--a2-line-str); }
.a2-btn-3:hover:not(:disabled),.a2-btn-3.a2-s-hover{ background:var(--a2-sunken); border-color:#C2CAD6; }
.a2-btn-3:active:not(:disabled),.a2-btn-3.a2-s-press{ background:var(--a2-line); }
.a2-btn-x{ background:var(--a2-surface); color:var(--a2-err-700); border-color:var(--a2-err-100); }
.a2-btn-x:hover:not(:disabled),.a2-btn-x.a2-s-hover{ background:var(--a2-err-50); color:var(--a2-err-700); border-color:#F4C7C2; }
.a2-btn-x:active:not(:disabled),.a2-btn-x.a2-s-press{ background:var(--a2-err-100); }
/* Spento: resta del suo colore, piu' tenue, e il motivo sta nel title. */
.a2-btn:disabled,.a2-btn.a2-s-dis{ opacity:.5; cursor:not-allowed; transform:none; }
.a2-btn[aria-busy="true"]:disabled{ opacity:1; }
.a2-btn[aria-busy="true"]{ cursor:progress; }
.a2-spin{ animation:a2-rot 900ms linear infinite; transform-origin:50% 50%; }
@keyframes a2-rot{ to{ transform:rotate(360deg); } }
.a2-btn-sm{ height:28px; padding:0 10px; font-size:12.5px; border-radius:var(--a2-r1); }
.a2-ibtn{
  display:inline-grid; place-items:center; width:30px; height:30px; padding:0;
  background:var(--a2-surface); color:var(--a2-t2);
  border:1px solid var(--a2-line-str); border-radius:var(--a2-r1); cursor:pointer;
  transition:background-color var(--a2-fast) var(--a2-ease), border-color var(--a2-fast) var(--a2-ease);
}
.a2-ibtn:hover{ background:var(--a2-sunken); border-color:#C2CAD6; }
.a2-ibtn:active{ background:var(--a2-line); }
.a2-ibtn:disabled{ background:var(--a2-sunken); color:var(--a2-t-off); border-color:transparent; cursor:not-allowed; }

.a2-field{ display:flex; flex-direction:column; gap:6px; }
.a2-label{ font-size:12.5px; font-weight:500; color:var(--a2-t2); }
.a2-hint{ font-size:12px; color:var(--a2-t3); max-width:32em; }
/* Campo "incassato": a riposo ha un riempimento grigio che lo stacca dalla
   scheda bianca, si schiarisce sotto il mouse e diventa bianco quando ha il
   fuoco. Tre stati leggibili senza bordi pesanti. Sul select si tocca solo
   background-color, perche' la freccia e' un background-image. */
.a2-input,.a2-sel{
  height:36px; padding:0 11px;
  background-color:var(--a2-field); border:1px solid var(--a2-line-str);
  border-radius:var(--a2-r2); font-size:13.5px;
  transition:border-color var(--a2-fast) var(--a2-ease), background-color var(--a2-fast) var(--a2-ease);
}
.a2-input::placeholder{ color:var(--a2-t3); }
.a2-input:hover,.a2-sel:hover{ background-color:var(--a2-field-h); border-color:#B9C2CF; }
.a2-input:focus,.a2-input.a2-s-focus,.a2-sel:focus{ background-color:var(--a2-surface); border-color:var(--a2-acc); outline:2px solid var(--a2-acc); outline-offset:2px; }
.a2-input.a2-s-err{ border-color:var(--a2-err-600); }
.a2-input.a2-s-err:focus,.a2-input.a2-s-err.a2-s-focus{ border-color:var(--a2-err-600); outline-color:var(--a2-err-600); }
.a2-input:disabled,.a2-sel:disabled{ background-color:var(--a2-sunken); border-color:var(--a2-line); color:var(--a2-t-off); cursor:not-allowed; }
.a2-err-msg{ display:flex; align-items:flex-start; gap:6px; font-size:12.5px; line-height:1.5; color:var(--a2-err-700); }
.a2-err-msg .a2-ico{ margin-top:2px; }
.a2-ok-msg{ display:flex; align-items:center; gap:6px; font-size:12.5px; color:var(--a2-acc-h); }
.a2-wait-msg{ display:flex; align-items:center; gap:6px; font-size:12.5px; color:var(--a2-t2); }
.a2-wait-msg .a2-ico{ color:var(--a2-acc); }
.a2-sel{
  -webkit-appearance:none; appearance:none; padding-right:30px; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23646D85' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 9.5 12 15l5.5-5.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 8px center; background-size:15px 15px;
}
.a2-sel:disabled{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2398A0B2' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 9.5 12 15l5.5-5.5'/%3E%3C/svg%3E");
}
.a2-srch{ position:relative; flex:1 1 250px; min-width:180px; }
.a2-srch .a2-ico{ position:absolute; left:11px; top:10px; color:var(--a2-t3); pointer-events:none; }
.a2-srch .a2-input{ width:100%; padding-left:33px; }

.a2-chk{
  -webkit-appearance:none; appearance:none;
  width:17px; height:17px; margin:0; flex:none;
  border:1px solid var(--a2-line-str); border-radius:5px;
  background:var(--a2-surface); cursor:pointer;
  background-repeat:no-repeat; background-position:center; background-size:12px 12px;
  transition:background-color var(--a2-fast) var(--a2-ease), border-color var(--a2-fast) var(--a2-ease);
}
.a2-chk:hover{ border-color:#B4BDCB; }
.a2-chk:checked{
  background-color:var(--a2-acc); border-color:var(--a2-acc);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5 9.5 17 19 7.5'/%3E%3C/svg%3E");
}
.a2-chk:indeterminate{
  background-color:var(--a2-acc); border-color:var(--a2-acc);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M6.5 12h11'/%3E%3C/svg%3E");
}
.a2-chk:disabled{ background-color:var(--a2-sunken); border-color:var(--a2-line); cursor:not-allowed; }
/* Un radio e' una scelta sola: tondo, con il punto, cosi' non si confonde con
   le caselle di spunta (quadrate, con la spunta) che ammettono piu' scelte. */
.a2-chk[type="radio"]{ border-radius:50%; }
.a2-chk[type="radio"]:checked{
  background-color:var(--a2-surface); border-color:var(--a2-acc); border-width:5px;
  background-image:none;
}
.a2-chk[type="radio"]:disabled:checked{ border-color:var(--a2-line-str); }

/* Interruttore */
.a2-sw{
  -webkit-appearance:none; appearance:none; position:relative;
  width:38px; height:22px; margin:0; flex:none;
  border:0; border-radius:var(--a2-rp);
  background:var(--a2-line-str); cursor:pointer;
  transition:background-color var(--a2-fast) var(--a2-ease);
}
.a2-sw::after{
  content:""; position:absolute; top:3px; left:3px;
  width:16px; height:16px; border-radius:50%;
  background:#fff; box-shadow:0 1px 2px rgba(16,22,34,.28);
  transition:transform var(--a2-med) var(--a2-ease);
}
.a2-sw:hover{ background:#C2CAD6; }
.a2-sw:checked{ background:var(--a2-acc); }
.a2-sw:checked:hover{ background:var(--a2-acc-h); }
.a2-sw:checked::after{ transform:translateX(16px); }
.a2-sw:disabled{ background:var(--a2-line); cursor:not-allowed; }
.a2-sw-row{ display:flex; align-items:center; gap:10px; }
.a2-sw-txt{ font-size:13.5px; color:var(--a2-t1); }

/* =========================================================================
   VISTA ELENCO
   ========================================================================= */
.a2-filters{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; padding:14px 18px; border-bottom:1px solid var(--a2-line); }
.a2-chip{ display:inline-flex; align-items:center; gap:6px; height:30px; padding:0 4px 0 11px; background:var(--a2-acc-50); color:var(--a2-acc-h); border-radius:var(--a2-rp); font-size:12.5px; font-weight:500; box-shadow:inset 0 0 0 1px var(--a2-acc-100); }
.a2-chip-x{ display:grid; place-items:center; width:22px; height:22px; padding:0; border:0; border-radius:var(--a2-rp); background:transparent; color:var(--a2-acc-h); cursor:pointer; transition:background-color var(--a2-fast) var(--a2-ease); }
.a2-chip-x:hover{ background:var(--a2-acc-100); }
.a2-chip-x:active{ background:#C4E2DD; }
.a2-bulk{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; padding:9px 18px; background:var(--a2-acc-50); border-bottom:1px solid var(--a2-acc-100); }
.a2-bulk-n{ font-size:13px; font-weight:600; color:var(--a2-acc-h); margin-right:6px; }
.a2-bulk-end{ margin-left:auto; }
.a2-lst{ font-size:13.5px; }
.a2-lst th{ text-align:left; font-weight:500; font-size:12px; color:var(--a2-t3); padding:10px 12px; white-space:nowrap; border-bottom:1px solid var(--a2-line); background:var(--a2-sunken); }
.a2-lst td{ padding:10px 12px; border-top:1px solid var(--a2-line); vertical-align:middle; }
.a2-lst tbody tr:first-child td{ border-top:0; }
.a2-lst .a2-r{ text-align:right; }
/* Colonne corte (numeri, stati, etichette): titolo e contenuto centrati,
   larghezza al contenuto. Il testo lungo resta a sinistra. */
.a2-lst th.a2-c, .a2-lst td.a2-c{ text-align:center; width:1%; white-space:nowrap; }
.a2-sort{ display:inline-flex; align-items:center; gap:5px; background:none; border:0; padding:0; cursor:pointer; font:inherit; color:var(--a2-acc-h); font-weight:600; }
.a2-sort .a2-ico{ color:var(--a2-acc); }
.a2-lst-row{ transition:background-color var(--a2-fast) var(--a2-ease); }
.a2-lst-row:hover{ background:var(--a2-sunken); }
.a2-lst-row.a2-sel-row{ background:var(--a2-acc-50); }
.a2-lst-row.a2-sel-row:hover{ background:#E6F2EF; }
.a2-lst-row.a2-sel-row td{ border-top-color:var(--a2-acc-100); }
.a2-lst-nm{ font-weight:500; letter-spacing:-.005em; }
.a2-lst-src{ font-family:var(--a2-f-mono); font-size:12px; color:var(--a2-t3); }
.a2-lst-busy td{ background:var(--a2-sunken); }
.a2-busy{ display:flex; align-items:center; gap:7px; font-size:12.5px; color:var(--a2-t2); }
.a2-busy .a2-ico{ color:var(--a2-acc); }
.a2-pag{ display:flex; flex-wrap:wrap; align-items:center; gap:12px; padding:11px 18px; border-top:1px solid var(--a2-line); font-size:12.5px; color:var(--a2-t2); }
.a2-pag-end{ margin-left:auto; display:flex; align-items:center; gap:8px; }
.a2-pag-sel{ height:30px; font-size:12.5px; padding:0 28px 0 9px; border-radius:var(--a2-r1); }

.a2-empty{ display:flex; flex-direction:column; align-items:center; text-align:center; padding:30px 22px; border-radius:var(--a2-r2); background:var(--a2-sunken); }
.a2-empty-ico{ color:var(--a2-t-off); margin-bottom:12px; }
.a2-empty-p{ font-size:14px; line-height:1.6; color:var(--a2-t2); max-width:32em; margin-bottom:16px; }
.a2-empty-act{ display:flex; gap:8px; flex-wrap:wrap; justify-content:center; }

/* =========================================================================
   IMPOSTAZIONI DEL PROFILO
   ========================================================================= */
.a2-formbar{
  position:sticky; top:0; z-index:15;
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  background:var(--a2-surface); border:1px solid var(--a2-line);
  border-radius:var(--a2-r2); padding:11px 16px; margin-bottom:16px;
}
.a2-formbar-t{ font-size:18px; font-weight:600; letter-spacing:-.018em; line-height:1.25; }
.a2-formbar-s{ font-size:12.5px; color:var(--a2-t2); }
.a2-formbar-end{ margin-left:auto; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.a2-unsaved{ display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:500; color:var(--a2-obs-700); background:var(--a2-obs-50); border-radius:var(--a2-rp); height:24px; padding:0 10px; }
.a2-unsaved .a2-dotp{ width:6px; height:6px; border-radius:50%; background:var(--a2-obs-500); flex:none; }

/* I moduli occupano tutta la larghezza disponibile: le schede si allargano,
   i campi mantengono la loro misura (a2-w-*), cosi' restano leggibili. */
.a2-set{ display:flex; flex-direction:column; gap:18px; }
.a2-sec-t{ font-size:15px; font-weight:600; letter-spacing:-.012em; }
.a2-sec-p{ font-size:12.5px; color:var(--a2-t2); margin-top:3px; max-width:32em; }
.a2-rows{ display:flex; flex-direction:column; }
.a2-row{ display:grid; grid-template-columns:200px minmax(0,1fr); gap:16px; align-items:start; padding:15px 18px; border-top:1px solid var(--a2-line); }
.a2-row:first-child{ border-top:0; }
.a2-row-k{ padding-top:8px; }
.a2-row-kt{ font-size:13.5px; font-weight:500; color:var(--a2-t1); }
.a2-row-kh{ font-size:12px; color:var(--a2-t3); margin-top:2px; }
.a2-row-v{ display:flex; flex-direction:column; gap:7px; min-width:0; }
.a2-inline{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.a2-w-sm{ width:110px; }
.a2-w-md{ width:230px; }
.a2-w-lg{ width:320px; max-width:100%; }

.a2-prv{ display:grid; grid-template-columns:170px minmax(0,1fr); gap:16px; align-items:start; padding:16px 18px; border-top:1px solid var(--a2-line); }
.a2-prv:first-of-type{ border-top:0; }
.a2-prv-h{ display:flex; align-items:center; gap:9px; padding-top:7px; }
.a2-prv-n{ font-size:13.5px; font-weight:600; }
.a2-prv-b{ display:flex; flex-direction:column; gap:11px; min-width:0; }
.a2-key{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.a2-key-box{ position:relative; flex:1 1 330px; min-width:200px; }
.a2-key-v{ width:100%; height:36px; padding:0 38px 0 11px; font-family:var(--a2-f-mono); font-size:12.5px; letter-spacing:.01em; }
.a2-key-eye{
  position:absolute; right:4px; top:4px;
  display:grid; place-items:center; width:28px; height:28px; padding:0;
  background:transparent; color:var(--a2-t3); border:0; border-radius:var(--a2-r1); cursor:pointer;
  transition:background-color var(--a2-fast) var(--a2-ease), color var(--a2-fast) var(--a2-ease);
}
.a2-key-eye:hover{ background:var(--a2-sunken); color:var(--a2-t1); }
.a2-key-eye:active{ background:var(--a2-line); }
.a2-prv-meta{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:12.5px; color:var(--a2-t3); }

.a2-credit{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; padding:16px 18px; }
.a2-credit-n{ font-size:19px; font-weight:600; letter-spacing:-.015em; font-variant-numeric:tabular-nums; }
.a2-credit-s{ font-size:12.5px; color:var(--a2-t2); }
.a2-bar{ flex:1 1 220px; min-width:160px; height:7px; border-radius:var(--a2-rp); background:var(--a2-line); overflow:hidden; }
.a2-bar i{ display:block; height:100%; width:62%; background:var(--a2-acc); border-radius:var(--a2-rp); }

.a2-danger{ background:var(--a2-err-50); border:1px solid var(--a2-err-100); border-radius:var(--a2-r3); padding:16px 18px; display:flex; gap:14px; align-items:flex-start; flex-wrap:wrap; }
.a2-danger-i{ color:var(--a2-err-600); flex:none; margin-top:2px; }
.a2-danger-b{ flex:1 1 320px; min-width:0; }
.a2-danger-t{ font-size:13.5px; font-weight:600; color:var(--a2-err-700); margin-bottom:4px; }
.a2-danger-p{ font-size:13px; line-height:1.55; color:#8A3A31; max-width:30em; }

/* =========================================================================
   RESPONSIVE
   ========================================================================= */
@media (max-width:1100px){
  .a2-grid{ grid-template-columns:minmax(0,1fr); }
  .a2-rail{ position:static; }
}
@media (max-width:900px){
  .a2-app{ grid-template-columns:minmax(0,1fr); }
  .a2-side{
    position:absolute; top:0; bottom:0; left:0; z-index:40; width:250px;
    transform:translateX(-100%);
    transition:transform var(--a2-med) var(--a2-ease);
    border-right:1px solid var(--a2-line);
  }
  .a2-app.a2-drawer .a2-side{ transform:none; box-shadow:var(--a2-lift-2); }
  .a2-burger{ display:grid; }
  .a2-diff-cols{ grid-template-columns:minmax(0,1fr); }
  .a2-diff-col + .a2-diff-col{ border-left:0; border-top:1px solid var(--a2-line); }
  .a2-prov{ position:static; }
}
@media (max-width:760px){
  .a2-session{ display:none; }
  .a2-row,.a2-prv{ grid-template-columns:minmax(0,1fr); gap:9px; }
  .a2-row-k,.a2-prv-h{ padding-top:0; }
}
@media (max-width:640px){
  .a2-page{ padding:18px 12px 40px; }
  .a2-content{ padding:14px 14px 36px; }
  .a2-topbar{ padding:0 12px; gap:10px; }
  .a2-h1{ font-size:20px; }
  .a2-head{ flex-direction:column; gap:12px; }
  .a2-head-act{ margin-left:0; }
  .a2-user-role,.a2-user-name{ display:none; }
  .a2-user{ padding-left:10px; }
  .a2-comp-val{ max-width:34vw; }
  .a2-card-hd{ flex-wrap:wrap; row-gap:4px; }
  .a2-card-hd-end{ margin-left:0; }
  .a2-card-bd{ padding:14px; }
  .a2-card-hd,.a2-card-ft,.a2-filters,.a2-bulk,.a2-pag,.a2-row,.a2-prv,.a2-credit{ padding-left:14px; padding-right:14px; }
  .a2-out-p{ font-size:15px; }
  .a2-menu{ min-width:min(280px,calc(100vw - 48px)); }
  .a2-sys-grid{ grid-template-columns:minmax(0,1fr); }
  .a2-prov{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
  .a2-prov-i{ padding:8px 12px; border-left:1px solid var(--a2-line); border-top:1px solid var(--a2-line); }
  .a2-prov-i:nth-child(odd){ border-left:0; }
  .a2-prov-i:nth-child(-n+2){ border-top:0; }
  .a2-prov-v{ white-space:normal; }
  .a2-bulk-end{ margin-left:0; }
  .a2-srch{ flex-basis:100%; }
  .a2-sel{ flex:1 1 140px; }
  .a2-formbar-end{ margin-left:0; width:100%; }
  .a2-w-lg,.a2-w-md{ width:100%; }
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    transition-delay:0ms !important;
    scroll-behavior:auto !important;
  }
  .a2-caret{ opacity:1; }
}

/* =========================================================================
   AGGIUNTE DELL'APPLICATIVO
   Regole che il riferimento non aveva perche' li' erano solo dimostrazioni.
   ========================================================================= */

/* Un link vestito da pulsante non si sottolinea. */
a.a2-btn, a.a2-btn:hover{ text-decoration:none; }

/* Una voce di menu che e' un pulsante (per esempio "Esci", che deve essere
   un POST): stesso aspetto del link. */
.a2-nav-btn{ width:100%; border:0; background:none; text-align:left; cursor:pointer; font:inherit; }
.a2-side-foot form{ display:block; }

/* Campi a tutta larghezza dentro una scheda o una riga di impostazioni. */
.a2-input.a2-w-full, .a2-sel.a2-w-full{ width:100%; }

/* Messaggio di esito in cima alla pagina, dopo un salvataggio. */
.a2-avviso{
  display:flex; align-items:flex-start; gap:10px;
  padding:11px 14px; margin-bottom:14px;
  border:1px solid var(--a2-line); border-radius:var(--a2-r2);
  background:var(--a2-sunken); font-size:13.5px; line-height:1.5;
}
.a2-avviso .a2-ico{ margin-top:2px; flex:none; }
.a2-avviso-ok{ background:var(--a2-acc-50); border-color:var(--a2-acc-100); color:var(--a2-acc-h); }
.a2-avviso-err{ background:var(--a2-err-50); border-color:var(--a2-err-100); color:var(--a2-err-700); }
.a2-avviso-attesa{ background:var(--a2-obs-50); border-color:var(--a2-obs-100); color:var(--a2-obs-700); }

/* Riga di tabella cliccabile: il nome e' il link, tutta la riga risponde. */
.a2-lst-row a.a2-lst-nm{ color:var(--a2-t1); text-decoration:none; }
.a2-lst-row a.a2-lst-nm:hover{ color:var(--a2-acc-h); text-decoration:underline; text-underline-offset:3px; }

/* Azioni in fondo a una riga di tabella. */
.a2-lst-act{ display:flex; gap:6px; justify-content:flex-end; }
.a2-lst-act form{ display:flex; gap:6px; margin:0; }
.a2-ico-su{ transform:rotate(180deg); }

/* Indicatori della dashboard. */
.a2-kpis{ display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:14px; }
.a2-kpi{ background:var(--a2-surface); border:1px solid var(--a2-line); border-radius:var(--a2-r3); padding:16px 18px; }
.a2-kpi-n{ font-size:26px; font-weight:600; letter-spacing:-.02em; line-height:1.1; }
.a2-kpi-l{ font-size:12.5px; color:var(--a2-t3); margin-top:4px; }

/* Piede della barra: impersonazione e diritti. */
.a2-imp{ padding:4px 10px 8px; }
.a2-imp-riga{ display:flex; gap:6px; align-items:center; }
.a2-imp-sel{ flex:1 1 auto; min-width:0; height:30px; font-size:12.5px; padding:0 26px 0 9px; border-radius:var(--a2-r1); }
.a2-imp-avviso{
  display:flex; flex-wrap:wrap; align-items:center; gap:6px 8px;
  margin:0 10px 8px; padding:8px 10px;
  background:var(--a2-obs-50); border:1px solid var(--a2-obs-100); border-radius:var(--a2-r2);
  color:var(--a2-obs-700); font-size:12.5px; line-height:1.4;
}
.a2-imp-avviso .a2-ico{ color:var(--a2-obs-600); }
.a2-imp-avviso form{ flex-basis:100%; }
.a2-diritti summary{ list-style:none; }
.a2-diritti summary::-webkit-details-marker{ display:none; }
.a2-diritti[open] summary{ background:var(--a2-sunken); }
.a2-diritti-elenco{ margin:4px 10px 8px; padding:8px 10px; background:var(--a2-sunken); border-radius:var(--a2-r2); font-size:12px; max-height:220px; overflow:auto; }
.a2-diritti-elenco li{ display:flex; justify-content:space-between; gap:8px; padding:3px 0; border-top:1px solid var(--a2-line); }
.a2-diritti-elenco li:first-child{ border-top:0; }
.a2-diritti-modulo{ color:var(--a2-t1); font-weight:500; }
.a2-diritti-perm{ color:var(--a2-t2); text-align:right; }
.a2-diritti-nessuno{ color:var(--a2-t-off); }

/* Aree di testo e schede larghe. */
.a2-area{ height:auto; min-height:64px; padding:9px 11px; line-height:1.5; resize:vertical; }
.a2-area-mono{ font-family:var(--a2-f-mono); font-size:13px; line-height:1.7; }
.a2-lst-gruppo td{ padding:9px 12px 5px; font-size:11px; font-weight:600; letter-spacing:.07em; text-transform:uppercase; color:var(--a2-t3); background:var(--a2-sunken); border-top:1px solid var(--a2-line); }
.a2-lst-sub{ font-size:12px; color:var(--a2-t3); margin-top:2px; max-width:48em; }
.a2-card-hd-end .a2-tag{ margin-left:auto; }
.a2-elenco-semplice{ font-size:13.5px; line-height:1.7; padding-left:18px; list-style:disc; }

/* Schede (azienda e prodotti) sopra la compilazione dei contenuti. */
.a2-schede{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:16px; }
.a2-scheda-tab{
  display:inline-flex; align-items:center; gap:7px; height:32px; padding:0 12px;
  border:1px solid var(--a2-line-str); border-radius:var(--a2-rp);
  background:var(--a2-surface); color:var(--a2-t2); font-size:13px; font-weight:500;
  text-decoration:none; transition:background-color var(--a2-fast) var(--a2-ease), border-color var(--a2-fast) var(--a2-ease);
}
.a2-scheda-tab:hover{ background:var(--a2-sunken); color:var(--a2-t1); }
.a2-scheda-tab[aria-current="page"]{ background:var(--a2-acc-50); border-color:var(--a2-acc-100); color:var(--a2-acc-h); }
.a2-scheda-tab .a2-ico{ color:var(--a2-t3); }
.a2-scheda-tab[aria-current="page"] .a2-ico{ color:var(--a2-acc); }
.a2-scheda-n{ font-family:var(--a2-f-mono); font-size:11.5px; color:var(--a2-t3); }
.a2-contenuto .a2-card-hd{ flex-wrap:wrap; }
.a2-contenuto textarea{ font-size:14px; line-height:1.6; }

/* Risposta del modello in streaming. */
.a2-risposta{ min-height:220px; max-height:60vh; overflow:auto; margin:0; white-space:pre-wrap; word-break:break-word; font-family:var(--a2-f-sans); font-size:14px; line-height:1.6; color:var(--a2-t1); }
.a2-risposta:empty::before{ content:"La risposta comparira' qui."; color:var(--a2-t-off); }
.a2-testo-errore{ color:var(--a2-err-700); }
.a2-testo-obs{ color:var(--a2-obs-700); }

/* Griglia dei permessi: caselle centrate. */
.a2-griglia-permessi .a2-chk{ vertical-align:middle; }

/* Selettore con ricerca. */
.a2-combo{ position:relative; }
.a2-combo-input{ width:100%; }
/* L'elenco e' largo quanto le voci (mai meno del campo, mai oltre la
   finestra): i nomi lunghi, come i modelli di fal.ai, stanno su una riga. */
.a2-combo-lista{
  position:absolute; left:0; top:calc(100% + 4px); z-index:30;
  min-width:100%; width:max-content; max-width:min(40rem, calc(100vw - 32px));
  max-height:320px; overflow-x:hidden; overflow-y:auto; padding:4px;
  background:var(--a2-surface); border:1px solid var(--a2-line); border-radius:var(--a2-r2);
  box-shadow:var(--a2-lift-2);
}
.a2-combo-lista li{
  padding:7px 10px; border-radius:var(--a2-r1); font-size:13px; cursor:pointer;
  display:flex; flex-direction:column; gap:1px; overflow-wrap:anywhere;
}
.a2-combo-lista li small{ font-size:11.5px; color:var(--a2-t3); }
.a2-combo-lista li:hover, .a2-combo-lista li.a2-combo-attiva{ background:var(--a2-sunken); }
.a2-combo-lista li.a2-combo-scelta{ color:var(--a2-acc-h); font-weight:550; }
.a2-combo-lista li.a2-combo-vuota{ color:var(--a2-t3); font-style:italic; }
.a2-combo-lista li[hidden]{ display:none; }

/* Menu dell'utente in alto a destra. */
.a2-utente-menu{ position:relative; }
.a2-user-btn{ background:none; border:0; border-left:1px solid var(--a2-line); border-radius:0; padding:4px 0 4px 14px; cursor:pointer; text-align:left; font:inherit; color:inherit; }
.a2-user-btn .a2-ico{ color:var(--a2-t3); transition:transform var(--a2-med) var(--a2-ease); }
.a2-user-btn[aria-expanded="true"] .a2-ico{ transform:rotate(180deg); }
.a2-user-btn:focus-visible{ outline:2px solid var(--a2-acc); outline-offset:2px; border-radius:var(--a2-r1); }
.a2-menu-destra{ left:auto; right:0; width:300px; }
.a2-menu-testa{ padding:8px 10px 10px; border-bottom:1px solid var(--a2-line); margin-bottom:4px; }
.a2-menu-testa-nome{ font-size:13.5px; font-weight:600; }
.a2-menu-testa-sub{ font-size:12px; color:var(--a2-t3); margin-top:2px; }
.a2-testo-ambra{ color:var(--a2-obs-700); }
.a2-menu form{ display:block; }
.a2-menu-item[type="submit"], .a2-menu-item[type="button"]{ width:100%; border:0; background:none; font:inherit; text-align:left; cursor:pointer; }
@media (max-width:640px){ .a2-user-txt{ display:none; } }

/* Finestra dei diritti. */
.a2-dialogo{ border:0; border-radius:var(--a2-r3); padding:0; width:min(560px, calc(100vw - 32px)); box-shadow:var(--a2-lift-2); color:var(--a2-t1); }
.a2-dialogo::backdrop{ background:var(--a2-velo, rgba(16,22,34,.34)); }
.a2-dialogo-testa{ display:flex; align-items:flex-start; gap:12px; padding:16px 18px 12px; border-bottom:1px solid var(--a2-line); }
.a2-dialogo-testa > div:first-child{ flex:1 1 auto; }
.a2-dialogo-titolo{ font-size:16px; font-weight:600; letter-spacing:-.012em; }
.a2-dialogo-sub{ font-size:12.5px; color:var(--a2-t3); margin-top:3px; }
.a2-diritti-tab{ width:100%; }
.a2-diritti-tab .a2-c{ width:84px; }
.a2-diritti-tab th.a2-c{ font-size:11px; text-transform:uppercase; letter-spacing:.05em; }
.a2-diritti-si{ color:var(--a2-acc); display:inline-block; }
.a2-diritti-no{ color:var(--a2-t-off); }
.a2-diritti-off .a2-lst-nm{ color:var(--a2-t-off); }
.a2-menu-destra .a2-menu-item .a2-ico{ margin-left:0; opacity:1; color:var(--a2-t3); }
.a2-combo-sopra .a2-combo-lista{ top:auto; bottom:calc(100% + 4px); }
.a2-combo-destra .a2-combo-lista{ left:auto; right:0; }

/* Etichetta dell'ambito di un prompt: tinta categorica + icona + testo. */
.a2-ambito{ gap:5px; background:var(--a2-sunken); color:var(--a2-t1); box-shadow:inset 0 0 0 1.5px var(--amb, var(--a2-line)); }
.a2-ambito .a2-ico{ color:var(--amb, var(--a2-t3)); opacity:1; }
.a2-ambito-azienda{  --amb:var(--a2-amb-azienda); }
.a2-ambito-prodotto{ --amb:var(--a2-amb-prodotto); }
.a2-ambito-servizio{ --amb:var(--a2-amb-servizio); }
.a2-ambito-risorsa{  --amb:var(--a2-amb-risorsa); }
.a2-ambito-generico{ --amb:var(--a2-amb-generico); color:var(--a2-t2); }
/* Marcatore del tipo (prompt / asset): angoli vivi, non pillola, per non
   confondersi con le etichette di ambito e di stato che gli stanno accanto. */
.a2-tipo{
  display:inline-flex; align-items:center; gap:4px; vertical-align:middle;
  height:20px; padding:0 6px 0 5px; border-radius:4px;
  font-size:11.5px; font-weight:600; line-height:1; letter-spacing:.01em; white-space:nowrap;
  color:var(--tipo); background:var(--a2-surface); box-shadow:inset 0 0 0 1.5px var(--tipo);
}
.a2-tipo .a2-ico{ color:var(--tipo); opacity:1; }
.a2-tipo-prompt{ --tipo:var(--a2-tipo-prompt); }
.a2-tipo-asset{  --tipo:var(--a2-tipo-asset); }
/* Con il formato esplicito il colore dice il formato, non l'elemento. */
.a2-tipo-fmt-testo{      --tipo:var(--a2-fmt-testo);      background:var(--a2-fmt-testo-bg); }
.a2-tipo-fmt-immagine{   --tipo:var(--a2-fmt-immagine);   background:var(--a2-fmt-immagine-bg); }
.a2-tipo-fmt-powerpoint{ --tipo:var(--a2-fmt-powerpoint); background:var(--a2-fmt-powerpoint-bg); }
.a2-tipo-fmt-word{       --tipo:var(--a2-fmt-word);       background:var(--a2-fmt-word-bg); }
.a2-tipo-fmt-excel{      --tipo:var(--a2-fmt-excel);      background:var(--a2-fmt-excel-bg); }
.a2-tipo-fmt-html{       --tipo:var(--a2-fmt-html);       background:var(--a2-fmt-html-bg); }
.a2-tipo-fmt-pdf{        --tipo:var(--a2-fmt-pdf);        background:var(--a2-fmt-pdf-bg); }
.a2-tipo-fmt-grafica{    --tipo:var(--a2-fmt-grafica);    background:var(--a2-fmt-grafica-bg); }
.a2-tipo-ico{ width:20px; padding:0; justify-content:center; }
.a2-lst-nm .a2-tipo, .a2-catena-riga .a2-tipo, .a2-card-hd .a2-tipo{ margin-right:6px; }
.a2-card-hd .a2-tipo{ margin-right:0; }

/* Incoerenza: il bordo resta dell'ambito, l'avviso e' l'anello ambra esterno e il puntino. */
.a2-ambito-incoerente{ outline:2px solid var(--a2-obs-300); outline-offset:1px; }
.a2-ambito-incoerente .a2-tag-dot{ background:var(--a2-obs-500); opacity:1; }

/* ---------------------------------------------------------------------
   Editor dei prompt: area di testo con catalogo degli asset a lato e menu
   di completamento al "{{". Il catalogo riusa i colori d'ambito (--amb)
   per l'icona di ogni asset.
   --------------------------------------------------------------------- */
.a2-editor{ display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:14px; align-items:start; }
@media (max-width: 980px){ .a2-editor{ grid-template-columns:1fr; } }
/* La scheda del prompt usa tutta la larghezza: testo lungo e catalogo a lato;
   la colonna di destra (libreria, copie) ha spazio per le sue tabelle. */
.a2-set-pieno{ max-width:none; }
.a2-editor-testo{ position:relative; display:flex; flex-direction:column; gap:7px; min-width:0; }

.a2-cat{ display:flex; flex-direction:column; background:var(--a2-sunken); border:1px solid var(--a2-line); border-radius:var(--a2-r2); max-height:460px; }
.a2-cat-azienda{ margin:0; padding:0 12px 8px; font-size:11.5px; line-height:1.45; color:var(--a2-t3); }
.a2-cat-azienda strong{ color:var(--a2-t2); font-weight:600; }
/* Stato di compilazione accanto al nome: puntino verde (pieno), ambra
   (vuoto), ambra con frazione (parziale). Il testo intero e' nel title. */
.a2-cat-nome{ display:flex; align-items:center; gap:6px; min-width:0; }
.a2-cat-nome-t{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.a2-cat-stato{ display:inline-flex; align-items:center; gap:3px; flex:none; font-size:11px; font-weight:600; font-variant-numeric:tabular-nums; }
.a2-cat-punto{ display:inline-block; width:7px; height:7px; border-radius:50%; }
.a2-cat-stato-pieno .a2-cat-punto{ background:var(--a2-acc); }
.a2-cat-stato-vuoto .a2-cat-punto{ background:var(--a2-obs-500); }
.a2-cat-stato-parziale{ color:var(--a2-obs-700); }
.a2-cat-stato-parziale .a2-cat-punto{ background:linear-gradient(90deg, var(--a2-obs-500) 50%, var(--a2-obs-100) 50%); box-shadow:inset 0 0 0 1px var(--a2-obs-500); }
.a2-lst-act-cell{ text-align:right; white-space:nowrap; }
.a2-cat-hd{ display:flex; align-items:baseline; justify-content:space-between; gap:8px; padding:10px 12px 6px; }
.a2-cat-t{ font-size:12.5px; font-weight:600; color:var(--a2-t2); }
.a2-cat-n{ font-size:11.5px; color:var(--a2-t3); }
.a2-cat-n b{ font-weight:600; color:var(--a2-t2); }
.a2-cat-cerca{ position:relative; padding:0 10px 8px; }
.a2-cat-cerca .a2-ico{ position:absolute; left:19px; top:9px; color:var(--a2-t3); pointer-events:none; }
.a2-cat-input{ width:100%; padding-left:30px; height:32px; font-size:13px; }
.a2-cat-lista{ list-style:none; margin:0; padding:4px 6px 6px; overflow:auto; flex:1; min-height:0; border-top:1px solid var(--a2-line); }
.a2-cat-lista li[hidden]{ display:none; }
.a2-cat-voce{
  display:flex; align-items:center; gap:8px; padding:6px 8px; border-radius:var(--a2-r1);
  font-size:13px; cursor:pointer; color:var(--a2-t1);
}
.a2-cat-voce:hover{ background:var(--a2-surface); box-shadow:inset 0 0 0 1px var(--a2-line); }
.a2-cat-inerte{ cursor:default; }
.a2-cat-inerte:hover{ background:transparent; box-shadow:none; }
/* Il segno dell'asset resta accanto al nome, sopra la riga piccola dell'ambito. */
.a2-cat-voce .a2-segno{ align-self:flex-start; margin-top:1px; }
.a2-cat-corpo{ display:flex; flex-direction:column; gap:1px; min-width:0; flex:1; }
.a2-cat-corpo small{ font-size:11px; color:var(--a2-t3); }
.a2-cat-fuori .a2-cat-nome{ color:var(--a2-t3); }
.a2-cat-fuori small{ color:var(--a2-obs-700); }
.a2-cat-spunta{ flex:none; color:var(--a2-acc); visibility:hidden; }
.a2-cat-citato .a2-cat-spunta{ visibility:visible; }
.a2-cat-citato .a2-cat-nome{ font-weight:550; }
.a2-cat-vuota{ padding:10px 8px; font-size:12.5px; color:var(--a2-t3); font-style:italic; }
.a2-cat-hint{ margin:0; padding:8px 12px 10px; font-size:11.5px; line-height:1.5; color:var(--a2-t3); border-top:1px solid var(--a2-line); }
.a2-cat-hint code{ font-family:var(--a2-f-mono); font-size:11px; background:var(--a2-surface); padding:1px 4px; border-radius:3px; box-shadow:inset 0 0 0 1px var(--a2-line); }

/* Evidenziazione dei segnaposto nel testo: una copia dietro il textarea
   porta i colori, il textarea sopra e' trasparente. Le due devono avere
   gli stessi caratteri, margini e interlinea, altrimenti i colori si
   spostano rispetto alle parole. Il riempimento "campo incassato" passa
   alla copia, cosi' gli stati riposo / mouse / fuoco restano quelli. */
.a2-evid{ position:relative; }
.a2-evid .a2-evid-fondo{
  position:absolute; left:0; top:0; width:100%; box-sizing:border-box; overflow:hidden;
  margin:0; padding:9px 11px; border:1px solid transparent; border-radius:var(--a2-r2);
  font-family:var(--a2-f-mono); font-size:13px; line-height:1.7;
  white-space:pre-wrap; overflow-wrap:break-word; word-break:break-word;
  color:transparent; background-color:var(--a2-field); pointer-events:none;
  transition:background-color var(--a2-fast) var(--a2-ease);
}
.a2-evid:hover .a2-evid-fondo{ background-color:var(--a2-field-h); }
.a2-evid:focus-within .a2-evid-fondo{ background-color:var(--a2-surface); }
.a2-evid > textarea[data-editor-testo]{ position:relative; z-index:1; background-color:transparent !important; }
.a2-evid:has(> textarea:disabled) .a2-evid-fondo{ background-color:var(--a2-sunken); }
.a2-evid-seg{ color:transparent; border-radius:8px; padding:1px 0; box-decoration-break:clone; -webkit-box-decoration-break:clone; }
/* Ogni asset e' un'etichetta; il fondo dice lo stato: verde pastello se
   compilato, rosso pastello se vuoto o parziale; se l'asset non esiste,
   anche la riga rossa sotto. Niente bordi ne' padding orizzontale: la copia
   deve avere la stessa larghezza del textarea. */
.a2-evid-pieno{  background:#D3F1DA; }
.a2-evid-vuoto{  background:#FAD9D5; }
.a2-evid-manca{  background:#FAD9D5; box-shadow:inset 0 -2px 0 var(--a2-err-600); }
.a2-evid-neutro{ background:var(--a2-line); }

/* Menu di completamento: posizionato dallo script sotto il cursore. */
.a2-sugg{
  position:absolute; z-index:40; list-style:none; margin:0; padding:4px; width:340px; max-width:100%;
  max-height:280px; overflow:auto;
  background:var(--a2-surface); border:1px solid var(--a2-line); border-radius:var(--a2-r2); box-shadow:var(--a2-lift-2);
}
.a2-sugg .a2-cat-voce:hover, .a2-sugg .a2-sugg-attiva{ background:var(--a2-sunken); box-shadow:inset 0 0 0 1px var(--a2-line); }
.a2-sugg-specchio{
  position:absolute; top:0; left:0; visibility:hidden; pointer-events:none;
  white-space:pre-wrap; word-wrap:break-word; overflow-wrap:break-word;
}

/* ---------------------------------------------------------------------
   Percorso di lavoro su un'azienda: setup da compilare, passi eseguibili,
   bloccati, fatti.
   --------------------------------------------------------------------- */
.a2-percorso-bar{ display:flex; align-items:center; gap:12px; margin-top:6px; }
.a2-percorso-bar .a2-bar{ flex:1 1 auto; max-width:520px; }
.a2-percorso-pct{ font-size:12.5px; font-weight:600; color:var(--a2-t2); font-variant-numeric:tabular-nums; }
.a2-percorso-sub{ display:flex; flex-wrap:wrap; gap:4px 14px; margin-top:2px; font-size:12px; color:var(--a2-t3); }
.a2-percorso-sub strong{ color:var(--a2-t2); font-weight:550; }
.a2-percorso-manca{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px; }
.a2-percorso-manca li{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; font-size:12.5px; }
.a2-lnk{ color:var(--a2-acc-h); font-weight:500; text-decoration:none; }
.a2-lnk:hover{ text-decoration:underline; }
button.a2-lnk{ background:none; border:0; padding:0; cursor:pointer; }
button.a2-lnk:disabled{ opacity:.5; cursor:default; text-decoration:none; }
.a2-det > summary{ list-style:none; cursor:pointer; }
.a2-det > summary::-webkit-details-marker{ display:none; }
.a2-det:not([open]) > summary{ border-bottom:0; }
.a2-det-sum .a2-card-t::after{ content:" BE"; color:var(--a2-t3); font-size:11px; }
.a2-det[open] .a2-det-sum .a2-card-t::after{ content:" B4"; }

/* Catena a ritroso da un obiettivo (pagina Esegui): ogni asset mancante
   con la via per ottenerlo; i prerequisiti generati rientrano sotto. */
.a2-catena-card{ margin-bottom:18px; }
.a2-catena{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; }
.a2-catena .a2-catena{ margin:8px 0 0 14px; padding-left:14px; border-left:2px solid var(--a2-line); }
.a2-catena-riga{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; font-size:13px; }
.a2-catena-riga strong{ font-weight:550; }

/* ---------------------------------------------------------------------
   Ricerca globale (Ctrl+K): bottone in barra e finestra con la lista.
   --------------------------------------------------------------------- */
.a2-cerca-btn{
  display:inline-flex; align-items:center; gap:8px; height:36px; padding:0 10px 0 11px;
  background-color:var(--a2-field); border:1px solid var(--a2-line-str); border-radius:var(--a2-r2);
  color:var(--a2-t3); font:inherit; font-size:13px; cursor:pointer;
  transition:background-color var(--a2-fast) var(--a2-ease), border-color var(--a2-fast) var(--a2-ease);
}
.a2-cerca-btn:hover{ background-color:var(--a2-field-h); border-color:#B9C2CF; color:var(--a2-t2); }
.a2-cerca-btn:focus-visible{ outline:2px solid var(--a2-acc); outline-offset:2px; }
.a2-cerca-btn-t{ min-width:110px; text-align:left; }
.a2-kbd{
  display:inline-block; padding:1px 5px; font-family:var(--a2-f-mono); font-size:10.5px; line-height:1.4;
  color:var(--a2-t3); background:var(--a2-surface); border:1px solid var(--a2-line); border-bottom-width:2px; border-radius:4px;
}
@media (max-width: 760px){ .a2-cerca-btn-t, .a2-cerca-btn .a2-kbd{ display:none; } .a2-cerca-btn{ padding:0 9px; } }

.a2-cerca{ width:min(640px, calc(100vw - 32px)); margin-top:min(12vh, 90px); }
.a2-cerca-campo{ display:flex; align-items:center; gap:10px; padding:10px 12px 10px 16px; border-bottom:1px solid var(--a2-line); }
.a2-cerca-campo > .a2-ico{ color:var(--a2-t3); flex:none; }
.a2-cerca-input{ flex:1 1 auto; border:0; outline:0; background:transparent; font:inherit; font-size:15px; color:var(--a2-t1); height:32px; min-width:0; }
.a2-cerca-input::placeholder{ color:var(--a2-t3); }
.a2-cerca-lista{ list-style:none; margin:0; padding:6px; max-height:min(52vh, 460px); overflow:auto; }
.a2-cerca-gruppo{ padding:8px 10px 4px; font-size:11px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--a2-t3); }
.a2-cerca-voce{ display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:var(--a2-r1); cursor:pointer; font-size:13.5px; }
.a2-cerca-attiva{ background:var(--a2-sunken); box-shadow:inset 0 0 0 1px var(--a2-line); }
.a2-cerca-ico{ flex:none; color:var(--amb, var(--a2-t3)); }
.a2-cerca-voce .a2-tipo{ flex:none; }
.a2-cerca-corpo{ display:flex; flex-direction:column; gap:1px; min-width:0; flex:1; }
.a2-cerca-nome{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.a2-cerca-corpo small{ font-size:11.5px; color:var(--a2-t3); }
.a2-cerca-azione{ flex:none; font-size:11.5px; color:var(--a2-t3); visibility:hidden; }
.a2-cerca-attiva .a2-cerca-azione{ visibility:visible; color:var(--a2-acc-h); font-weight:500; }
.a2-cerca-vuota{ padding:18px 12px; text-align:center; font-size:13px; color:var(--a2-t3); }
.a2-cerca-piede{ display:flex; flex-wrap:wrap; gap:14px; padding:8px 14px; border-top:1px solid var(--a2-line); font-size:11.5px; color:var(--a2-t3); }
.a2-cerca-piede .a2-kbd{ margin-right:2px; }

.a2-percorso-motivi{ font-size:12.5px; color:var(--a2-obs-700); }

/* Aggiunta rapida di prodotti, servizi e risorse in fondo al loro elenco. */
.a2-hub-aggiungi{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.a2-hub-aggiungi .a2-input{ flex:1 1 200px; min-width:0; }

/* ---------------------------------------------------------------------
   Scheda azienda, sul modello di Azienda.aspx: schede Azienda / Prodotti /
   Servizi / Risorse; nella scheda, le categorie chiuse con il conteggio
   compilati/totali; aprendone una, la tabella degli asset con tipo,
   stato del prompt, presenza e "Dettagli".
   --------------------------------------------------------------------- */
.a2-c{ text-align:center; }
.a2-scheda-az-tabs{ margin:0; padding:10px 14px 0; border-bottom:1px solid var(--a2-line); }
.a2-scheda-az-sotto{ border-top:1px solid var(--a2-line); }
.a2-lst-row-attiva td{ background:var(--a2-acc-50); }
.a2-catg-elenco{ display:flex; flex-direction:column; }
.a2-catg-riga{ border-top:1px solid var(--a2-line); }
.a2-catg-riga:first-child{ border-top:0; }
.a2-catg-sum{
  list-style:none; cursor:pointer; display:flex; align-items:center; gap:12px; padding:11px 16px;
  font-size:13px; user-select:none;
}
.a2-catg-sum::-webkit-details-marker{ display:none; }
.a2-catg-sum:hover{ background:var(--a2-sunken); }
.a2-catg-riga[open] > .a2-catg-sum{ background:var(--a2-sunken); border-bottom:1px solid var(--a2-line); }
.a2-catg-ico{ flex:none; width:26px; height:26px; border-radius:var(--a2-r1); background:var(--a2-surface); box-shadow:inset 0 0 0 1px var(--a2-line); display:inline-flex; align-items:center; justify-content:center; color:var(--a2-t3); }
.a2-catg-nome{ font-weight:650; letter-spacing:.04em; text-transform:uppercase; font-size:12px; color:var(--a2-t1); flex:none; }
.a2-catg-desc{ color:var(--a2-t3); flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.a2-catg-sum .a2-catg-desc:empty{ display:none; }
.a2-catg-bar{ flex:none; width:120px; height:5px; border-radius:3px; background:var(--a2-line); overflow:hidden; margin-left:auto; }
.a2-catg-bar i{ display:block; height:100%; background:var(--a2-acc); border-radius:3px; }
.a2-catg-badge{ flex:none; min-width:44px; text-align:center; padding:2px 8px; border-radius:var(--a2-rp); font-size:12px; font-weight:650; font-variant-numeric:tabular-nums; }
.a2-catg-badge-piena{ background:var(--a2-acc-100); color:var(--a2-acc-h); }
.a2-catg-badge-parziale{ background:var(--a2-obs-100); color:var(--a2-obs-700); }
.a2-catg-badge-vuota{ background:var(--a2-err-100); color:var(--a2-err-700); }
.a2-catg-chev{ flex:none; color:var(--a2-t3); transition:transform var(--a2-fast) var(--a2-ease); }
.a2-catg-riga[open] .a2-catg-chev{ transform:rotate(180deg); }
.a2-catg-tab th.a2-c, .a2-catg-tab td.a2-c{ width:1%; white-space:nowrap; }
.a2-catg-descr{ font-size:12.5px; max-width:44em; }
/* Segni di stato geometrici: disco pieno con segno bianco; il vuoto e' un
   anello. Il colore e' lo stato. */
.a2-seg{ width:18px; height:18px; vertical-align:middle; stroke-linecap:round; stroke-linejoin:round; }
.a2-seg-ok{ color:var(--a2-acc); }
.a2-seg-obs{ color:var(--a2-obs-500); }
.a2-seg-err{ color:var(--a2-err-600); }
.a2-seg-no{ color:var(--a2-t3); }
.a2-seg-na{ color:var(--a2-line-str); }

/* Finestra dell'anagrafica: corpo, piede e riga di eliminazione. */
.a2-dialogo-corpo{ padding:16px 18px; }
.a2-dialogo-piede{ display:flex; justify-content:flex-end; gap:8px; padding:12px 18px 16px; }
.a2-dialogo-pericolo{ display:flex; align-items:center; gap:14px; padding:14px 18px; border-top:1px solid var(--a2-line); background:var(--a2-err-50); }
.a2-dialogo-pericolo > div{ flex:1 1 auto; }
/* La conferma di un invio (data-conferma, telaio.js): la domanda, poi Annulla e Conferma. */
.a2-conferma{ width:min(480px, calc(100vw - 32px)); }
.a2-conferma-testo{ margin:0; font-size:14px; line-height:1.55; color:var(--a2-t2); }
.a2-dialogo-pericolo .a2-danger-p{ margin:2px 0 0; }
.a2-hub-anagrafica{ display:flex; flex-direction:column; gap:8px; }
.a2-hub-anagrafica .a2-hint{ margin:0; }

/* ---------------------------------------------------------------------
   Etichette: chip negli elenchi, nuvola sopra l'elenco, campo a chip nelle
   schede. Il colore e' neutro: un'etichetta non e' uno stato.
   --------------------------------------------------------------------- */
.a2-chips{ display:inline-flex; flex-wrap:wrap; gap:4px; margin-left:8px; vertical-align:middle; }
.a2-chip{
  display:inline-flex; align-items:center; gap:5px; height:20px; padding:0 8px; border-radius:var(--a2-rp);
  background:var(--a2-sunken); color:var(--a2-t2); border:1px solid var(--a2-line); font:inherit; font-size:11.5px; cursor:pointer;
  transition:background-color var(--a2-fast) var(--a2-ease), border-color var(--a2-fast) var(--a2-ease);
}
.a2-chip::before{ content:"#"; color:var(--a2-t3); }
.a2-chip:hover{ border-color:var(--a2-line-str); background:var(--a2-surface); }
.a2-chip-attivo, .a2-chip[aria-pressed="true"]{ background:var(--a2-acc-50); border-color:var(--a2-acc-100); color:var(--a2-acc-h); }
.a2-chip-attivo::before, .a2-chip[aria-pressed="true"]::before{ color:var(--a2-acc-h); }
.a2-chip-n{ font-family:var(--a2-f-mono); font-size:10.5px; color:var(--a2-t3); }
.a2-nuvola{ display:flex; flex-wrap:wrap; align-items:center; gap:6px; padding:8px 14px 10px; border-bottom:1px solid var(--a2-line); }
.a2-nuvola-t{ font-size:11px; font-weight:600; letter-spacing:.07em; text-transform:uppercase; color:var(--a2-t3); margin-right:4px; }
.a2-chip-nuvola{ height:24px; font-size:12px; }
.a2-nuvola-azzera{ font-size:12px; margin-left:6px; background:none; border:0; cursor:pointer; }

.a2-etic{ position:relative; display:flex; flex-direction:column; gap:6px; }
.a2-etic-campo{
  display:flex; flex-wrap:wrap; align-items:center; gap:6px; min-height:36px; padding:5px 8px;
  background-color:var(--a2-field); border:1px solid var(--a2-line-str); border-radius:var(--a2-r2);
}
.a2-etic-campo:focus-within{ background-color:var(--a2-surface); border-color:var(--a2-acc); outline:2px solid var(--a2-acc); outline-offset:2px; }
.a2-etic-chips{ display:contents; }
.a2-etic-chip{ display:inline-flex; align-items:center; gap:4px; height:24px; padding:0 4px 0 9px; border-radius:var(--a2-rp); background:var(--a2-surface); border:1px solid var(--a2-line-str); font-size:12.5px; color:var(--a2-t1); }
.a2-etic-chip::before{ content:"#"; color:var(--a2-t3); }
.a2-etic-x{ border:0; background:none; font:inherit; font-size:15px; line-height:1; color:var(--a2-t3); cursor:pointer; padding:0 4px; border-radius:50%; }
.a2-etic-x:hover{ color:var(--a2-err-600); }
.a2-etic-input{ flex:1 1 140px; min-width:100px; border:0; outline:0; background:transparent; font:inherit; font-size:13.5px; height:24px; }
.a2-etic-input::placeholder{ color:var(--a2-t3); }
.a2-etic-sugg{
  position:absolute; z-index:30; left:0; right:0; top:100%; margin:4px 0 0; padding:4px; list-style:none;
  background:var(--a2-surface); border:1px solid var(--a2-line); border-radius:var(--a2-r2); box-shadow:var(--a2-lift-2); max-height:220px; overflow:auto;
}
.a2-etic-attivo .a2-etic-sugg{ top:calc(100% - 34px); }
.a2-etic-voce{ padding:6px 10px; border-radius:var(--a2-r1); font-size:13px; cursor:pointer; }
.a2-etic-voce::before{ content:"# "; color:var(--a2-t3); }
.a2-etic-voce:hover, .a2-etic-attiva{ background:var(--a2-sunken); }
.a2-etic-azioni{ display:flex; align-items:center; gap:10px; }
.a2-etic-ia-stato{ font-size:12px; color:var(--a2-t3); }
.a2-nuvola-vuota{ font-size:12.5px; color:var(--a2-t3); }

/* Pagina di un asset per l'azienda. */
.a2-ph-h1{ font-size:20px; padding:2px 12px; }
.a2-contenuto-avviso{ background:var(--a2-obs-50); color:var(--a2-obs-700); font-size:13px; border-bottom:1px solid var(--a2-obs-100); }
.a2-card-hd-end .a2-lnk{ font-size:12.5px; margin-right:10px; }

/* ---------------------------------------------------------------------
   Confronto libreria / profilo (erede di Confronto.aspx): due colonne,
   una riga per campo diverso, il testo del prompt riga per riga.
   --------------------------------------------------------------------- */
.a2-tag-lnk{ text-decoration:none; cursor:pointer; }
.a2-tag-lnk:hover{ box-shadow:inset 0 0 0 1px currentColor; }
.a2-cnf-freccia{ color:var(--a2-t3); margin:0 4px; }
.a2-cnf-azioni-bd{ display:grid; grid-template-columns:repeat(auto-fit, minmax(300px, 1fr)); gap:18px; }
.a2-cnf-azione{ display:flex; align-items:flex-start; justify-content:space-between; gap:14px; }
.a2-cnf-azione-t{ display:flex; align-items:center; gap:8px; font-weight:600; font-size:13.5px; margin-bottom:4px; }
.a2-cnf{ display:flex; flex-direction:column; }
.a2-cnf-int{ display:grid; grid-template-columns:1fr 1fr; padding:8px 14px; font-size:11px; font-weight:600; letter-spacing:.07em; text-transform:uppercase; color:var(--a2-t3); background:var(--a2-sunken); border-bottom:1px solid var(--a2-line); }
.a2-cnf-riga{ display:grid; grid-template-columns:1fr 1fr; border-top:1px solid var(--a2-line); }
.a2-cnf-riga:first-of-type{ border-top:0; }
.a2-cnf-cella{ padding:10px 14px; font-size:13px; min-width:0; overflow-wrap:anywhere; position:relative; }
.a2-cnf-cella + .a2-cnf-cella{ border-left:1px solid var(--a2-line); }
.a2-cnf-campo{ display:block; font-size:11px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--a2-t3); margin-bottom:3px; }
.a2-cnf-sx{ background:var(--a2-err-50); }
.a2-cnf-dx{ background:var(--a2-acc-50); }
.a2-cnf-assente{ color:var(--a2-t3); font-style:italic; background:repeating-linear-gradient(45deg, transparent 0 7px, rgba(16,22,34,.035) 7px 8px); }
.a2-cnf-uguale{ color:var(--a2-t3); }
.a2-cnf-asset .a2-cnf-cella{ display:flex; flex-direction:column; gap:4px; align-items:flex-start; }
.a2-cnf-meta{ font-size:12px; color:var(--a2-t3); }
.a2-cnf-stato{ position:absolute; right:12px; top:10px; }
.a2-cnf-testo{ border-top:1px solid var(--a2-line); }
.a2-cnf-diff{ width:100%; border-collapse:collapse; table-layout:fixed; font-family:var(--a2-f-mono); font-size:12.5px; line-height:1.55; }
.a2-cnf-diff td{ padding:1px 14px; white-space:pre-wrap; overflow-wrap:anywhere; vertical-align:top; width:50%; }
.a2-cnf-diff td + td{ border-left:1px solid var(--a2-line); }
.a2-cnf-uguale td{ color:var(--a2-t2); }
.a2-cnf-solosinistra td:first-child{ background:var(--a2-err-50); color:var(--a2-err-700); }
.a2-cnf-solodestra td:last-child{ background:var(--a2-acc-50); color:var(--a2-acc-h); }

/* Matrice dei permessi: i personalizzati stanno in una colonna, con la
   loro etichetta, perche' cambiano da modulo a modulo. */
.a2-th-nota{ font-weight:400; text-transform:none; letter-spacing:0; color:var(--a2-t3); margin-left:4px; }
.a2-perm-altri{ display:flex; flex-wrap:wrap; gap:6px 14px; }
.a2-perm-altro{ display:inline-flex; align-items:center; gap:6px; font-size:12.5px; white-space:nowrap; }

/* ---------------------------------------------------------------------
   Vista di lettura dei contenuti generati (Markdown reso in HTML). La
   tipografia e' quella dell'app, ridotta: un piano marketing con dieci
   sezioni deve stare in una card, non sembrare una pagina web. */
.a2-md{ font-size:14px; line-height:1.6; color:var(--a2-t1); word-break:break-word; }
.a2-md > :first-child{ margin-top:0; }
.a2-md > :last-child{ margin-bottom:0; }
.a2-md p{ margin:0 0 10px; }
.a2-md h1,.a2-md h2,.a2-md h3,.a2-md h4,.a2-md h5,.a2-md h6{ font-weight:600; line-height:1.3; margin:18px 0 8px; color:var(--a2-t1); letter-spacing:-.01em; }
.a2-md h1{ font-size:18px; } .a2-md h2{ font-size:16px; } .a2-md h3{ font-size:14.5px; } .a2-md h4,.a2-md h5,.a2-md h6{ font-size:14px; }
.a2-md ul,.a2-md ol{ margin:0 0 10px; padding-left:22px; }
.a2-md li{ margin:2px 0; }
.a2-md li > p{ margin:0; }
.a2-md ul{ list-style:disc; } .a2-md ol{ list-style:decimal; }
.a2-md blockquote{ margin:0 0 10px; padding:4px 12px; border-left:3px solid var(--a2-line-str); color:var(--a2-t2); }
.a2-md code{ font-family:var(--a2-f-mono); font-size:12.5px; background:var(--a2-sunken); padding:1px 5px; border-radius:4px; }
.a2-md pre{ margin:0 0 10px; padding:10px 12px; background:var(--a2-sunken); border-radius:var(--a2-r1); overflow:auto; }
.a2-md pre code{ background:transparent; padding:0; }
.a2-md hr{ border:0; border-top:1px solid var(--a2-line); margin:14px 0; }
.a2-md a{ color:var(--a2-acc); text-decoration:underline; text-underline-offset:2px; }
.a2-md table{ border-collapse:collapse; margin:0 0 12px; font-size:13px; max-width:100%; display:block; overflow-x:auto; }
.a2-md th,.a2-md td{ border:1px solid var(--a2-line); padding:6px 10px; text-align:left; vertical-align:top; }
.a2-md th{ background:var(--a2-sunken); font-weight:600; color:var(--a2-t2); font-size:12px; }
.a2-md input[type="checkbox"]{ margin-right:6px; }
.a2-md:empty::before{ content:"Niente da leggere."; color:var(--a2-t-off); }

/* Barra sopra un contenuto: linguette Leggi / Modifica a sinistra, copie a destra. */
.a2-md-barra{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.a2-md-barra .a2-md-copie{ margin-left:auto; display:flex; gap:6px; }
.a2-md-tab{
  display:inline-flex; align-items:center; gap:6px; height:28px; padding:0 10px;
  border:1px solid transparent; border-radius:var(--a2-r1); background:transparent;
  font:inherit; font-size:12.5px; font-weight:500; color:var(--a2-t2); cursor:pointer;
}
.a2-md-tab:hover{ background:var(--a2-sunken); color:var(--a2-t1); }
.a2-md-tab[aria-current="page"]{ background:var(--a2-acc-50); border-color:var(--a2-acc-100); color:var(--a2-acc-h); }
.a2-risposta.a2-md{ white-space:normal; font-family:var(--a2-f-sans); }
.a2-risposta.a2-md:empty::before{ content:"La risposta comparira' qui."; }

/* ---------------------------------------------------------------------
   "Costruisci con l'IA" nell'editor dei prompt: riquadro sopra il testo,
   con la proposta in due colonne (testo | nome, asset innestati, mancanti). */
.a2-costr{ border:1px solid var(--a2-acc-100); background:var(--a2-acc-50); border-radius:var(--a2-r2); padding:12px 14px; margin-bottom:10px; display:flex; flex-direction:column; gap:10px; }
.a2-costr-hd{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:12.5px; }
.a2-costr-hd .a2-ico{ color:var(--a2-acc); }
.a2-costr-t{ font-weight:600; color:var(--a2-acc-h); }
.a2-costr-campi{ display:flex; flex-direction:column; gap:8px; }
.a2-costr-riga{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.a2-costr-riga .a2-label{ margin:0; }
.a2-costr-proposta{ border-top:1px solid var(--a2-acc-100); padding-top:10px; }
.a2-costr-colonne{ display:grid; grid-template-columns:minmax(0,3fr) minmax(0,2fr); gap:14px; }
@media (max-width:1100px){ .a2-costr-colonne{ grid-template-columns:1fr; } }
.a2-costr-sub{ font-size:11.5px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--a2-t3); margin:8px 0 4px; }
.a2-costr-sub:first-child{ margin-top:0; }
.a2-costr-pre{ margin:0; padding:10px 12px; background:var(--a2-surface); border:1px solid var(--a2-line); border-radius:var(--a2-r1); font-family:var(--a2-f-mono); font-size:12.5px; line-height:1.55; white-space:pre-wrap; word-break:break-word; max-height:360px; overflow:auto; }
.a2-costr-azioni{ display:flex; gap:6px; flex-wrap:wrap; margin-top:8px; }
.a2-costr-lista{ margin:0; padding-left:18px; font-size:13px; line-height:1.5; }
.a2-costr-lista li{ margin:2px 0; }
.a2-costr-note p{ margin:0 0 4px; font-size:13px; }

/* Confronto: la data di ciascun lato nell'intestazione e la marca "piu' recente"
   su quello cambiato per ultimo, quando i due non sono allineati. */
.a2-cnf-int > span{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.a2-cnf-data{ font-weight:500; letter-spacing:0; text-transform:none; color:var(--a2-t3); }
.a2-cnf-recente{ text-transform:none; letter-spacing:0; height:18px; padding:0 7px; font-size:11px; }

/* ---------------------------------------------------------------------
   Asset immagine: la scelta del tipo nel modulo, la miniatura nelle righe,
   la pagina del contenuto con anteprima e caricamento. */
.a2-scelta-tipo{ display:flex; gap:18px; flex-wrap:wrap; }
.a2-scelta-tipo .a2-sw-txt{ display:inline-flex; align-items:center; gap:5px; }
.a2-scelta-tipo > .a2-err-msg{ flex-basis:100%; }
.a2-scelta-tipo > .a2-err-msg:empty{ display:none; }
.a2-mini{ width:24px; height:24px; border-radius:4px; object-fit:cover; border:1px solid var(--a2-line); background:var(--a2-sunken); display:block; }
.a2-mini-l{ width:40px; height:40px; border-radius:6px; }
.a2-img-vuota{ width:24px; height:24px; border-radius:4px; display:grid; place-items:center; color:var(--a2-t3); background:var(--a2-sunken); border:1px dashed var(--a2-line-str); }
.a2-img-scheda{ display:flex; flex-direction:column; gap:12px; }
.a2-img-anteprima{ display:flex; align-items:center; justify-content:center; background:var(--a2-sunken); border:1px solid var(--a2-line); border-radius:var(--a2-r2); min-height:220px; padding:12px; }
/* width/height nell'HTML danno le proporzioni prima del caricamento; auto le fa rispettare quando max-width o max-height riducono l'immagine. */
.a2-img-anteprima img{ width:auto; height:auto; max-width:100%; max-height:60vh; border-radius:4px; background:#fff; }
/* La grafica: un visual a misura fissa, con la sua ombra, sopra i suoi testi. */
.a2-grafica-anteprima{ margin-bottom:10px; }

/* Il piede della risposta: il salvataggio a sinistra, "Continua" a destra.
   Fra una continuazione e l'altra, un segno che dice dove riprende. */
.a2-risposta-ft{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
/* Nel flusso, la base su cui si costruisce il file: si sceglie li'. */
.a2-flusso-base{ border-style:dashed; }
/* L'identita' visiva: i colori del brand come campioni, non come prosa. */
.a2-identita{ display:flex; flex-direction:column; gap:10px; }
.a2-identita-campioni{ display:flex; gap:14px; flex-wrap:wrap; font-size:12.5px; color:var(--a2-t2); }
.a2-identita-col{ display:inline-flex; align-items:center; gap:6px; }
.a2-identita-quad{ width:15px; height:15px; border-radius:3px; border:1px solid var(--a2-line-str); }
.a2-identita-prop{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.a2-identita-font summary{ cursor:pointer; }
.a2-identita-elenco{ display:flex; flex-direction:column; gap:4px; margin-top:6px; font-size:12.5px; color:var(--a2-t2); }
.a2-sel-sm{ height:26px; padding:0 22px 0 8px; font-size:12px; background-position:right 6px center; }
.a2-risposta-ft > form:last-child{ margin-left:auto; }
.a2-risposta-salva{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.a2-seguito{ display:flex; align-items:center; gap:8px; margin:14px 0; color:var(--a2-t-off); font-size:11.5px; }
.a2-seguito::before, .a2-seguito::after{ content:""; flex:1; height:1px; background:var(--a2-line); }
.a2-grafica-anteprima img{ box-shadow:0 1px 3px rgba(0,0,0,.18); height:auto; }
.a2-img-meta{ display:flex; gap:14px; flex-wrap:wrap; font-size:12.5px; color:var(--a2-t3); }
.a2-img-carica{ display:flex; flex-direction:column; gap:10px; padding:18px; border:2px dashed var(--a2-line-str); border-radius:var(--a2-r2); background:var(--a2-surface); align-items:center; text-align:center; transition:border-color var(--a2-fast) var(--a2-ease), background-color var(--a2-fast) var(--a2-ease); }
.a2-img-carica.a2-sopra{ border-color:var(--a2-acc); background:var(--a2-acc-50); }
.a2-img-carica input[type="file"]{ font-size:13px; }
.a2-img-carica-t{ font-weight:500; }
.a2-img-carica-h{ font-size:12.5px; color:var(--a2-t3); }
.a2-img-azioni{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.a2-file-mini-word{ color:var(--a2-fmt-word); }
.a2-file-mini-excel{ color:var(--a2-fmt-excel); }
.a2-file-mini-html{ color:var(--a2-fmt-html); }
.a2-file-mini-pdf{ color:var(--a2-fmt-pdf); }
.a2-file-mini-grafica{ color:var(--a2-fmt-grafica); }
.a2-html-anteprima{ width:100%; height:520px; border:1px solid var(--a2-line); border-radius:var(--a2-r2); background:#fff; }
.a2-pdf-anteprima{ height:640px; }

/* ---------------------------------------------------------------------
   Prompt-immagine in Esegui: allegati, controlli di generazione, galleria
   delle varianti e modulo di salvataggio. */
.a2-allegati{ display:flex; flex-direction:column; gap:8px; border-top:1px solid var(--a2-line); }
.a2-allegati-t{ font-size:12.5px; font-weight:500; color:var(--a2-t2); display:inline-flex; align-items:center; gap:5px; }
.a2-allegato{ display:flex; align-items:center; gap:10px; cursor:pointer; }
.a2-allegato-n{ display:flex; flex-direction:column; gap:1px; font-size:13px; }
.a2-allegato-n small{ font-size:11.5px; }
.a2-genera-ft{ flex-wrap:wrap; gap:8px; }
.a2-galleria{ display:grid; grid-template-columns:repeat(auto-fill, minmax(200px, 1fr)); gap:12px; min-height:120px; }
.a2-galleria > .a2-hint, .a2-galleria > .a2-err-msg{ grid-column:1 / -1; }
.a2-variante{ margin:0; border:2px solid var(--a2-line); border-radius:var(--a2-r2); background:var(--a2-sunken); overflow:hidden; cursor:pointer; transition:border-color var(--a2-fast) var(--a2-ease); }
.a2-variante:hover{ border-color:var(--a2-line-str); }
.a2-variante.a2-scelta{ border-color:var(--a2-acc); box-shadow:0 0 0 3px var(--a2-acc-50); }
.a2-variante img{ display:block; width:100%; aspect-ratio:1; object-fit:contain; background:#fff; }
.a2-variante figcaption{ display:flex; align-items:center; gap:6px; padding:6px 8px; font-size:12.5px; color:var(--a2-t3); }
.a2-variante figcaption span{ flex:1; }
.a2-salva-img{ flex-wrap:wrap; gap:8px; }

/* ---------------------------------------------------------------------
   Formati file oltre le immagini (PowerPoint): il segno del file nelle
   righe, il contorno delle slide, e in Esegui il flusso "entrano -> esce"
   che dice i tipi prima di leggere. */
.a2-file-mini{ width:24px; height:24px; border-radius:4px; display:inline-grid; place-items:center; color:var(--a2-fmt-powerpoint); background:var(--a2-sunken); border:1px solid var(--a2-line); }
.a2-file-mini.a2-mini-l{ width:40px; height:40px; border-radius:6px; }
.a2-file-mini-obs{ border-color:var(--a2-obs, #b45309); }
.a2-ppt-meta{ display:flex; gap:12px; flex-wrap:wrap; align-items:center; font-size:12.5px; color:var(--a2-t3); }
.a2-slide-elenco{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px; }
.a2-slide-voce{ display:flex; gap:10px; padding:8px 10px; border:1px solid var(--a2-line); border-radius:var(--a2-r2); background:var(--a2-surface); }
.a2-slide-num{ flex:0 0 28px; height:28px; border-radius:6px; display:grid; place-items:center; font-size:12px; font-weight:600; color:var(--a2-t2); background:var(--a2-sunken); font-variant-numeric:tabular-nums; }
.a2-slide-corpo{ min-width:0; display:flex; flex-direction:column; gap:3px; }
.a2-slide-titolo{ font-weight:500; }
.a2-slide-testi{ margin:0; padding-left:18px; font-size:13px; color:var(--a2-t2); }
.a2-flusso{ display:flex; align-items:flex-start; gap:12px; flex-wrap:wrap; padding:10px 14px; margin-bottom:14px; border:1px solid var(--a2-line); border-radius:var(--a2-r2); background:var(--a2-surface); }
.a2-flusso-gruppo{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.a2-flusso-t{ font-size:11px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--a2-t3); }
.a2-flusso-voce{ display:inline-flex; align-items:center; gap:5px; font-size:13px; padding:2px 6px 2px 2px; border-radius:6px; background:var(--a2-sunken); }
.a2-flusso-voce .a2-flusso-voce{ background:var(--a2-surface); }
.a2-flusso-manca{ color:var(--a2-t3); }
.a2-flusso-uscita{ background:transparent; padding:0; gap:8px; }
.a2-flusso-freccia{ color:var(--a2-t3); font-size:18px; line-height:1; padding-top:2px; }

/* Colonna Categoria negli elenchi, come nell'originale: una tabella piatta ordinata per categoria. */
.a2-cell-cat{ white-space:nowrap; font-size:12.5px; }

/* La guida alla catena: il riquadro che accompagna la rigenerazione, un
   passo alla volta (Pages/Shared/_Guida.cshtml). */
.a2-guida{ border-color:var(--a2-acc-100); box-shadow:inset 3px 0 0 var(--a2-acc); margin-bottom:16px; }
.a2-guida .a2-card-hd > .a2-ico{ color:var(--a2-acc); }
.a2-guida-corpo{ display:flex; flex-direction:column; gap:12px; }
.a2-guida-passi{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; align-items:center; gap:6px; }
.a2-guida-passo{ display:inline-flex; align-items:center; gap:6px; padding:4px 10px 4px 7px; border:1px solid var(--a2-line); border-radius:999px; background:var(--a2-surface); color:var(--a2-t2); font-size:var(--a2-fs-meta); max-width:100%; }
.a2-guida-nome{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.a2-guida-n{ flex:none; display:inline-grid; place-items:center; width:18px; height:18px; border-radius:50%; background:var(--a2-sunken); color:var(--a2-t2); font-size:11px; font-weight:650; }
.a2-guida-passo[data-stato="adesso"]{ background:var(--a2-acc-50); border-color:var(--a2-acc-100); color:var(--a2-acc-h); font-weight:600; }
.a2-guida-passo[data-stato="adesso"] .a2-guida-n{ background:var(--a2-acc); color:#fff; }
.a2-guida-passo[data-stato="fatto"]{ color:var(--a2-acc-h); }
.a2-guida-passo[data-stato="fatto"] .a2-guida-n{ background:var(--a2-acc-100); color:var(--a2-acc-h); }
.a2-guida-passo[data-stato="saltato"]{ color:var(--a2-t3); border-style:dashed; }
.a2-guida-passo[data-stato="saltato"] .a2-guida-nome{ text-decoration:line-through; }
.a2-guida-freccia{ color:var(--a2-t-off); width:14px; height:14px; }
.a2-guida-perche{ display:flex; gap:8px; align-items:flex-start; color:var(--a2-t2); }
.a2-guida-perche .a2-ico{ color:var(--a2-obs-600); flex:none; margin-top:2px; }
.a2-guida-azioni{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.a2-guida-prossimo{ display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px; padding:12px 14px; border-radius:var(--a2-r2); background:var(--a2-acc-50); border:1px solid var(--a2-acc-100); }
.a2-guida-prossimo-t{ font-weight:600; color:var(--a2-t1); }
.a2-guida-prossimo-s{ color:var(--a2-t2); font-size:var(--a2-fs-meta); }
.a2-guida-prossimo .a2-guida-azioni{ margin-left:auto; }
.a2-lst td.a2-guida-ord{ width:1%; white-space:nowrap; color:var(--a2-t3); font-variant-numeric:tabular-nums; }

/* La scelta del template su cui costruire un contenuto: si sceglie leggendo
   lo scopo, non solo il nome (Asset/Modifica). */
.a2-scelta-base{ display:flex; flex-direction:column; gap:6px; }
.a2-base-opz{ display:flex; gap:10px; align-items:flex-start; padding:10px 12px; border:1px solid var(--a2-line); border-radius:var(--a2-r2); background:var(--a2-surface); cursor:pointer; }
.a2-base-opz[hidden]{ display:none; }
.a2-base-opz:has(input:checked){ border-color:var(--a2-acc-100); background:var(--a2-acc-50); }
.a2-base-opz .a2-chk{ margin-top:2px; }
.a2-base-nome{ display:block; color:var(--a2-t1); font-weight:600; }
/* Una variante, dopo la sua madre: rientrata, con il ramo. */
.a2-base-opz.a2-base-var{ margin-left:22px; }
.a2-base-ramo{ color:var(--a2-t3); font-weight:400; margin-right:4px; }
.a2-base-scopo{ display:block; color:var(--a2-t2); font-size:var(--a2-fs-meta); margin-top:2px; }

/* Scopo e regole di un template, in testa alla sua pagina; il testo del
   prompt che genera un contenuto, da leggere in "Come si ottiene". */
.a2-template-regole{ margin-bottom:16px; box-shadow:inset 3px 0 0 var(--a2-acc); }
.a2-det-prompt{ margin-top:8px; }
.a2-det-prompt > summary{ cursor:pointer; color:var(--a2-acc-h); font-size:var(--a2-fs-meta); }
.a2-prompt-testo{ margin:8px 0 0; padding:10px 12px; max-height:320px; overflow:auto; white-space:pre-wrap; word-break:break-word; background:var(--a2-sunken); border-radius:var(--a2-r2); font-family:var(--a2-f-mono); font-size:12px; line-height:1.5; color:var(--a2-t1); }

/* Il brand system di un'azienda (Aziende/Brand): fondamenta, declinazioni
   (i template, con lo scopo e cio' che ci poggia), contenuti scoperti. */
.a2-bs-sez{ display:flex; align-items:baseline; flex-wrap:wrap; gap:4px 10px; margin:18px 2px 10px; }
.a2-bs-sez:first-child{ margin-top:2px; }
.a2-bs-sez-t{ font-size:15px; font-weight:650; color:var(--a2-t1); }
.a2-bs-sez-s{ color:var(--a2-t3); font-size:var(--a2-fs-meta); }
.a2-bs-fond{ display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:12px; }
.a2-bs-fond .a2-card{ margin:0; }
.a2-bs-logo{ height:28px; max-width:100%; object-fit:contain; display:block; }
.a2-bs-sw{ display:flex; gap:6px; align-items:center; flex-wrap:wrap; }
.a2-bs-sw i{ width:22px; height:22px; border-radius:6px; box-shadow:inset 0 0 0 1px rgba(0,0,0,.12); display:inline-block; }
.a2-bs-font{ margin-left:4px; font-weight:600; color:var(--a2-t1); }
.a2-bs-estratto{ color:var(--a2-t2); }
.a2-bs-formato{ display:flex; align-items:center; gap:10px; padding:10px 16px; background:var(--a2-sunken); border-top:1px solid var(--a2-line); }
.a2-bs-formato:first-child{ border-top:0; border-radius:var(--a2-r3) var(--a2-r3) 0 0; }
.a2-bs-decl{ display:grid; grid-template-columns:120px minmax(0,1fr) auto; gap:14px; align-items:start; padding:14px 16px; border-top:1px solid var(--a2-line); }
.a2-bs-anteprima{ width:120px; aspect-ratio:4/3; border-radius:var(--a2-r2); border:1px solid var(--a2-line); background:var(--a2-sunken); overflow:hidden; display:grid; place-items:center; color:var(--a2-t3); }
.a2-bs-anteprima.quadrata{ width:90px; aspect-ratio:1; justify-self:center; }
.a2-bs-anteprima img{ width:100%; height:100%; object-fit:cover; }
.a2-bs-anteprima-testo{ font-size:9.5px; line-height:1.3; padding:6px; color:var(--a2-t2); overflow:hidden; align-self:start; }
.a2-bs-nome{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.a2-bs-scopo{ margin:4px 0 8px; color:var(--a2-t1); }
.a2-bs-scopo-k{ color:var(--a2-t3); font-size:var(--a2-fs-meta); margin-right:4px; }
.a2-bs-usi{ display:flex; flex-wrap:wrap; gap:6px; align-items:center; color:var(--a2-t3); font-size:var(--a2-fs-meta); }
.a2-bs-uso{ display:inline-flex; align-items:center; gap:5px; padding:2px 8px; border-radius:999px; background:var(--a2-sunken); color:var(--a2-t2); text-decoration:none; }
.a2-bs-uso:hover{ background:var(--a2-line); color:var(--a2-t1); }
@media (max-width: 640px){
  .a2-bs-decl{ grid-template-columns:1fr; }
  .a2-bs-anteprima, .a2-bs-anteprima.quadrata{ justify-self:start; }
}
.a2-bs-nome .a2-lst-nm{ color:var(--a2-t1); text-decoration:none; font-weight:600; }
.a2-bs-nome .a2-lst-nm:hover{ color:var(--a2-acc-h); }

/* ======================================================================
   Lo spazio dell'azienda: Panoramica e Crea
   ====================================================================== */
.a2-2col{ display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); gap:18px; align-items:start; }
@media (max-width: 1000px){ .a2-2col{ grid-template-columns:minmax(0,1fr); } }
.a2-testo-acc{ color:var(--a2-acc); }

.a2-kpi .a2-bar{ margin-top:10px; height:6px; min-width:0; }
.a2-kpi .a2-bar3{ width:100%; margin-top:10px; }

.a2-rapido{ display:inline-flex; align-items:center; gap:8px; padding:7px 12px; border:1px solid var(--a2-line); border-radius:var(--a2-r2); background:var(--a2-surface); color:var(--a2-t1); text-decoration:none; font-weight:500; font-size:13px; }
.a2-rapido:hover{ background:var(--a2-sunken); }

.a2-badge{ display:inline-flex; align-items:center; gap:4px; height:20px; padding:0 7px; border-radius:999px; font-size:11px; font-weight:500; background:var(--a2-sunken); color:var(--a2-t2); box-shadow:inset 0 0 0 1px var(--a2-line); white-space:nowrap; vertical-align:middle; }
.a2-badge .a2-ico{ width:12px; height:12px; }
.a2-badge-web{ background:#E8F0FB; color:#2B579A; box-shadow:none; }
.a2-badge-doc{ background:var(--a2-acc-50); color:var(--a2-acc-h); box-shadow:none; }
.a2-badge-canva{ background:#EAF6FB; color:#0E7EA8; box-shadow:none; }

/* Crea: il catalogo */
.a2-crea-filtri{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-bottom:14px; }
.a2-crea-filtri .a2-input{ width:260px; flex:none; }
.a2-crea-filtri-end{ margin-left:auto; display:flex; gap:10px; align-items:center; }
.a2-crea{ display:grid; grid-template-columns:repeat(auto-fill, minmax(260px,1fr)); gap:12px; }
.a2-stato{ display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:500; }
.a2-stato > i{ width:7px; height:7px; border-radius:50%; background:currentColor; flex:none; }
.a2-stato-ok{ color:var(--a2-acc); }
.a2-stato-att{ color:var(--a2-obs-600); }
.a2-stato-neutro{ color:var(--a2-t3); }

/* Dossier: le schede per categoria */
.a2-dos-chi{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin:-4px 0 16px; }
.a2-dos-chi .a2-chip::before{ content:none; }
.a2-dos-indice{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin:0 0 18px; }
.a2-dos-cat{ display:flex; flex-direction:column; gap:5px; min-width:160px; padding:10px 12px; background:var(--a2-surface); border:1px solid var(--a2-line); border-radius:var(--a2-r2); text-decoration:none; color:var(--a2-t1); font-size:13px; font-weight:600; }
.a2-dos-cat:hover{ border-color:var(--a2-line-str); }
.a2-dos-cat small{ font-weight:400; font-size:11.5px; color:var(--a2-t3); }
.a2-dos-pot{ margin-left:auto; }
.a2-dos-sez{ margin-bottom:22px; scroll-margin-top:12px; }
.a2-dos-sez-hd{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:0 2px 10px; }
.a2-dos-sez-t{ font-size:15px; font-weight:650; color:var(--a2-t1); }
.a2-dt-griglia{ display:grid; grid-template-columns:repeat(auto-fill, minmax(235px,1fr)); gap:10px; }
.a2-dt{ display:flex; flex-direction:column; gap:7px; padding:11px 13px; background:var(--a2-surface); border:1px solid var(--a2-line); border-radius:var(--a2-r2); min-height:128px; min-width:0; }
.a2-dt:hover{ border-color:var(--a2-line-str); box-shadow:0 2px 8px rgba(16,24,40,.06); }
/* Il titolo puo' andare su due righe: segno e tag restano sulla prima.
   La dimensione del titolo sta sul contenitore, cosi' 1lh del segno e' la riga del nome. */
.a2-dt-hd{ display:flex; align-items:flex-start; gap:7px; font-size:13.5px; color:var(--a2-t1); text-decoration:none; min-width:0; }
.a2-dt-hd:hover b{ color:var(--a2-acc-h); }
.a2-dt-hd b{ font-size:13.5px; font-weight:600; min-width:0; overflow-wrap:anywhere; }
.a2-dt-hd > .a2-segno{ margin-top:calc((1lh - 18px) / 2); }
/* Il tag e' alto 22px, la riga del nome 20px: un pixel sopra resta centrato sulla prima riga. */
.a2-dt-hd .a2-tag{ flex:none; margin-top:-1px; }
.a2-dt p{ margin:0; font-size:12.5px; line-height:1.45; color:var(--a2-t2); display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.a2-dt-ft{ margin-top:auto; display:flex; justify-content:space-between; align-items:center; gap:8px; font-size:11.5px; color:var(--a2-t3); }
.a2-dt-ft > span:first-child{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.a2-dt-az{ margin-top:auto; display:flex; gap:6px; flex-wrap:wrap; align-items:center; }
.a2-dt-avv{ display:inline-flex; align-self:flex-start; align-items:center; gap:5px; font-size:11.5px; color:var(--a2-obs-700); background:var(--a2-obs-50); border-radius:6px; padding:2px 7px; }
.a2-dt-vuoto{ border-style:dashed; border-color:var(--a2-line-str); }
.a2-dt-pot{ background:var(--a2-sunken); border-style:dashed; }
.a2-dt-vuoto .a2-dt-hd b, .a2-dt-pot .a2-dt-hd b{ color:var(--a2-t2); }
.a2-dt-img{ display:grid; place-items:center; min-height:48px; }
.a2-dt-img img{ max-height:64px; max-width:100%; border-radius:4px; }
.a2-dt-sw{ display:flex; align-items:center; gap:5px; font-size:12px; color:var(--a2-t2); flex-wrap:wrap; }
.a2-dt-sw i{ width:18px; height:18px; border-radius:5px; box-shadow:inset 0 0 0 1px rgba(0,0,0,.12); }
.a2-dt-mini{ display:flex; align-items:center; justify-content:center; gap:6px; min-height:48px; border-radius:6px; background:var(--a2-sunken); color:var(--a2-t3); font-size:12px; }
.a2-dt-mini-word{ background:var(--a2-fmt-word-bg); color:var(--a2-fmt-word); }
.a2-dt-mini-powerpoint{ background:var(--a2-fmt-powerpoint-bg); color:var(--a2-fmt-powerpoint); }
.a2-dt-mini-excel{ background:var(--a2-fmt-excel-bg); color:var(--a2-fmt-excel); }
.a2-dt-mini-html{ background:var(--a2-fmt-html-bg); color:var(--a2-fmt-html); }
.a2-dt-mini-pdf{ background:var(--a2-fmt-pdf-bg); color:var(--a2-fmt-pdf); }
.a2-dt-mini-grafica{ background:var(--a2-fmt-grafica-bg); color:var(--a2-fmt-grafica); }

/* Anagrafica: prodotti, servizi e risorse */
.a2-anag-tipi{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); }
@media (max-width: 900px){ .a2-anag-tipi{ grid-template-columns:minmax(0,1fr); } }
.a2-anag-tipo{ padding:14px 18px; border-right:1px solid var(--a2-line); display:flex; flex-direction:column; gap:6px; min-width:0; }
.a2-anag-tipo:last-child{ border-right:0; }
.a2-anag-tipo-t{ font-size:12px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--a2-t3); display:flex; align-items:center; gap:6px; margin-bottom:4px; }
.a2-anag-voce{ display:flex; align-items:center; gap:10px; min-height:30px; }
.a2-anag-voce .a2-lst-nm{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.a2-anag-voce .a2-num{ margin-left:auto; font-size:12px; }
.a2-anag-pericolo{ display:flex; align-items:center; gap:16px; }
.a2-anag-pericolo .a2-btn{ margin-left:auto; flex:none; }
.a2-dt-ft > span:last-child{ flex:none; white-space:nowrap; }
.a2-anag-voce .a2-lst-nm{ color:var(--a2-t1); text-decoration:none; font-weight:500; }
.a2-anag-voce .a2-lst-nm:hover{ color:var(--a2-acc-h); text-decoration:underline; }
.a2-dos-chi .a2-chip{ text-decoration:none; }

/* Brand: l'editor dell'identita' visiva */
.a2-id-colori{ display:flex; flex-direction:column; padding-top:6px; padding-bottom:6px; }
.a2-id-col{ display:grid; grid-template-columns:38px 130px minmax(0,1fr) 28px; gap:12px; align-items:center; padding:10px 0; border-top:1px solid var(--a2-line); }
.a2-id-col:first-child{ border-top:0; }
.a2-id-sw{ width:38px; height:38px; border-radius:9px; border:0; box-shadow:inset 0 0 0 1px rgba(0,0,0,.14); cursor:pointer; padding:0; }
.a2-id-sw:disabled{ cursor:default; }
.a2-id-sw.vuoto{ background:repeating-linear-gradient(45deg, var(--a2-sunken), var(--a2-sunken) 5px, var(--a2-surface) 5px, var(--a2-surface) 10px); box-shadow:inset 0 0 0 1px var(--a2-line-str); }
.a2-id-nome{ font-weight:600; color:var(--a2-t1); }
.a2-id-uso{ font-size:12px; color:var(--a2-t3); }
.a2-id-hex{ font-family:var(--a2-f-mono); max-width:260px; }
.a2-id-hex::placeholder{ font-family:var(--a2-f-sans); font-size:12.5px; color:var(--a2-obs-600); }
.a2-id-caratteri{ padding-top:6px; padding-bottom:6px; }
.a2-id-font{ display:grid; grid-template-columns:130px minmax(0,1fr); gap:12px; align-items:start; padding:10px 0; border-top:1px solid var(--a2-line); }
.a2-id-font:first-child{ border-top:0; }
.a2-id-font .a2-sel{ max-width:320px; }
.a2-id-prova{ font-size:15px; color:var(--a2-t1); margin-top:6px; line-height:1.35; }
.a2-ab{ --ab-prim:#1F2937; --ab-sec:#1F2937; --ab-acc:#1F2937; --ab-sfondo:#fff; --ab-testo:#1A1A1A; --ab-font-t:inherit; --ab-font-x:inherit;
  border:1px solid var(--a2-line); border-radius:var(--a2-r3); overflow:hidden; background:var(--ab-sfondo); color:var(--ab-testo); font-family:var(--ab-font-x); }
.a2-ab-testa{ background:var(--ab-prim); color:#fff; padding:16px 18px; font-family:var(--ab-font-t); }
.a2-ab-testa b{ display:block; font-size:20px; font-weight:700; }
.a2-ab-testa span{ font-size:12px; opacity:.9; }
.a2-ab-corpo{ padding:14px 18px; font-size:13px; line-height:1.55; }
.a2-ab-corpo h4{ font-family:var(--ab-font-t); color:var(--ab-prim); margin:0 0 6px; font-size:15px; font-weight:700; }
.a2-ab-corpo a{ color:var(--ab-acc); font-weight:600; }
.a2-ab-btn{ display:inline-block; margin-top:10px; background:var(--ab-acc); color:#fff; padding:6px 12px; border-radius:4px; font-weight:600; font-size:12px; }
.a2-ab-tab{ width:100%; border-collapse:collapse; margin-top:10px; font-size:12px; }
.a2-ab-tab th{ background:var(--ab-sec); color:#fff; text-align:left; padding:4px 6px; font-weight:600; }
.a2-ab-tab td{ border-bottom:1px solid rgba(0,0,0,.08); padding:4px 6px; }
.a2-contrasto{ padding:10px 18px; border-top:1px solid var(--a2-line); background:var(--a2-acc-50); color:var(--a2-acc-h); font-size:12px; }
.a2-contrasto:empty{ display:none; }
.a2-contrasto-no{ background:var(--a2-obs-50); color:var(--a2-obs-700); }
.a2-prop-tabs{ display:flex; gap:6px; flex-wrap:wrap; margin-bottom:12px; }
.a2-prop-sito{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:6px 8px; align-items:center; }
.a2-prop-sito label{ grid-column:1 / -1; font-size:12px; font-weight:600; color:var(--a2-t2); display:flex; align-items:center; gap:6px; }
.a2-prop-sito .a2-hint{ grid-column:1 / -1; margin:0; }
.a2-prop-sep{ height:1px; background:var(--a2-line); margin:12px 0; }
.a2-prop-ia{ align-items:center; }
.a2-prop-riga{ display:grid; grid-template-columns:110px minmax(0,1fr) 18px minmax(0,1fr) auto; gap:10px; align-items:center; padding:7px 0; border-top:1px solid var(--a2-line); font-size:12.5px; }
.a2-prop-riga:first-child{ border-top:0; }
.a2-prop-v{ display:flex; align-items:center; gap:6px; font-family:var(--a2-f-mono); font-size:11.5px; color:var(--a2-t2); min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.a2-prop-v i{ width:16px; height:16px; border-radius:4px; box-shadow:inset 0 0 0 1px rgba(0,0,0,.12); flex:none; }
.a2-prop-v.nuovo{ color:var(--a2-t1); font-weight:600; }
.a2-prop-vuoto{ font-family:var(--a2-f-sans); color:var(--a2-t3); font-style:italic; }
.a2-prop-uguale, .a2-prop-freccia{ color:var(--a2-t3); font-size:11.5px; }
.a2-prop-perche{ grid-column:2 / -1; margin-top:-4px; font-size:11.5px; line-height:1.45; color:var(--a2-t2); }
.a2-prop-come{ margin:0 0 10px; padding:8px 10px; border-radius:8px; background:var(--a2-bg); font-size:12px; line-height:1.5; color:var(--a2-t2); }
.a2-prop-come b{ color:var(--a2-t1); font-weight:600; }
.a2-usata{ display:flex; flex-wrap:wrap; gap:6px; align-items:center; font-size:12.5px; color:var(--a2-t3); }
.a2-usata .a2-bs-uso{ text-decoration:none; }

/* I template nelle schede (Dossier, galleria): le regole comuni. */
.a2-tpl{ width:260px; display:flex; flex-direction:column; gap:6px; padding:10px 12px; border:1px solid var(--a2-line); border-radius:var(--a2-r2); background:var(--a2-surface); }
.a2-tpl-nome{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
/* Ramo, segno e nome in un gruppo che si restringe: un nome lungo va a capo
   dentro e il segno resta sulla prima riga. Base auto e niente crescita: con
   un nome corto la riga resta quella di prima, con i tag subito dopo il nome. */
.a2-tpl-nome > .a2-con-segno{ flex:0 1 auto; gap:6px; }
.a2-tpl-nome .a2-lst-nm{ font-weight:600; color:var(--a2-t1); text-decoration:none; min-width:0; overflow-wrap:anywhere; }
.a2-tpl-nome .a2-lst-nm:hover{ color:var(--a2-acc-h); }
.a2-tpl-scopo{ font-size:12px; color:var(--a2-t2); line-height:1.4; }
.a2-tpl-usi{ font-size:11.5px; color:var(--a2-t3); }
.a2-tpl-misura{ font-size:11.5px; color:var(--a2-t2); font-variant-numeric:tabular-nums; }
.a2-tpl-az{ display:flex; gap:6px; flex-wrap:wrap; margin-top:auto; padding-top:4px; }
.a2-tpl-nuovo{ width:170px; min-height:90px; display:grid; place-items:center; align-content:center; text-align:center; gap:4px; padding:10px; border:1.5px dashed var(--a2-line-str); border-radius:var(--a2-r2); color:var(--a2-t3); font-size:12.5px; text-decoration:none; }
.a2-tpl-nuovo:hover{ background:var(--a2-sunken); color:var(--a2-t1); }
.a2-tpl-vuoto{ font-size:12.5px; color:var(--a2-t3); align-self:center; max-width:36em; }

/* ======================================================================
   Esegui: sopra come e' costruito, sotto cosa ha prodotto
   ====================================================================== */
.a2-fase{ width:24px; height:24px; border-radius:50%; display:grid; place-items:center; background:var(--a2-t1); color:#fff; font-size:12px; font-weight:700; flex:none; }
.a2-cs-t{ display:flex; align-items:center; gap:7px; font-size:12px; font-weight:600; color:var(--a2-t2); }
.a2-cs-riga{ display:flex; flex-wrap:wrap; gap:6px; }
.a2-cs-allegati{ border-top:0; }
.a2-es-ingr{ display:flex; flex-direction:column; gap:4px; }
.a2-es-ingr-r{ display:flex; align-items:center; gap:6px; }
.a2-es-ingr-r .a2-ico{ width:14px; height:14px; flex:none; }
.a2-cs-inviato{ border-bottom:1px solid var(--a2-line); }
.a2-cs-inviato > summary{ display:flex; align-items:center; gap:8px; padding:10px 16px; cursor:pointer; font-size:13px; font-weight:600; color:var(--a2-acc-h); list-style:none; }
.a2-cs-inviato > summary::-webkit-details-marker{ display:none; }
.a2-cs-inviato[open] > summary{ border-bottom:1px solid var(--a2-line); }
.a2-cs-inviato > textarea{ display:block; margin:12px 16px; width:calc(100% - 32px); }
.a2-costruito-ft{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:12px 16px; }

.a2-esito{ display:flex; flex-direction:column; gap:12px; }
.a2-esito-barra{ position:sticky; top:0; z-index:3; display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding:10px 16px; background:var(--a2-surface); border:1px solid var(--a2-line-str); border-radius:var(--a2-r3); box-shadow:0 4px 14px rgba(16,24,40,.07); }
.a2-esito-stato{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.a2-esito-azioni{ margin-left:auto; display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.a2-esito-azioni form{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.a2-esito-azioni form[hidden]{ display:none; }
.a2-esito-tavolo{ display:flex; flex-direction:column; gap:14px; padding:20px; background:var(--a2-sunken); border:1px solid var(--a2-line); border-radius:var(--a2-r3); }
.a2-esito-foglio{ background:var(--a2-surface); width:100%; max-width:880px; align-self:center; padding:32px 40px; border-radius:6px; box-shadow:0 1px 3px rgba(16,24,40,.08), 0 10px 30px rgba(16,24,40,.07); }
@media (max-width: 760px){ .a2-esito-foglio{ padding:18px; } }
.a2-esito-foglio .a2-risposta{ max-height:none; min-height:160px; font-size:15px; }
.a2-esito-tavolo > .a2-hint, .a2-esito-tavolo > .a2-det, .a2-fonti-ris{ width:100%; max-width:880px; align-self:center; }
.a2-fonti-ris{ background:var(--a2-surface); border:1px solid var(--a2-line); border-radius:var(--a2-r2); padding:10px 14px; }
.a2-fonti-elenco{ margin:6px 0 0; padding-left:22px; font-size:13px; display:flex; flex-direction:column; gap:3px; }
.a2-fonti-elenco a{ color:var(--a2-acc-h); }

/* Lo storico di un contenuto */
.a2-storico{ list-style:none; margin:0; padding:4px 0; max-height:520px; overflow:auto; }
.a2-storico-v{ padding:10px 18px; border-top:1px solid var(--a2-line); display:flex; flex-direction:column; gap:3px; font-size:12.5px; }
.a2-storico-v:first-child{ border-top:0; }
.a2-storico-v.attuale{ background:var(--a2-acc-50); }
.a2-storico-hd{ display:flex; align-items:center; gap:8px; color:var(--a2-t1); }
.a2-storico-hd b{ font-family:var(--a2-f-mono); font-size:12px; }
.a2-storico-meta{ color:var(--a2-t3); display:flex; align-items:center; gap:4px; }
.a2-storico-ind{ color:var(--a2-t2); font-style:italic; }
.a2-storico-det summary{ cursor:pointer; color:var(--a2-acc-h); }
.a2-storico-testo{ max-height:260px; overflow:auto; margin:6px 0; padding:8px 10px; background:var(--a2-sunken); border-radius:var(--a2-r2); font-size:12.5px; }

/* ---------- Spazio: Archivio ---------- */
.a2-sez{ display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; margin:22px 2px 10px; }
.a2-sez-t{ font-size:15px; font-weight:650; color:var(--a2-t1); }
.a2-sez-s{ color:var(--a2-t3); font-size:12.5px; }
.a2-sez-end{ margin-left:auto; display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.a2-drop{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; padding:18px; border:1.5px dashed var(--a2-line-str); border-radius:var(--a2-r3); background:var(--a2-sunken); transition:background-color var(--a2-fast) var(--a2-ease), border-color var(--a2-fast) var(--a2-ease); }
.a2-drop.a2-drop-sopra{ background:var(--a2-acc-50); border-color:var(--a2-acc); }
.a2-drop-ico{ width:44px; height:44px; border-radius:10px; display:grid; place-items:center; background:var(--a2-surface); color:var(--a2-acc); box-shadow:inset 0 0 0 1px var(--a2-line); flex:none; }
.a2-drop-t{ font-weight:600; color:var(--a2-t1); }
.a2-drop-s{ font-size:12.5px; color:var(--a2-t3); margin-top:2px; }
.a2-drop-url{ margin-left:auto; display:flex; gap:8px; flex:0 1 380px; min-width:260px; }
.a2-drop-url .a2-input{ flex:1 1 auto; min-width:0; }
.a2-drop-lavoro{ font-size:12.5px; color:var(--a2-t2); display:flex; align-items:center; gap:8px; }
.a2-proposta{ border:1px solid var(--a2-acc-100); background:var(--a2-acc-50); border-radius:var(--a2-r3); padding:14px 16px; display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:14px; align-items:start; margin-bottom:10px; }
.a2-proposta-k{ display:grid; grid-template-columns:96px minmax(0,1fr); gap:8px 12px; font-size:13px; margin:0; align-items:center; }
.a2-proposta-k dt{ color:var(--a2-t3); }
.a2-proposta-k dd{ margin:0; color:var(--a2-t1); }
.a2-proposta-k .a2-input, .a2-proposta-k .a2-sel{ height:30px; }
.a2-proposta-k textarea.a2-input{ height:auto; min-height:52px; padding-top:6px; resize:vertical; width:100%; }
.a2-proposta-azioni{ display:flex; flex-direction:column; gap:6px; }
.a2-contr{ display:grid; grid-template-columns:minmax(0,1fr) 28px minmax(0,1fr) auto; gap:14px; align-items:center; padding:14px 18px; }
.a2-contr + .a2-contr{ border-top:1px solid var(--a2-line); }
.a2-contr-lato{ display:flex; flex-direction:column; gap:4px; padding:10px 12px; border-radius:var(--a2-r2); background:var(--a2-sunken); font-size:13px; }
.a2-contr-lato small{ font-size:11.5px; color:var(--a2-t3); font-weight:600; }
.a2-contr-lato:first-child{ background:var(--a2-acc-50); }
.a2-contr-vs{ color:var(--a2-obs-500); justify-self:center; }
.a2-contr-az{ display:flex; flex-direction:column; gap:6px; }
.a2-contr-desc{ grid-column:1 / -1; font-size:12.5px; color:var(--a2-t2); margin-top:-6px; }
.a2-doc-nome{ display:flex; align-items:center; gap:10px; }
.a2-doc-nome b{ font-weight:600; color:var(--a2-t1); }
.a2-doc-riass{ font-size:12px; color:var(--a2-t3); margin-top:2px; max-width:46em; }
.a2-doc-prog{ display:flex; flex-direction:column; gap:3px; min-width:150px; font-size:12px; color:var(--a2-t3); }
.a2-doc-prog > span{ display:flex; align-items:center; gap:8px; }
.a2-doc-prog .a2-bar{ flex:1 1 auto; min-width:70px; height:6px; }
.a2-doc-escluso td{ opacity:.62; }
.a2-doc-escluso td:last-child{ opacity:1; }
.a2-cat-doc{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:10px; }
.a2-indice{ display:flex; gap:18px; flex-wrap:wrap; font-size:12.5px; color:var(--a2-t3); }
.a2-indice b{ color:var(--a2-t2); font-weight:500; }
@media (max-width: 900px){
  .a2-proposta{ grid-template-columns:minmax(0,1fr); }
  .a2-proposta > .a2-tipo{ display:none; }
  .a2-proposta-azioni{ flex-direction:row; }
  .a2-contr{ grid-template-columns:minmax(0,1fr); }
  .a2-contr-vs{ transform:rotate(90deg); }
  .a2-contr-az{ flex-direction:row; }
  .a2-drop-url{ margin-left:0; flex-basis:100%; }
}
.a2-cs-passaggi summary{ cursor:pointer; font-size:12.5px; margin-top:4px; }
.a2-cs-passaggi ol{ margin:6px 0 0; padding-left:0; list-style:none; display:flex; flex-direction:column; gap:6px; max-height:260px; overflow:auto; }
.a2-cs-passaggi li{ display:flex; flex-direction:column; gap:2px; padding:6px 8px; border-radius:var(--a2-r2); background:var(--a2-sunken); font-size:12px; color:var(--a2-t2); }
.a2-cs-passaggi li b{ font-weight:600; color:var(--a2-t1); }

/* ---------- Spazio: Chiedi ---------- */
.a2-chat{ display:flex; flex-direction:column; gap:14px; min-width:0; }
.a2-chat-vuota{ display:flex; flex-direction:column; gap:4px; padding:18px; border:1px dashed var(--a2-line-str); border-radius:var(--a2-r3); color:var(--a2-t2); font-size:13px; }
.a2-chat-vuota b{ color:var(--a2-t1); font-weight:600; }
.a2-dom{ align-self:flex-end; max-width:78%; background:var(--a2-acc-50); border:1px solid var(--a2-acc-100); border-radius:14px 14px 4px 14px; padding:10px 14px; color:var(--a2-t1); white-space:pre-wrap; }
.a2-risp{ background:var(--a2-surface); border:1px solid var(--a2-line); border-radius:14px 14px 14px 4px; padding:14px 16px; line-height:1.6; min-width:0; overflow-wrap:anywhere; }
.a2-risp p{ margin:0 0 8px; }
.a2-risp ul, .a2-risp ol{ margin:0 0 8px; padding-left:20px; }
.a2-risp h1, .a2-risp h2, .a2-risp h3{ font-size:15px; margin:12px 0 6px; }
.a2-risp-flusso{ white-space:pre-wrap; }
.a2-risp-attesa{ color:var(--a2-t3); }
.a2-cit{ display:inline-grid; place-items:center; min-width:18px; height:18px; padding:0 4px; border-radius:5px; background:var(--a2-acc-100); color:var(--a2-acc-h); font-size:10.5px; font-weight:700; line-height:1; vertical-align:1px; text-decoration:none; }
a.a2-cit:hover{ background:var(--a2-acc); color:#fff; }
.a2-cit.d{ background:var(--a2-acc); color:#fff; }
.a2-fonti{ display:flex; flex-direction:column; gap:6px; margin-top:10px; padding-top:10px; border-top:1px solid var(--a2-line); }
.a2-fonte{ display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--a2-t2); scroll-margin-top:80px; }
.a2-fonte:target{ background:var(--a2-acc-50); border-radius:6px; }
.a2-fonte a{ color:var(--a2-acc-h); }
.a2-risp-azioni{ display:flex; gap:8px; flex-wrap:wrap; align-items:flex-start; margin-top:12px; }
.a2-risp-meta{ margin-left:auto; font-size:11.5px; align-self:center; }
.a2-risp-salva > summary{ list-style:none; }
.a2-risp-salva > summary::-webkit-details-marker{ display:none; }
.a2-risp-salva-bd{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-top:8px; padding:10px; border-radius:var(--a2-r2); background:var(--a2-sunken); font-size:12.5px; }
.a2-risp-salva-bd .a2-sel{ max-width:280px; }
.a2-avviso-contrasto{ display:flex; gap:10px; align-items:flex-start; margin:4px 0 8px; padding:10px 12px; border-radius:var(--a2-r2); background:var(--a2-obs-50); border:1px solid var(--a2-obs-100); color:var(--a2-obs-700); font-size:12.5px; }
.a2-avviso-contrasto .a2-ico{ flex:none; margin-top:2px; }
.a2-chiedi-box{ display:flex; gap:8px; align-items:flex-end; }
.a2-chiedi-box .a2-area{ flex:1 1 auto; min-height:56px; }
.a2-interr{ display:flex; flex-direction:column; gap:10px; }
.a2-interr-r{ display:flex; align-items:flex-start; gap:10px; cursor:pointer; }
.a2-interr-r b{ display:block; font-weight:600; color:var(--a2-t1); font-size:13px; }
.a2-interr-r span{ font-size:12px; color:var(--a2-t3); }
.a2-interr-mod{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding-top:10px; border-top:1px solid var(--a2-line); font-size:12.5px; color:var(--a2-t2); }
.a2-conv-elenco{ display:flex; flex-direction:column; gap:2px; }
.a2-conv{ display:flex; justify-content:space-between; gap:10px; padding:6px 8px; border-radius:6px; color:var(--a2-acc-h); text-decoration:none; font-size:13px; }
.a2-conv span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.a2-conv small{ color:var(--a2-t3); flex:none; }
.a2-conv:hover{ background:var(--a2-sunken); }
.a2-conv-attiva{ background:var(--a2-acc-50); font-weight:600; }
@media (max-width: 640px){ .a2-dom{ max-width:92%; } .a2-chiedi-box{ flex-direction:column; align-items:stretch; } }
.a2-fonte > .a2-cit, .a2-fonte > .a2-badge{ flex:none; }

/* Archivio: categorie dei documenti */
.a2-arc-cat{ margin-top:18px; }
.a2-arc-cat > summary{ cursor:pointer; list-style:none; }
.a2-arc-cat > summary::-webkit-details-marker{ display:none; }
.a2-arc-cat-r{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:6px 0; border-top:1px solid var(--a2-line); font-size:13px; }
.a2-arc-cat-r:first-child{ border-top:0; }
.a2-arc-cat-f{ display:flex; gap:8px; align-items:center; flex:1 1 280px; }
.a2-arc-cat-f .a2-input{ flex:1 1 auto; min-width:0; max-width:340px; height:32px; }
.a2-arc-cat-nuova{ margin-top:10px; padding-top:10px; border-top:1px solid var(--a2-line); }

/* Contenuto: correzione proposta dall'archivio */
.a2-corr{ border:1px solid var(--a2-obs-150); background:var(--a2-obs-25); border-radius:var(--a2-r3); overflow:hidden; margin-bottom:16px; }
.a2-corr-hd{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:12px 16px; border-bottom:1px solid var(--a2-obs-100); }
.a2-corr-hd b{ color:var(--a2-t1); font-weight:650; }
.a2-corr-hd .a2-ico{ color:var(--a2-obs-600); }
.a2-corr-fonte{ margin-left:auto; font-size:12.5px; color:var(--a2-t3); }
.a2-corr-bd{ padding:14px 16px; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:14px; }
.a2-corr-lato{ background:var(--a2-surface); border:1px solid var(--a2-line); border-radius:var(--a2-r2); padding:10px 12px; font-size:13.5px; line-height:1.6; max-height:320px; overflow:auto; }
.a2-corr-lato > div{ white-space:pre-wrap; overflow-wrap:anywhere; }
.a2-corr-lato small{ display:block; font-size:11.5px; font-weight:600; color:var(--a2-t3); margin-bottom:6px; }
.a2-corr-lato del{ background:var(--a2-err-50); color:var(--a2-err-700); text-decoration:line-through; border-radius:3px; padding:0 2px; }
.a2-corr-lato ins{ background:var(--a2-acc-50); color:var(--a2-acc-h); text-decoration:none; border-radius:3px; padding:0 2px; font-weight:600; }
.a2-corr-ft{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding:0 16px 14px; }
.a2-corr-ft .a2-hint{ margin-left:auto; max-width:40em; }
@media (max-width: 760px){ .a2-corr-bd{ grid-template-columns:minmax(0,1fr); } .a2-corr-ft .a2-hint{ margin-left:0; } }

/* Esegui: la barra dopo il salvataggio */
.a2-esito-barra.a2-esito-salvato{ background:var(--a2-acc-50); border-color:var(--a2-acc-100); }
.a2-esito-salvato .a2-fase{ background:var(--a2-acc); color:#fff; }
.a2-esito-salvato .a2-card-sub{ color:var(--a2-acc-h); }
/* Su un fondo verde tenue l'azione verde tenue sparirebbe: li' ha il fondo bianco. */
:is(.a2-esito-salvato, .a2-costr, .a2-proposta, .a2-gal-canva, .a2-voci-pred, .a2-soc-abbina, .a2-soc-el tr.a2-soc-sel, .a2-el tr.a2-dt-appena) .a2-btn-2{ background:var(--a2-surface); }
:is(.a2-esito-salvato, .a2-costr, .a2-proposta, .a2-gal-canva, .a2-voci-pred, .a2-soc-abbina, .a2-soc-el tr.a2-soc-sel, .a2-el tr.a2-dt-appena) .a2-btn-2:hover:not(:disabled){ background:var(--a2-acc-100); }
.a2-esito-salvato-azioni{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.a2-esito-salvato-azioni form{ display:inline; }
.a2-brand-perche{ max-width:none; margin:-6px 2px 14px; }

/* Contenuto di testo: si legge un documento, si modifica in un modo che si vede */
.a2-doc .a2-card-hd-end{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.a2-doc-az{ display:inline-flex; gap:8px; align-items:center; flex-wrap:wrap; }
.a2-doc-az[hidden]{ display:none; }
.a2-doc-guida{ padding-bottom:0; }
.a2-doc-tavolo{ background:var(--a2-sunken); padding:20px; border-top:1px solid var(--a2-line); }
.a2-doc-tavolo[hidden]{ display:none; }
.a2-doc-barra{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; max-width:780px; margin:0 auto 10px; }
.a2-doc-barra .a2-doc-az{ margin-left:auto; }
.a2-doc-foglio-et{ display:flex; align-items:center; gap:6px; font-size:11.5px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--a2-t3); }
.a2-doc-foglio{ background:#fff; max-width:780px; margin:0 auto; padding:26px 32px; border-radius:4px; border:1px solid var(--a2-line); box-shadow:0 1px 2px rgba(16,24,40,.06), 0 6px 18px rgba(16,24,40,.07); font-size:15px; line-height:1.65; }
.a2-card.a2-doc-modifica{ border-color:var(--a2-acc); box-shadow:0 0 0 3px var(--a2-acc-50); }
.a2-doc-modo{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:10px 16px; background:var(--a2-acc-50); border-top:1px solid var(--a2-acc-100); border-bottom:1px solid var(--a2-acc-100); color:var(--a2-acc-h); font-size:13px; }
.a2-doc-modo b{ font-weight:650; }
.a2-doc-modo-nota{ margin-left:auto; }
.a2-pallino{ width:8px; height:8px; border-radius:50%; background:var(--a2-obs-500); display:inline-block; vertical-align:middle; }
.a2-doc-split{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
.a2-doc-split > div{ padding:14px 16px; min-width:0; }
.a2-doc-split > div + div{ border-left:1px solid var(--a2-line); background:var(--a2-sunken); }
.a2-doc-split small{ display:flex; justify-content:space-between; font-size:11.5px; font-weight:600; color:var(--a2-t3); letter-spacing:.04em; text-transform:uppercase; margin-bottom:8px; }
.a2-doc-split textarea{ width:100%; min-height:420px; font-family:var(--a2-f-mono); font-size:13px; line-height:1.6; resize:vertical; }
.a2-doc-split .a2-doc-foglio{ max-width:none; padding:18px 22px; font-size:14px; box-shadow:none; max-height:640px; overflow:auto; }
.a2-doc-aiuto{ display:flex; gap:14px; flex-wrap:wrap; font-size:12px; color:var(--a2-t3); margin-top:8px; }
.a2-doc-aiuto code{ font-family:var(--a2-f-mono); background:var(--a2-sunken); padding:0 4px; border-radius:3px; color:var(--a2-t2); }
.a2-doc-ft{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:12px 16px; border-top:1px solid var(--a2-line); background:var(--a2-surface); position:sticky; bottom:0; z-index:2; }
.a2-doc-ft .a2-hint{ margin-left:auto; max-width:46em; }
.a2-doc-vuoto{ padding:22px 16px; display:grid; grid-template-columns:auto minmax(0,1fr); gap:14px; align-items:start; border-top:1px solid var(--a2-line); }
.a2-doc-vuoto[hidden]{ display:none; }
.a2-doc-vuoto-ico{ width:40px; height:40px; border-radius:10px; display:grid; place-items:center; background:var(--a2-obs-50); color:var(--a2-obs-600); }
.a2-doc-vuoto b{ display:block; font-size:15px; color:var(--a2-t1); margin-bottom:4px; }
.a2-doc-vuoto-az{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-top:10px; }
.a2-doc-vuoto-az .a2-hint{ max-width:40em; }
.a2-grid.a2-grid-intera{ grid-template-columns:minmax(0,1fr); }
.a2-grid.a2-grid-intera > :not(:first-child){ display:none; }
@media (max-width: 860px){
  .a2-doc-split{ grid-template-columns:minmax(0,1fr); }
  .a2-doc-split > div + div{ border-left:0; border-top:1px solid var(--a2-line); }
  .a2-doc-ft .a2-hint, .a2-doc-modo-nota{ margin-left:0; }
  .a2-doc-foglio{ padding:18px; }
  .a2-doc-tavolo{ padding:12px; }
}
.a2-doc [data-doc-solo-lettura][hidden]{ display:none !important; }
@media (max-width: 640px){ .a2-doc-split textarea{ min-height:240px; } }

/* Questionari > Ingresso: anteprima dell'illustrazione, su un fondo scuro come quello su cui si vedra'. */
.a2-ingresso-illustrazione{ display:flex; width:fit-content; padding:10px; margin:0 0 8px; border-radius:8px; background:linear-gradient(to bottom, transparent, rgba(0,0,0,.35)), var(--a2-brand, #1f3a5f); }
.a2-ingresso-illustrazione img{ max-width:180px; max-height:140px; display:block; }

/* Esegui > Dal dossier: ogni asset e' un link alla sua pagina; quelli che mancano dicono di compilarli. */
a.a2-es-ingr-r{ color:inherit; text-decoration:none; border-radius:6px; padding:2px 4px; margin:0 -4px; }
a.a2-es-ingr-r:hover{ background:var(--a2-bg); }

/* "Torna a ...": in cima alla pagina di un asset aperto da un asset mancante (ritorno.js). */
.a2-ritorno{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin:0 0 14px; padding:10px 14px; border-radius:10px; background:var(--a2-acc-50); border:1px solid var(--a2-acc-100); color:var(--a2-t1); font-size:13px; }
.a2-ritorno > span{ flex:1 1 260px; }
.a2-ritorno-x{ border:0; background:none; font-size:18px; line-height:1; color:var(--a2-t3); cursor:pointer; padding:2px 4px; }
.a2-ritorno-x:hover{ color:var(--a2-t1); }

/* Anteprima di un template progettato (vedi js/anteprima-disegno.js). */
.a2-tela{ position:relative; aspect-ratio:16/9; container-type:inline-size; overflow:hidden; border-radius:3px; box-shadow:0 1px 2px rgba(16,24,40,.14), 0 0 0 1px rgba(16,24,40,.06); }
.a2-tela-forme{ position:absolute; inset:0; width:100%; height:100%; }
.a2-tela-testo{ position:absolute; margin:0; white-space:pre-line; }
.a2-tela-punti{ margin:0; padding:0; list-style:none; }
.a2-tela-punti li{ position:relative; padding-left:1.6em; margin:0 0 .45em; }
.a2-tela-punti li i{ position:absolute; left:0; top:0; font-style:normal; }
.a2-tela-logo{ position:absolute; }
.a2-progetto{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px; }
.a2-progetto-did{ font-size:11.5px; color:var(--a2-t3); margin-top:4px; }
.a2-idea{ font-size:13.5px; line-height:1.55; color:var(--a2-t1); margin:10px 0 6px; padding-left:12px; border-left:3px solid var(--a2-acc); }
.a2-idea b{ color:var(--a2-t3); font-weight:600; font-size:12px; }
.a2-correzioni{ margin:6px 0 0; padding-left:18px; font-size:12.5px; color:var(--a2-t2); }
/* La grafica in Esegui (mockup 19-template-grafici): su un template, il PNG e
   accanto i testi nelle zone e la foto; il template progettato con la tabella
   del disegno che si salva; i due campi in pixel di «altra misura…». */
.a2-grafica-zone{ display:grid; grid-template-columns:minmax(0, 1.2fr) minmax(0, 1fr); gap:18px; align-items:start; }
.a2-grafica-zone .a2-grafica-anteprima{ margin-bottom:0; }
.a2-grafica-lato{ display:flex; flex-direction:column; gap:6px; font-size:13px; }
.a2-grafica-lato .a2-cs-t{ margin-top:6px; }
.a2-grafica-testi{ display:grid; grid-template-columns:72px minmax(0, 1fr); gap:6px 10px; margin:0; }
.a2-grafica-testi dt{ color:var(--a2-t3); font-size:12.5px; }
.a2-grafica-testi dd{ margin:0; color:var(--a2-t1); line-height:1.45; }
.a2-grafica-foto{ margin:0; color:var(--a2-t1); line-height:1.5; }
.a2-grafica-disegno{ margin-top:12px; border:1px solid var(--a2-line); border-radius:8px; overflow:hidden; }
.a2-grafica-disegno > .a2-cs-t{ padding:10px 12px 6px; }
.a2-grafica-disegno .a2-lst{ width:100%; font-size:12.5px; }
.a2-grafica-disegno .a2-lst td, .a2-grafica-disegno .a2-lst th{ padding:6px 12px; }
.a2-grafica-px{ font-family:var(--a2-f-mono); font-size:12px; white-space:nowrap; }
.a2-dest-campo .a2-misura-px{ width:96px; }
@media (max-width: 700px){ .a2-grafica-zone{ grid-template-columns:1fr; } }

/* Esegui, in testa: che cosa si genera (mockup 15-template-coerenza). In viola
   un template o una variante, come i template nel Brand; in verde un contenuto.
   L'app non ha un tema scuro: i colori fissi del viola sono quelli del mockup. */
.a2-genera { display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:600; padding:3px 10px 3px 8px; border-radius:999px; border:1px solid var(--a2-line); background:var(--a2-surface); color:var(--a2-t1); }
.a2-genera .a2-ico { width:13px; height:13px; }
.a2-genera-tpl { background:#f3eefc; border-color:#d9cdf4; color:#5b3fa6; }
.a2-genera-con { background:var(--a2-acc-100); border-color:transparent; color:var(--a2-acc-h); }
.a2-genera b { font-weight:650; }

/* Esegui, «Che cosa generi?» (scena «Nuova proposta o variante» del mockup):
   due opzioni, una nuova proposta originale o una variante, con la
   destinazione; sotto l'anteprima di una variante, cosa e' cambiato. */
.a2-scelta-gen{ display:flex; flex-direction:column; gap:8px; }
.a2-op{ display:grid; grid-template-columns:18px minmax(0,1fr); gap:10px; align-items:start; border:1px solid var(--a2-line); border-radius:8px; padding:10px 12px; background:var(--a2-surface); }
.a2-op-on{ border-color:var(--a2-acc); box-shadow:0 0 0 1px var(--a2-acc); }
.a2-op .a2-chk{ margin-top:2px; }
.a2-op-t{ display:block; cursor:pointer; }
.a2-op-t b{ font-size:13.5px; color:var(--a2-t1); }
.a2-op-t span{ display:block; margin-top:3px; font-size:12.5px; color:var(--a2-t3); line-height:1.5; }
.a2-dest-r{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-top:8px; font-size:12.5px; color:var(--a2-t2); }
.a2-dest-r .a2-ico{ flex:none; }
.a2-dest-campi{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:8px; margin-top:8px; }
.a2-dest-campo{ display:flex; flex-direction:column; gap:4px; font-size:12px; font-weight:600; color:var(--a2-t2); }
.a2-dest-campo .a2-input{ width:100%; }
/* Che cosa distingue un template dagli altri del suo formato: un testo, su tutta la riga dei campi. */
.a2-dest-campo-largo{ grid-column:1 / -1; }
.a2-dest-campo-largo .a2-cell-soft{ font-weight:400; }
.a2-dest-distintivo b{ font-weight:600; color:var(--a2-t1); }
@media (max-width: 640px){ .a2-dest-campi{ grid-template-columns:minmax(0,1fr); } }
.a2-req{ color:var(--a2-err-600); font-weight:600; font-size:11.5px; }
.a2-origine{ display:flex; gap:6px; align-items:center; flex-wrap:wrap; font-size:12px; color:var(--a2-t3); }
.a2-origine[hidden]{ display:none; }
.a2-salva-avviso{ flex-basis:100%; }
.a2-salva-avviso[hidden]{ display:none; }
.a2-diff-t{ margin:10px 0 0; }
.a2-diff{ list-style:none; padding:0; margin:8px 0 0; font-size:12.5px; }
.a2-diff li{ display:grid; grid-template-columns:96px minmax(0,1fr); gap:8px; padding:4px 0; border-bottom:1px solid var(--a2-line); color:var(--a2-t2); }
.a2-diff li b{ color:var(--a2-t1); font-weight:600; }
.a2-diff li.a2-diff-ug, .a2-diff li.a2-diff-ug b{ color:var(--a2-t3); }
@media (max-width: 700px){ .a2-progetto{ grid-template-columns:1fr; } }

/* Anteprima di un modello Word progettato (vedi js/anteprima-documento.js): la
   copertina sulla tela A4 e la pagina interna, larga 21 cm = 100cqw. Misure,
   caratteri e colori arrivano dagli stili del disegno, in linea. */
.a2-tela-a4{ aspect-ratio:1000/1414; }
.a2-pagina{ position:relative; aspect-ratio:1000/1414; container-type:inline-size; overflow:hidden; background:#fff; border-radius:3px; box-shadow:0 1px 2px rgba(16,24,40,.14), 0 0 0 1px rgba(16,24,40,.06); }
.a2-pagina *{ box-sizing:border-box; }
.a2-pagina-testata, .a2-pagina-piede{ position:absolute; display:grid; grid-template-columns:1fr auto 1fr; align-items:end; line-height:1.15; white-space:nowrap; }
.a2-pagina-sx, .a2-pagina-cx, .a2-pagina-dx{ min-width:0; display:flex; align-items:flex-end; }
.a2-pagina-cx{ justify-content:center; }
.a2-pagina-dx{ justify-content:flex-end; }
.a2-pagina-logo{ display:block; width:auto; object-fit:contain; object-position:left bottom; }
.a2-pagina-dx .a2-pagina-logo{ object-position:right bottom; }
.a2-pagina-corpo{ position:absolute; overflow:hidden; }
.a2-pagina-corpo p, .a2-pagina-titolo{ margin:0; }
.a2-pagina-numero{ display:inline-block; font-weight:700; }
.a2-pagina-corto{ display:block; width:9cqw; }
.a2-pagina-elenco{ margin:0; padding:0; list-style:none; }
.a2-pagina-elenco li{ position:relative; }
.a2-pagina-segno{ position:absolute; left:0; top:0; }
.a2-pagina-tabella{ width:100%; border-collapse:collapse; }
.a2-pagina-tabella th, .a2-pagina-tabella td{ text-align:left; vertical-align:top; font-weight:400; }
.a2-pagina-tabella th{ font-weight:700; }

/* Anteprima di un modello HTML progettato: la pagina vera nella cornice, senza
   script (sandbox vuoto). Mostra intera la colonna di 600 px; l'ombra e' quella
   delle altre anteprime disegnate (.a2-tela, .a2-pagina). */
.a2-pagina-progettata{ display:block; width:100%; max-width:640px; height:min(80vh, 900px); border:0; background:#fff; box-shadow:0 1px 2px rgba(16,24,40,.14), 0 0 0 1px rgba(16,24,40,.06); }

/* Anteprima di un modello Excel progettato (vedi js/anteprima-foglio.js): il
   foglio campione come una griglia, con le lettere delle colonne, i numeri di
   riga e la scheda in fondo, come la scena Excel del mockup. Caratteri, corpi
   e colori arrivano dagli stili del disegno, in linea; qui solo il telaio. */
.a2-foglio{ background:#fff; border-radius:6px; overflow:hidden; box-shadow:0 1px 3px rgba(16,24,40,.14), 0 0 0 1px rgba(16,24,40,.06); }
.a2-foglio-scorre{ overflow-x:auto; }
.a2-foglio-griglia{ border-collapse:collapse; min-width:100%; line-height:1.25; }
.a2-foglio-griglia td{ border:1px solid #e3e6ea; padding:2px 6px; white-space:nowrap; vertical-align:bottom; }
.a2-foglio-griglia td.a2-foglio-num{ text-align:right; font-variant-numeric:tabular-nums; }
.a2-foglio-col-rn{ width:34px; }
.a2-foglio-lettere th, .a2-foglio-griglia td.a2-foglio-rn{ background:#f3f4f6; color:#6b7280; font:500 11px/1.4 Inter, system-ui, sans-serif; font-style:normal; text-align:center; border:1px solid #e5e7eb; padding:2px 6px; }
.a2-foglio-titolo td:not(.a2-foglio-rn), .a2-foglio-sottotitolo td:not(.a2-foglio-rn), .a2-foglio-spazio td:not(.a2-foglio-rn){ border-color:transparent; }
.a2-foglio-griglia .a2-foglio-titolo td{ vertical-align:middle; }
.a2-foglio-titolo-dentro{ display:flex; align-items:center; gap:8px; padding-left:4px; }
.a2-foglio-logo{ display:block; flex:none; width:auto; max-width:60%; object-fit:contain; }
.a2-foglio-logo-dx .a2-foglio-logo{ order:2; margin-left:auto; margin-right:10px; } /* FoglioNelExcel.MargineLogo */
.a2-foglio-spazio td{ height:15pt; }
.a2-foglio-schede{ display:flex; gap:2px; padding:6px 8px 8px; background:#f3f4f6; border-top:1px solid #e5e7eb; font:11.5px/1.4 Inter, system-ui, sans-serif; }
.a2-foglio-scheda{ padding:3px 12px; background:#fff; color:#1f2937; font-weight:600; }

/* Dossier › Template base: le famiglie, ogni madre con le sue varianti sotto,
   con il ramo a sinistra (mockup 12, «Proposta o variante», .mk-fam*). */
.a2-fam-elenco{ display:flex; flex-direction:column; gap:12px; }
.a2-fam-elenco + .a2-dt-griglia{ margin-top:12px; }
.a2-fam{ background:var(--a2-surface); border:1px solid var(--a2-line); border-radius:var(--a2-r3); padding:14px 16px; }
.a2-fam-riga{ display:grid; grid-template-columns:200px minmax(0,1fr) auto; gap:16px; align-items:center; }
.a2-fam-riga + .a2-fam-riga{ margin-top:12px; padding-top:12px; border-top:1px dashed var(--a2-line); }
.a2-fam-riga.var{ grid-template-columns:28px 172px minmax(0,1fr) auto; }
.a2-fam-ramo{ align-self:stretch; height:50%; margin-left:12px; border-left:2px solid var(--a2-line-str); border-bottom:2px solid var(--a2-line-str); border-bottom-left-radius:8px; }
.a2-fam-mini{ display:block; text-decoration:none; }
.a2-fam-mini > img{ display:block; width:100%; max-height:120px; object-fit:contain; border-radius:6px; }
.a2-fam-mini .a2-dt-mini{ aspect-ratio:16/9; min-height:0; }
.a2-fam-testo{ display:flex; flex-direction:column; align-items:flex-start; gap:5px; min-width:0; }
.a2-fam-t{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; width:100%; font-size:14px; font-weight:650; color:var(--a2-t1); }
/* Segno e nome in un gruppo che si restringe (come .a2-tpl-nome nel Brand). */
.a2-fam-t > .a2-con-segno{ flex:0 1 auto; gap:8px; }
.a2-fam-t > .a2-con-segno > a{ color:inherit; text-decoration:none; min-width:0; overflow-wrap:anywhere; }
.a2-fam-t > .a2-con-segno > a:hover{ color:var(--a2-acc-h); }
.a2-fam-d{ font-size:12.5px; line-height:1.5; color:var(--a2-t3); }
.a2-fam-d i{ font-style:normal; color:var(--a2-t2); }
.a2-fam-az{ display:flex; flex-wrap:wrap; justify-content:flex-end; align-items:center; gap:6px; }
.a2-fam-az form{ display:contents; }
.a2-fam-piede{ display:flex; justify-content:flex-end; margin-top:12px; }
.a2-fam-nuovo{ position:relative; }
.a2-fam-nuovo > summary{ list-style:none; cursor:pointer; }
.a2-fam-nuovo > summary::-webkit-details-marker{ display:none; }
.a2-fam-nuovo .a2-menu{ left:auto; right:0; min-width:220px; }
.a2-fam-nuovo[open] .a2-menu{ opacity:1; transform:none; pointer-events:auto; }
.a2-fam-nuovo .a2-menu-item{ color:var(--a2-t1); text-decoration:none; }
@media (max-width: 900px){
  .a2-fam-riga, .a2-fam-riga.var{ grid-template-columns:minmax(0,1fr); }
  .a2-fam-ramo{ display:none; }
  .a2-fam-mini{ max-width:200px; }
  .a2-fam-az{ justify-content:flex-start; }
}

/* Brand › Template: il segno della variante sotto la sua madre. */
.a2-tpl-ramo{ color:var(--a2-t3); }

/* Dossier › Template base e Brand › Galleria: la miniatura vera di un template
   salvato (mockup 16, .a2-tpl-mini). Il contenuto iniziale e' il riquadro del
   formato; miniature-template.js lo sostituisce con il disegno (.a2-tela, come
   in Esegui), con il foglio campione rimpicciolito o con la pagina HTML in una
   cornice rimpicciolita. Senza disegno resta il riquadro, con la nota. */
.a2-tpl-mini{ position:relative; display:block; aspect-ratio:16/9; border-radius:6px; overflow:hidden; background:var(--a2-sunken); box-shadow:0 0 0 1px var(--a2-line); text-decoration:none; }
.a2-tpl-mini.verticale{ --a2-tpl-mini-h:120px; aspect-ratio:auto; height:var(--a2-tpl-mini-h); }
.a2-tpl-mini > .a2-dt-mini{ height:100%; aspect-ratio:auto; min-height:0; border-radius:0; }
.a2-tpl-mini > .a2-tela{ border-radius:0; box-shadow:none; }
/* La copertina A4 del Word (.a2-tela-a4) intera, alta quanto il riquadro e al centro:
   la larghezza si scrive, l'altezza per 1000/1414, invece di ricavarla dalle proporzioni,
   perche' la tela ha container-type:inline-size e la sua larghezza non segue il contenuto. */
.a2-tpl-mini.verticale > .a2-tela{ width:calc(var(--a2-tpl-mini-h) * 1000 / 1414); height:100%; margin:0 auto; box-shadow:0 0 0 1px var(--a2-line); }
/* La grafica intera alla sua proporzione (miniature-template.js scrive la larghezza
   della tela): piu' stretta del riquadro e' alta quanto lui, al centro; piu' larga,
   larga quanto lui, a meta' altezza. Senza disegno, il suo PNG intero. */
.a2-tpl-mini.grafica{ display:flex; align-items:center; justify-content:center; }
.a2-tpl-mini.grafica > .a2-tela{ flex:none; box-shadow:0 0 0 1px var(--a2-line); }
/* Una grafica a più pagine: le tre pagine madri affiancate, con un po' d'aria fra loro. */
.a2-tpl-mini.grafica.pagine{ gap:4%; }
.a2-tpl-mini > img{ display:block; width:100%; height:100%; object-fit:contain; }
.a2-tpl-mini iframe{ position:absolute; top:0; left:0; width:400%; height:400%; border:0; transform:scale(.25); transform-origin:0 0; pointer-events:none; background:#fff; }
.a2-tpl-mini .a2-mini-foglio{ position:absolute; top:0; left:0; width:300%; transform:scale(.3333); transform-origin:0 0; pointer-events:none; background:#fff; }
.a2-tpl-mini .a2-mini-foglio .a2-progetto-did{ display:none; }
.a2-tpl-mini-nota{ position:absolute; left:6px; right:6px; bottom:5px; width:fit-content; font-size:10.5px; line-height:1.35; color:var(--a2-t3); background:rgba(255,255,255,.85); padding:1px 6px; border-radius:4px; }
.a2-tpl .a2-tpl-mini{ margin-bottom:10px; }

/* Brand › Galleria (mockup 20): la barra dei filtri, una sezione per formato
   (.a2-gal-fmt), dentro un gruppo per tipo (.a2-gal-tipo) e una tessera per
   esemplare (.a2-gal-es). La miniatura e' quella del Dossier (.a2-tpl-mini,
   miniature-template.js); le proposte da approvare hanno il bordo tratteggiato
   e si nascondono con la casella (galleria.js). Senza script la barra resta
   nascosta e si vede tutto. */
.a2-gal{ display:flex; flex-direction:column; gap:16px; }
.a2-gal-barra{ display:flex; flex-wrap:wrap; align-items:center; gap:10px 16px; margin:14px 0; }
.a2-gal-barra[hidden], .a2-gal-fmt[hidden]{ display:none; }
.a2-gal-filtri{ display:flex; flex-wrap:wrap; gap:6px; }
.a2-gal-filtro{ font:inherit; font-size:12.5px; color:var(--a2-t2); background:var(--a2-surface); border:1px solid var(--a2-line); border-radius:999px; padding:4px 11px; cursor:pointer; }
.a2-gal-filtro b{ font-weight:600; color:var(--a2-t3); margin-left:3px; }
.a2-gal-filtro[aria-pressed="true"]{ background:var(--a2-t1); border-color:var(--a2-t1); color:#fff; }
.a2-gal-filtro[aria-pressed="true"] b{ color:#fff; opacity:.75; }
.a2-gal-filtro:focus-visible{ outline:2px solid var(--a2-acc); outline-offset:2px; }
.a2-gal-sw{ font-size:12.5px; }
/* «Riapplica il brand a tutta la galleria», in fondo alla barra. */
.a2-gal-riapplica{ margin:0 0 0 auto; }
.a2-gal-bd{ display:flex; flex-direction:column; padding:0; }
.a2-gal-tipo{ margin:0; padding:14px 16px 16px; border-top:1px solid var(--a2-line); }
.a2-gal-tipo:first-child{ border-top:0; }
.a2-gal-tipo-hd{ display:flex; flex-direction:column; gap:5px; margin-bottom:12px; }
.a2-gal-tipo-t{ display:flex; align-items:center; flex-wrap:wrap; gap:6px 12px; font-size:14px; font-weight:600; color:var(--a2-t1); }
.a2-gal-fmt-t{ display:inline-flex; align-items:center; gap:10px; }
.a2-gal-tipo-h{ font-size:inherit; font-weight:inherit; }
.a2-gal-tipo-nm{ color:var(--a2-t1); text-decoration:none; }
.a2-gal-tipo-nm:hover{ color:var(--a2-acc-h); }
.a2-gal-tipo-n{ font-size:12px; font-weight:500; color:var(--a2-t3); font-variant-numeric:tabular-nums; }
.a2-gal-nprop{ color:var(--a2-obs-700); font-weight:600; }
.a2-gal-tipo-s{ display:flex; flex-wrap:wrap; align-items:center; gap:6px 14px; font-size:12.5px; color:var(--a2-t2); }
.a2-gal-dist{ max-width:760px; }
.a2-gal-scopo{ font-size:12.5px; color:var(--a2-t2); line-height:1.45; max-width:760px; }
.a2-gal-tipo-az{ margin:0; padding-top:0; }
.a2-gal-griglia{ display:flex; flex-wrap:wrap; gap:14px; align-items:flex-start; }
.a2-gal-es{ margin:0; width:226px; display:flex; flex-direction:column; gap:7px; }
.a2-gal-es figcaption{ display:flex; flex-direction:column; align-items:flex-start; gap:4px; font-size:12.5px; }
.a2-gal-es-nm{ font-weight:600; color:var(--a2-t1); text-decoration:none; overflow-wrap:anywhere; }
a.a2-gal-es-nm:hover{ color:var(--a2-acc-h); }
.a2-gal-bdg{ display:flex; flex-wrap:wrap; gap:4px; }
.a2-gal-usi{ font-size:11.5px; color:var(--a2-t3); }
.a2-gal-es .a2-tpl-az{ margin-top:2px; padding-top:0; }
.a2-gal-pred{ font-size:11px; font-weight:600; color:#8A6A0B; background:#FBF3D6; border-radius:999px; padding:1px 7px; }
.a2-gal-tag-prop{ background:var(--a2-obs-100); color:var(--a2-obs-700); }
.a2-gal-es-prop .a2-tpl-mini{ box-shadow:none; outline:1.5px dashed var(--a2-obs-500); outline-offset:-1.5px; background:var(--a2-obs-25); }
.a2-gal-senza-proposte .a2-gal-es-prop{ display:none; }
/* Gli archiviati: fuori dalla galleria, nella loro vista (?vista=archiviati), un po' spenti. */
.a2-gal-es-arch .a2-tpl-mini{ opacity:.6; }
.a2-gal-arch-link{ font-size:12.5px; }
.a2-tf-arch-hd{ display:flex; align-items:center; flex-wrap:wrap; gap:8px 14px; margin:0 0 14px; }
.a2-tf-arch-hd .a2-hint{ margin:0; flex:1 1 320px; }
.a2-gal-es-az form{ margin:0; }
/* «A che cosa serve» sulle tessere degli approvati, e «Proponi le descrizioni» nell'intestazione del tipo. */
.a2-gal-descr{ display:flex; flex-direction:column; align-items:flex-start; gap:4px; width:100%; margin:2px 0 0; }
.a2-gal-descr-l{ font-size:11.5px; font-weight:600; color:var(--a2-t2); }
.a2-gal-descr-t{ width:100%; box-sizing:border-box; min-height:52px; font-size:12px; padding:6px 8px; }
.a2-gal-descr-h{ font-size:11px; color:var(--a2-t3); }
.a2-gal-descr-v{ font-size:11.5px; color:var(--a2-t2); line-height:1.45; overflow-wrap:anywhere; }
.a2-gal-descr-tutte{ margin:0; }
.a2-gal-nuovo{ box-sizing:border-box; width:150px; min-height:127px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; text-align:center; border:1.5px dashed var(--a2-line-str); border-radius:var(--a2-r2); color:var(--a2-t2); font-size:12.5px; text-decoration:none; padding:10px; }
.a2-gal-nuovo b{ font-weight:600; color:var(--a2-t1); }
.a2-gal-nuovo span{ font-size:11.5px; color:var(--a2-t3); }
a.a2-gal-nuovo:hover{ background:var(--a2-sunken); }
.a2-gal-nuovo-no{ opacity:.7; }
.a2-gal-altri{ margin-top:16px; }
.a2-gal-elenco{ list-style:none; margin:0; padding:4px 0; }
.a2-gal-elenco > li{ display:flex; flex-wrap:wrap; align-items:center; gap:6px 12px; padding:8px 18px; font-size:13px; border-top:1px solid var(--a2-line); }
.a2-gal-elenco > li:first-child{ border-top:0; }
.a2-gal-elenco .a2-lst-nm{ color:var(--a2-t1); text-decoration:none; }
.a2-gal-elenco .a2-lst-nm:hover{ color:var(--a2-acc-h); }
.a2-gal-elenco .a2-tpl-az{ margin:0 0 0 auto; padding-top:0; }
.a2-gal-nota{ display:flex; align-items:center; gap:8px; max-width:none; margin-top:12px; }
.a2-gal-nota .a2-ico{ flex:none; }
@media (max-width: 560px){ .a2-gal-es, .a2-gal-nuovo{ width:100%; } }

/* Brand › Galleria › i canali (mockup 21, scena «canali»): in cima l'editor
   dei canali dell'azienda (.a2-can-ed, galleria.js aggiorna «Come lo leggono
   i prompt») e che cosa mostra la galleria (.a2-can-mostra); nella sezione
   Grafica un gruppo per canali (.a2-can-gr) e una riga per formato del
   catalogo (.a2-can-f): a sinistra nome, misura e natura, a destra i tipi
   (.a2-gal-tipo, come negli altri formati) o «Crea il template», «in arrivo»,
   «basta la caption». Le icone dei canali sono in _IconeCanali. */
.a2-can-top{ display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); gap:16px; align-items:start; margin:14px 0 4px; }
.a2-can-top > .a2-card{ margin:0; }
.a2-can-asset{ text-decoration:none; color:var(--a2-t1); }
.a2-can-asset:hover .a2-card-t{ color:var(--a2-acc-h); }
.a2-can-bd{ display:flex; flex-direction:column; gap:14px; }
.a2-can-cans{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:8px; margin:0; padding:0; border:0; min-width:0; }
.a2-can-casella{ display:flex; align-items:center; gap:8px; padding:8px 10px; border:1px solid var(--a2-line); border-radius:var(--a2-r2); font-size:13px; font-weight:600; color:var(--a2-t1); background:var(--a2-surface); cursor:pointer; min-width:0; }
.a2-can-casella small{ margin-left:auto; font-size:11px; font-weight:400; color:var(--a2-t3); white-space:nowrap; }
.a2-can-casella.a2-can-on{ border-color:var(--a2-acc); box-shadow:0 0 0 1px var(--a2-acc); background:var(--a2-acc-50); }
.a2-can-casella:has(input:disabled){ cursor:default; }
.a2-can-c{ display:inline-flex; align-items:center; gap:5px; white-space:nowrap; }
.a2-can-ic{ width:14px; height:14px; fill:currentColor; stroke:none; flex:none; color:var(--a2-t2); }
.a2-can-campo{ display:flex; flex-direction:column; gap:5px; font-size:13px; }
.a2-can-k{ font-size:12px; font-weight:600; color:var(--a2-t2); }
.a2-can-k small{ font-size:12px; font-weight:400; color:var(--a2-t3); }
.a2-can-letto{ margin:0; padding:8px 10px; font-family:var(--a2-f-mono); font-size:12px; line-height:1.6; color:var(--a2-t1); background:var(--a2-sunken); border-radius:var(--a2-r2); white-space:pre-wrap; overflow-wrap:anywhere; }
.a2-can-letto:empty::before{ content:"(vuoto: nessun canale e nessuna nota)"; color:var(--a2-t3); }
.a2-can-ft-hint{ max-width:none; }
.a2-can-seg{ display:flex; flex-wrap:wrap; gap:6px; }
.a2-can-seg a{ font-size:12.5px; color:var(--a2-t2); background:var(--a2-surface); border:1px solid var(--a2-line); border-radius:999px; padding:4px 12px; text-decoration:none; }
.a2-can-seg a b{ font-weight:600; opacity:.7; margin-left:3px; }
.a2-can-seg a[aria-current="true"]{ background:var(--a2-t1); border-color:var(--a2-t1); color:#fff; }
.a2-can-seg a:focus-visible{ outline:2px solid var(--a2-acc); outline-offset:2px; }
.a2-can-conti{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; font-size:12.5px; color:var(--a2-t2); }
.a2-can-conti li{ display:flex; align-items:center; flex-wrap:wrap; gap:6px; }
.a2-can-conti b{ color:var(--a2-t1); }
.a2-can-nat{ display:inline-flex; align-items:center; width:fit-content; padding:1px 8px; border-radius:999px; font-size:11px; font-weight:600; white-space:nowrap; }
.a2-can-nat-una{ background:var(--a2-sunken); color:var(--a2-t2); box-shadow:inset 0 0 0 1px var(--a2-line); }
.a2-can-nat-piu{ background:var(--a2-fmt-word-bg); color:var(--a2-fmt-word); }
.a2-can-nat-tempo{ background:var(--a2-fmt-html-bg); color:var(--a2-fmt-html); }
.a2-can-nat-testo{ background:var(--a2-acc-50); color:var(--a2-acc-h); }
.a2-can-gr{ border-top:1px solid var(--a2-line); }
.a2-can-gr:first-child{ border-top:0; }
.a2-can-gr-hd{ display:flex; align-items:center; flex-wrap:wrap; gap:6px 14px; padding:12px 16px; background:var(--a2-sunken); border-bottom:1px solid var(--a2-line); }
.a2-can-gr-c{ display:inline-flex; flex-wrap:wrap; gap:6px 12px; font-size:13.5px; font-weight:600; color:var(--a2-t1); }
.a2-can-f{ display:grid; grid-template-columns:200px minmax(0,1fr); gap:18px; padding:14px 16px; border-top:1px solid var(--a2-line); }
.a2-can-gr-hd + .a2-can-f{ border-top:0; }
.a2-can-fi{ display:flex; flex-direction:column; gap:5px; font-size:12.5px; min-width:0; }
.a2-can-fn{ font-size:13.5px; font-weight:650; color:var(--a2-t1); }
.a2-can-fi-r{ display:flex; align-items:center; flex-wrap:wrap; gap:8px; }
.a2-can-mis{ font-family:var(--a2-f-mono); font-size:11.5px; color:var(--a2-t3); white-space:nowrap; }
.a2-can-fc{ display:inline-flex; flex-wrap:wrap; gap:6px; color:var(--a2-t2); }
.a2-can-fb{ display:flex; flex-direction:column; gap:14px; min-width:0; }
.a2-can-fb > .a2-gal-tipo, .a2-can-altri > .a2-gal-tipo{ padding:0; border-top:0; }
.a2-can-altri{ display:flex; flex-direction:column; gap:18px; padding:14px 16px 16px; }
.a2-can-crea, .a2-can-arrivo{ display:flex; align-items:center; gap:14px; width:fit-content; max-width:100%; padding:10px 16px 10px 12px; border-radius:var(--a2-r2); font-size:12.5px; line-height:1.45; color:var(--a2-t2); }
.a2-can-crea{ border:1.5px dashed var(--a2-acc); background:var(--a2-acc-50); text-decoration:none; }
a.a2-can-crea:hover{ background:var(--a2-acc-50-h); }
.a2-can-crea b{ display:flex; align-items:center; gap:6px; margin-bottom:2px; font-size:13.5px; font-weight:650; color:var(--a2-acc-h); }
.a2-can-crea-no{ border-color:var(--a2-line-str); background:var(--a2-sunken); }
.a2-can-crea-no b{ color:var(--a2-t2); }
.a2-can-crea-t{ display:flex; flex-direction:column; align-items:flex-start; gap:5px; min-width:0; }
.a2-can-sagoma{ display:block; flex:none; border:1.5px dashed var(--a2-acc); border-radius:3px; background:var(--a2-surface); }
.a2-can-sagoma-off{ border-color:var(--a2-line-str); background:transparent; }
.a2-can-arrivo{ background:var(--a2-sunken); }
.a2-can-sag{ display:flex; align-items:flex-end; gap:4px; flex:none; }
.a2-can-solotesto{ background:var(--a2-acc-50); }
.a2-can-testo-ic{ flex:none; width:20px; height:20px; color:var(--a2-acc-h); }
.a2-can-tag{ display:inline-flex; align-items:center; gap:5px; padding:3px 9px; border-radius:999px; font-size:11.5px; font-weight:600; white-space:nowrap; }
.a2-can-tag .a2-ico{ width:13px; height:13px; }
.a2-can-tag-arr{ background:var(--a2-surface); color:var(--a2-t2); box-shadow:inset 0 0 0 1px var(--a2-line-str); }
.a2-can-tag-cap{ background:var(--a2-acc-100); color:var(--a2-acc-h); }
.a2-can-fuori{ display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 10px; max-width:none; margin:0; padding:12px 16px; border-top:1px solid var(--a2-line); line-height:1.6; }
@media (max-width: 900px){ .a2-can-top{ grid-template-columns:minmax(0,1fr); } }
@media (max-width: 640px){ .a2-can-cans{ grid-template-columns:repeat(2, minmax(0,1fr)); } .a2-can-f{ grid-template-columns:minmax(0,1fr); gap:10px; } }

/* Esegui › Esemplari per la galleria (mockup 20, scena «proponi»): la scelta
   (.a2-gal-cosa: tipo, quanti, parte da), le proposte in griglia (.a2-gal-pr,
   con la miniatura del Dossier, .a2-tpl-mini) e i pulsanti sotto
   (esecuzione-esemplari.js). */
.a2-gal-cosa{ display:flex; flex-direction:column; gap:12px; margin-top:10px; }
.a2-gal-cosa-r{ display:flex; align-items:center; flex-wrap:wrap; gap:8px 12px; font-size:13px; }
.a2-gal-cosa-col{ align-items:flex-start; flex-direction:column; gap:6px; }
.a2-gal-cosa-k{ width:96px; font-size:12px; font-weight:600; color:var(--a2-t2); }
.a2-gal-seg{ display:inline-flex; gap:4px; }
.a2-gal-seg button{ font:inherit; font-size:12.5px; min-width:38px; color:var(--a2-t2); background:var(--a2-surface); border:1px solid var(--a2-line); border-radius:999px; padding:4px 11px; cursor:pointer; }
.a2-gal-seg button[aria-pressed="true"]{ background:var(--a2-t1); border-color:var(--a2-t1); color:#fff; }
.a2-gal-seg button:focus-visible{ outline:2px solid var(--a2-acc); outline-offset:2px; }
.a2-gal-prop{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:14px; width:100%; }
.a2-gal-prop:empty{ display:none; }
.a2-gal-pr{ display:flex; flex-direction:column; gap:7px; padding:10px; border:1px solid var(--a2-line); border-radius:var(--a2-r2); background:var(--a2-surface); min-width:0; }
.a2-gal-pr-on{ border-color:var(--a2-acc); box-shadow:0 0 0 1px var(--a2-acc); }
.a2-gal-pr-attesa .a2-tpl-mini{ animation:a2-gal-pr-attesa 1.4s ease-in-out infinite alternate; }
@keyframes a2-gal-pr-attesa{ from{ opacity:.55; } to{ opacity:1; } }
.a2-gal-pr-errore{ border-style:dashed; }
.a2-gal-pr-errore .a2-err-msg{ margin:0; font-size:12px; }
.a2-gal-pr-fatta{ background:var(--a2-sunken); }
.a2-gal-pr .a2-tag{ align-self:flex-start; }
.a2-gal-pr-tieni{ display:flex; align-items:center; gap:6px; font-size:12.5px; font-weight:600; color:var(--a2-t1); cursor:pointer; }
.a2-gal-pr-c{ font-size:12px; color:var(--a2-t3); line-height:1.4; overflow-wrap:anywhere; }
.a2-gal-pr-pred{ font-weight:500; color:var(--a2-t2); }
.a2-gal-pr-pred[hidden]{ display:none; }
.a2-gal-pr-stella{ border-color:#C9A227; box-shadow:0 0 0 1px #C9A227; }
.a2-gal-pr .a2-gal-pred{ align-self:flex-start; }
.a2-gal-prop-ft{ display:flex; align-items:center; flex-wrap:wrap; gap:10px; width:100%; padding-top:12px; border-top:1px solid var(--a2-line); }
.a2-gal-prop-ft[hidden]{ display:none; }
.a2-gal-prop-ft .a2-hint{ flex:1 1 280px; }
@media (prefers-reduced-motion: reduce){ .a2-gal-pr-attesa .a2-tpl-mini{ animation:none; } }

/* Esegui › «Si costruisce su» per figure (mockup 20, scena «scegli»): una
   riga intera della griglia degli ingredienti, le schede dei tipi
   (.a2-gal-sc-tipi, con i filtri della galleria, .a2-gal-filtro; il punto
   sulla scheda che ha la figura scelta), sotto un solo gruppo di scelta
   (.a2-gal-sc-scelta) con le figure (.a2-gal-sc, con la miniatura del
   Dossier, .a2-tpl-mini) e «nessun template» (esecuzione-base.js). Senza
   script le schede restano nascoste e si vedono tutte le figure. */
.a2-gal-sc-tipi{ display:flex; flex-wrap:wrap; gap:6px; margin:2px 0 4px; }
.a2-gal-sc-tipi[hidden], .a2-gal-sc-griglia[hidden]{ display:none; }
.a2-gal-sc-tipi .a2-gal-filtro[data-con-scelta]::before{ content:""; display:inline-block; width:6px; height:6px; margin-right:6px; border-radius:50%; background:var(--a2-acc); vertical-align:middle; }
.a2-gal-sc-scelta{ display:flex; flex-direction:column; gap:10px; }
.a2-gal-sc-griglia{ display:flex; flex-wrap:wrap; gap:10px; }
.a2-gal-sc{ position:relative; box-sizing:border-box; width:150px; display:flex; flex-direction:column; align-items:center; gap:6px; padding:10px 8px 8px; border:1px solid var(--a2-line); border-radius:var(--a2-r2); background:var(--a2-surface); cursor:pointer; font-size:12px; color:var(--a2-t2); text-align:center; }
.a2-gal-sc:hover{ border-color:var(--a2-line-str); }
.a2-gal-sc .a2-chk{ position:absolute; left:6px; top:6px; z-index:1; margin:0; }
.a2-gal-sc .a2-tpl-mini{ width:100%; }
.a2-gal-sc .a2-tpl-mini.verticale{ --a2-tpl-mini-h:74px; }
.a2-gal-sc-nm{ overflow-wrap:anywhere; line-height:1.35; }
.a2-gal-sc-s{ font-size:11px; color:var(--a2-t3); }
.a2-gal-sc-on{ border-color:var(--a2-acc); box-shadow:0 0 0 1px var(--a2-acc); color:var(--a2-t1); font-weight:600; }
.a2-gal-sc-no{ cursor:not-allowed; opacity:.6; }
.a2-gal-sc:has(.a2-chk:focus-visible){ outline:2px solid var(--a2-acc); outline-offset:2px; }
.a2-gal-sc-altro{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 16px; font-size:12.5px; }
.a2-gal-sc-senza{ align-self:flex-start; display:inline-flex; align-items:center; gap:6px; cursor:pointer; font-size:12.5px; color:var(--a2-t2); }
@media (max-width: 560px){ .a2-gal-sc{ width:calc(50% - 5px); } }

/* La pagina di un esemplare (mockup 20, scena 3): a sinistra il disegno con
   le zone e il file, a destra da dove viene (.a2-gal-dl), il nome e il
   riquadro su Canva (.a2-gal-canva). */
.a2-gal-dett{ display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); gap:16px; align-items:start; }
@media (max-width: 1000px){ .a2-gal-dett{ grid-template-columns:minmax(0,1fr); } }
.a2-gal-dett .a2-card-ft form{ margin:0; }
.a2-gal-zone{ max-width:none; margin:10px 0 0; }
/* Le zone di ogni pagina madre di una grafica a più pagine: una riga per pagina. */
.a2-gal-zone-pagine{ list-style:none; padding:0; display:grid; gap:3px; margin-top:4px; }
.a2-gal-zone-pagine b{ color:var(--a2-t1); font-weight:600; }
.a2-gal-dl{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:7px 14px; margin:0; font-size:13px; }
.a2-gal-dl dt{ color:var(--a2-t3); font-size:12px; padding-top:1px; }
.a2-gal-dl dd{ margin:0; color:var(--a2-t1); line-height:1.5; overflow-wrap:anywhere; }
.a2-gal-nome{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px 10px; align-items:center; }
.a2-gal-nome .a2-hint{ grid-column:1 / -1; margin:0; max-width:none; }
.a2-gal-canva{ display:flex; gap:10px; align-items:flex-start; padding:12px 14px; border-radius:var(--a2-r2); background:var(--a2-acc-50); font-size:12.5px; line-height:1.5; color:var(--a2-t2); }
.a2-gal-canva b{ color:var(--a2-t1); }
.a2-gal-canva p{ margin:0; }
.a2-gal-canva p + p{ margin-top:6px; }
.a2-gal-canva .a2-ico{ flex:none; margin-top:2px; color:var(--a2-t2); }
/* Le azioni di Canva nel riquadro (Porta, Apri, Riprendi), come nella pagina di un template. */
.a2-gal-canva-act{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:10px; }
.a2-gal-canva-act form{ margin:0; }
.a2-gal-canva-act .a2-ico{ margin-top:0; color:inherit; }
/* «Usa per un post» con piu' prompt: una tendina di link, come «Nuovo template originale» del Dossier. */
.a2-gal-usa{ position:relative; }
.a2-gal-usa > summary{ list-style:none; cursor:pointer; }
.a2-gal-usa > summary::-webkit-details-marker{ display:none; }
.a2-gal-usa .a2-menu{ left:auto; right:0; min-width:240px; max-width:calc(100vw - 32px); }
.a2-gal-usa[open] .a2-menu{ opacity:1; transform:none; pointer-events:auto; }
.a2-gal-usa .a2-menu-item{ color:var(--a2-t1); text-decoration:none; }
.a2-gal-nota-uso{ margin:6px 0 0; }
@media (max-width: 1100px){ .a2-gal-prop{ grid-template-columns:repeat(3, minmax(0,1fr)); } }
@media (max-width: 760px){ .a2-gal-prop{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width: 460px){ .a2-gal-prop{ grid-template-columns:1fr; } }

/* La pagina del template, sezione «Contenuto»: l'anteprima vera (mockup 18,
   anteprima-contenuto.js). Le pagine sono quelle di Esegui (.a2-progetto,
   .a2-tela, .a2-pagina, .a2-foglio-progetto): qui il contenitore, il clic per
   ingrandire, la nota, lo schema testuale chiuso e la pagina ingrandita. */
.a2-anteprima{ display:flex; flex-direction:column; gap:10px; }
.a2-anteprima:empty{ display:none; }
.a2-anteprima .a2-idea{ margin:2px 0 0; }
/* Ogni pagina si apre grande: tutta la cella e' il bersaglio. */
.a2-anteprima-pag{ cursor:zoom-in; border-radius:4px; outline:none; }
.a2-anteprima-pag:hover > .a2-tela, .a2-anteprima-pag:hover > .a2-pagina{ box-shadow:0 0 0 2px var(--a2-acc), 0 2px 6px rgba(16,24,40,.16); }
.a2-anteprima-pag:focus-visible > .a2-tela, .a2-anteprima-pag:focus-visible > .a2-pagina{ box-shadow:0 0 0 3px var(--a2-acc); }
.a2-anteprima-pag .a2-progetto-did b{ font-weight:600; color:var(--a2-t2); font-variant-numeric:tabular-nums; }
/* La grafica salvata (PNG) accanto alla sua tela; se il disegno c'e', il PNG o
   il PDF sotto, quelli di prima, lasciano il posto all'anteprima. */
.a2-anteprima-png{ display:block; width:100%; height:auto; border-radius:3px; box-shadow:0 1px 2px rgba(16,24,40,.14), 0 0 0 1px rgba(16,24,40,.06); }
.a2-anteprima-pag:hover > .a2-anteprima-png{ box-shadow:0 0 0 2px var(--a2-acc), 0 2px 6px rgba(16,24,40,.16); }
.a2-anteprima-pag:focus-visible > .a2-anteprima-png{ box-shadow:0 0 0 3px var(--a2-acc); }
.a2-anteprima:not(:empty) ~ .a2-grafica-file{ display:none; }
/* Il foglio: largo quanto la colonna, scorre se serve. */
.a2-anteprima .a2-foglio-progetto{ min-width:0; }

/* Una riga che dice perche' l'anteprima manca (file caricato, o generato prima
   del disegno), o che i colori sono quelli di adesso (template da rigenerare). */
.a2-anteprima-nota{ display:flex; align-items:flex-start; gap:7px; margin:0; font-size:12.5px; line-height:1.5; color:var(--a2-t3); }
.a2-anteprima-nota > svg{ flex:none; width:15px; height:15px; margin-top:2px; }
.a2-anteprima-nota b{ font-weight:600; color:var(--a2-t2); }
/* La riga sopra l'anteprima va via con lei, se il disegno non riesce. */
.a2-anteprima-nota:has(+ .a2-anteprima:empty){ display:none; }
/* «Il file non si e' potuto leggere» non vale piu' se l'anteprima e' disegnata. */
.a2-anteprima:not(:empty) ~ .a2-anteprima-illeggibile{ display:none; }

/* Lo schema testuale, sotto l'anteprima o la cornice: si apre per leggere e copiare. */
.a2-det-testo{ border-top:1px solid var(--a2-line); padding-top:10px; }
.a2-det-testo > summary{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; cursor:pointer; list-style:none; font-size:var(--a2-fs-meta); color:var(--a2-acc-h); }
.a2-det-testo > summary::-webkit-details-marker{ display:none; }
.a2-det-testo > summary > svg{ width:14px; height:14px; transition:transform var(--a2-fast) var(--a2-ease); transform:rotate(-90deg); }
.a2-det-testo[open] > summary > svg{ transform:none; }
.a2-det-testo-n{ color:var(--a2-t3); }
.a2-det-testo[open] .a2-det-mostra, .a2-det-testo:not([open]) .a2-det-nascondi{ display:none; }
.a2-det-testo > .a2-slide-elenco{ margin-top:10px; }

/* La pagina ingrandita. */
.a2-lente{ padding:0; border:0; border-radius:var(--a2-r3); background:var(--a2-surface); box-shadow:0 20px 50px rgba(16,24,40,.35); max-width:94vw; max-height:94vh; overflow:auto; }
.a2-lente::backdrop{ background:rgba(16,22,36,.62); }
.a2-lente-hd{ display:flex; align-items:center; gap:10px; padding:10px 14px; border-bottom:1px solid var(--a2-line); font-size:13px; }
.a2-lente-hd b{ font-weight:600; color:var(--a2-t1); }
.a2-lente-n{ color:var(--a2-t3); font-variant-numeric:tabular-nums; }
.a2-lente-az{ display:flex; gap:6px; margin-left:auto; }
.a2-lente-corpo{ padding:16px; background:var(--a2-sunken); }
.a2-lente-corpo > .a2-tela{ width:min(1100px, 88vw, calc((94vh - 100px) * 1000 / 562.5)); }
.a2-lente-corpo > .a2-tela-a4, .a2-lente-corpo > .a2-pagina{ width:min(88vw, calc((94vh - 100px) * 1000 / 1414)); }
.a2-lente-corpo > .a2-anteprima-png{ width:auto; max-width:min(1100px, 88vw); max-height:calc(94vh - 100px); margin:0 auto; }

/* Un avviso con piu' esiti, uno per riga (Riapplica il brand): vedi _Avviso. */
.a2-avviso-righe > span{ white-space:pre-line; }

/* Un dialogo come pagina dello spazio (Nuova variante), con i campi del mockup. */
.a2-dialogo-pagina{ display:block; margin:0; background:var(--a2-surface); }
.a2-dialogo-pagina .a2-dialogo-titolo{ margin:0; }
.a2-campo{ display:flex; flex-direction:column; gap:4px; margin-bottom:12px; }
.a2-campo:last-child{ margin-bottom:0; }
.a2-campo > label{ font-size:12.5px; font-weight:600; color:var(--a2-t2); }

/* Aggiorna › Da rigenerare: i template obsoleti di un passo che progetta un
   template, la madre e poi le varianti (mockup 12, «In Aggiorna», .mk-agg*). */
.a2-lst td.a2-agg-td{ border-top:0; padding-top:0; }
.a2-agg{ background:var(--a2-surface); border:1px solid var(--a2-line); border-radius:var(--a2-r3); }
.a2-agg-r{ display:grid; grid-template-columns:22px minmax(0,1fr) auto; gap:10px; align-items:center; padding:12px 16px; border-top:1px solid var(--a2-line); font-size:13px; color:var(--a2-t2); }
.a2-agg-r:first-child{ border-top:0; }
.a2-agg-r.a2-agg-sub{ padding-left:44px; background:var(--a2-sunken); }
.a2-agg-r b{ color:var(--a2-t1); }
.a2-agg-n{ display:block; color:var(--a2-t3); font-size:12px; margin-top:2px; }
.a2-agg-ico{ color:var(--a2-obs-500); }
.a2-agg-ico-segue{ color:var(--a2-t3); }
@media (max-width: 900px){
  .a2-agg-r{ grid-template-columns:22px minmax(0,1fr); }
  .a2-agg-r > :last-child{ grid-column:2; justify-content:flex-start; }
  .a2-agg-r.a2-agg-sub{ padding-left:28px; }
}

/* Orientamento: i due segni di un asset, uguali in ogni pagina (mockup 13,
   righe 37-118, con il prefisso a2-). Chi lo fa (.a2-chi) e com'e' adesso
   (.a2-st, la pillola); il testo e le classi stanno in Legenda, il disegno
   nella partial _Spunte. */
.a2-st{ display:inline-flex; align-items:center; gap:5px; font-size:12px; font-weight:550; line-height:1; padding:4px 8px 4px 6px; border-radius:999px; white-space:nowrap; }
.a2-st .a2-ico{ width:13px; height:13px; flex:none; }
.a2-st-ok{ background:var(--a2-acc-100); color:var(--a2-acc-h); }
.a2-st-rig{ background:var(--a2-obs-100); color:var(--a2-obs-700); }
/* Da rivedere: un fatto nato da una proposta i cui asset letti sono cambiati.
   Non e' obsolescenza (l'ambra e' riservata a quella): il giallo ha i suoi
   token, --a2-riv-*. */
.a2-st-riv{ background:var(--a2-riv-100); color:var(--a2-riv-700); box-shadow:inset 0 0 0 1px var(--a2-riv-200); }
.a2-st-pronto{ background:var(--a2-run-100); color:var(--a2-run-700); }
.a2-st-aspetta{ background:var(--a2-surface); color:var(--a2-t2); box-shadow:inset 0 0 0 1px var(--a2-line-str); }
.a2-st-vuoto{ background:var(--a2-surface); color:var(--a2-t3); box-shadow:inset 0 0 0 1px var(--a2-line-str); }
.a2-st-fac{ background:var(--a2-surface); color:var(--a2-t3); box-shadow:inset 0 0 0 1px var(--a2-line); border:1px dashed var(--a2-line-str); padding:3px 7px 3px 5px; }
.a2-chi{ display:inline-flex; align-items:center; gap:4px; font-size:11.5px; color:var(--a2-t3); white-space:nowrap; }
.a2-chi .a2-ico{ width:12px; height:12px; }
.a2-chi-p{ color:var(--a2-prompt); }
.a2-st-why{ display:block; font-size:12px; color:var(--a2-t3); margin-top:4px; line-height:1.45; }
.a2-st-why a{ color:var(--a2-acc-h); }

/* I conti di una sezione: aggiornati in verde, da rivedere in giallo, da rigenerare in ambra, il resto vuoto. */
.a2-bar3{ display:flex; height:6px; border-radius:99px; overflow:hidden; background:var(--a2-sunken); width:120px; }
.a2-bar3 i{ display:block; }
.a2-bar3 .v{ background:var(--a2-acc); }
.a2-bar3 .r{ background:var(--a2-riv-500); }
.a2-bar3 .a{ background:var(--a2-obs-500); }
.a2-conti .a2-conti-riv, .a2-conti .a2-conti-riv b{ color:var(--a2-riv-700); }
.a2-conti{ display:inline-flex; gap:10px; font-size:12px; color:var(--a2-t3); align-items:center; }
.a2-conti b{ color:var(--a2-t1); font-weight:600; }

/* La scheda (o la riga) appena salvata, quando si torna al Dossier. */
.a2-dt-appena, .a2-dt-appena:hover{ box-shadow:0 0 0 2px var(--a2-acc); }
.a2-el tr.a2-dt-appena td{ background:var(--a2-acc-50); }

/* La vista elenco del Dossier, come le righe dell'originale, e l'interruttore schede / elenco. */
.a2-el{ width:100%; border-collapse:collapse; background:var(--a2-surface); border:1px solid var(--a2-line); border-radius:var(--a2-r3); overflow:hidden; font-size:13px; }
.a2-el th{ text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--a2-t3); font-weight:600; padding:8px 12px; background:var(--a2-sunken); border-bottom:1px solid var(--a2-line); }
.a2-el td{ padding:8px 12px; border-bottom:1px solid var(--a2-line); vertical-align:middle; }
.a2-el tr:last-child td{ border-bottom:0; }
.a2-el td.a2-el-n a{ color:var(--a2-t1); font-weight:550; text-decoration:none; }
.a2-el td.a2-el-az{ text-align:right; white-space:nowrap; }
.a2-vista{ display:inline-flex; border:1px solid var(--a2-line); border-radius:999px; overflow:hidden; }
.a2-vista button{ font:inherit; font-size:12.5px; background:var(--a2-surface); color:var(--a2-t2); border:0; padding:5px 12px; cursor:pointer; }
.a2-vista button.on, .a2-vista button[aria-pressed="true"]{ background:var(--a2-acc-100); color:var(--a2-acc-h); font-weight:600; }

/* Il filo: dove sei (partial _Filo). */
.a2-filo{ display:flex; align-items:center; gap:6px; font-size:12.5px; color:var(--a2-t3); flex-wrap:wrap; margin-bottom:10px; }
.a2-filo a{ color:var(--a2-t2); text-decoration:none; }
.a2-filo a:hover{ color:var(--a2-acc-h); text-decoration:underline; }
.a2-filo .a2-ico{ width:12px; height:12px; color:var(--a2-t-off); }
.a2-filo b{ color:var(--a2-t1); font-weight:600; }

/* Dopo il salvataggio: cosa manca ancora, e cosa e' diventato pronto. */
.a2-poi{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; background:var(--a2-acc-50); border:1px solid var(--a2-acc-100-str, var(--a2-acc-100)); border-radius:var(--a2-r3); padding:10px 14px; margin-bottom:14px; font-size:13px; color:var(--a2-t1); }
.a2-poi .a2-ico{ color:var(--a2-acc-h); }
.a2-poi-el{ display:flex; gap:6px; flex-wrap:wrap; }
.a2-poi-el a{ display:inline-flex; align-items:center; gap:5px; font-size:12.5px; color:var(--a2-acc-h); background:var(--a2-surface); border:1px solid var(--a2-line); border-radius:999px; padding:3px 10px; text-decoration:none; }
.a2-poi-az{ margin-left:auto; display:flex; gap:8px; }

/* La pagina dell'asset: il segnaposto nella riga sotto il titolo,
   e le due righe dopo il salvataggio in un solo riquadro. Nella riga,
   il segno di ogni nome e' la sola icona, nel colore del suo stato. */
.a2-head-meta code{ font-family:var(--a2-f-mono); font-size:12px; background:var(--a2-sunken); padding:1px 6px; border-radius:4px; color:var(--a2-t2); }
.a2-poi-col{ flex-direction:column; align-items:stretch; gap:8px; }
.a2-poi-riga{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.a2-poi-riga + .a2-poi-riga{ border-top:1px solid var(--a2-acc-100); padding-top:8px; }
.a2-poi .a2-st .a2-ico{ color:inherit; }
.a2-poi-el .a2-st{ padding:0; background:none; box-shadow:none; border:0; }
.a2-poi-altri{ align-self:center; font-size:12.5px; color:var(--a2-t2); }

/* Il Dossier con i segni: chi lo fa sotto il nome, lo stato nel piede;
   i conti e l'interruttore schede / elenco nella testata della sezione. */
.a2-dos-sez-conti{ margin-left:auto; }
.a2-dos-cat .a2-bar3{ width:100%; height:5px; }
.a2-dt-chi{ display:flex; margin-top:-3px; }
.a2-fam-testo > .a2-dt-chi{ margin-top:-2px; }
.a2-dt-ft > .a2-st, .a2-dt-az > .a2-st{ flex:none; }
.a2-dt-az > .a2-st{ margin-right:auto; }
.a2-dt-da{ margin-top:auto; font-size:11.5px; color:var(--a2-t3); min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.a2-dt-da + .a2-dt-ft{ margin-top:0; }
.a2-dt > .a2-st-why{ margin-top:0; }
.a2-fam-st .a2-st-why{ margin-top:5px; }
.a2-el-wrap{ overflow-x:auto; }
.a2-el td .a2-st-why{ margin-top:3px; }
.a2-el td.a2-el-az form{ display:inline; }

.a2-scheda-tab .a2-st{ padding:2px 7px 2px 5px; font-size:11px; }
.a2-scheda-tab .a2-st .a2-ico, .a2-scheda-tab[aria-current="page"] .a2-st .a2-ico{ color:inherit; width:12px; height:12px; }
.a2-tpl-motivo .a2-st-why{ margin-top:0; }
.a2-agg-r .a2-st{ margin-left:6px; vertical-align:middle; }
.a2-agg-r .a2-st-why{ margin-top:3px; }
/* Esegui, dopo il salvataggio: i prompt diventati pronti, su una riga sua. */
.a2-esito-salvato-pronti{ flex-basis:100%; display:flex; gap:8px; align-items:center; justify-content:flex-end; flex-wrap:wrap; font-size:13px; color:var(--a2-t1); }

/* ---------------------------------------------------------------------
   Segni di prompt e asset (_Segno). Un cerchio accanto al nome, che resta
   testo normale: indaco per i prompt, bruno per gli asset. Rotondo, mentre
   i formati hanno l'angolo minimo: la forma distingue anche senza colore.
   Cornice di 1.5px nel colore pieno, come le etichette d'ambito.
   --------------------------------------------------------------------- */
.a2-segno{
  display:inline-flex; align-items:center; justify-content:center; flex:none;
  box-sizing:border-box; width:18px; height:18px; border:1.5px solid; border-radius:50%;
  vertical-align:-4px;
}
.a2-segno > svg{ display:block; width:12px; height:12px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.a2-segno-prompt{ color:var(--a2-prompt); background:var(--a2-prompt-tenue); border-color:var(--a2-prompt); }
.a2-segno-asset{  color:var(--a2-asset-testo); background:var(--a2-asset-tenue); border-color:var(--a2-asset); }
/* Accanto ai titoli di pagina: lo stesso segno, un passo piu' grande. */
.a2-segno-l{ width:22px; height:22px; }
.a2-segno-l > svg{ width:14px; height:14px; stroke-width:1.9; }
/* Segno + nome che puo' andare a capo: il segno resta sulla prima riga. */
.a2-con-segno{ display:flex; align-items:flex-start; gap:7px; min-width:0; }
.a2-con-segno > .a2-segno{ margin-top:calc((1lh - 18px) / 2); }
.a2-con-segno > .a2-segno-l{ margin-top:calc((1lh - 22px) / 2); }
/* Segno + nome in una riga di testo. */
.a2-nome-segno{ display:inline-flex; align-items:center; gap:5px; min-width:0; }
/* La parola sopra il titolo (Prompt, Template, Variante, Asset) nel colore della specie. */
.a2-head-tipo-prompt{ color:var(--a2-prompt); }
.a2-head-tipo-asset{ color:var(--a2-asset); }
/* «dal prompt» con il segno e il nome del prompt che lo genera. */
.a2-chi-da{ flex-wrap:wrap; white-space:normal; row-gap:2px; }
.a2-chi .a2-segno{ width:16px; height:16px; }
.a2-chi .a2-segno > svg{ width:11px; height:11px; }
.a2-chi-pn{ display:inline-flex; align-items:flex-start; gap:4px; min-width:0; }
.a2-chi-pn > .a2-segno{ margin-top:calc((1lh - 16px) / 2); }
.a2-chi-nome{ color:var(--a2-t2); font-weight:500; min-width:0; }
/* La legenda sotto l'editor dei prompt. */
.a2-seg-legenda{ display:flex; flex-wrap:wrap; align-items:center; gap:6px 16px; font-size:12px; color:var(--a2-t3); }
.a2-seg-legenda > span{ display:inline-flex; align-items:center; gap:6px; }
.a2-seg-legenda .a2-evid-seg{ color:var(--a2-t1); font-family:var(--a2-f-mono); font-size:12px; line-height:1.7; }

/* =====================================================================
   La scheda Social (Spazio/Social), vista Temi: dal mockup 21, scena
   «temi». In alto «Proponi i temi» (a sinistra le tre scelte, a destra
   che cosa legge da solo), sotto una scheda per tema.
   ===================================================================== */
.a2-soc-ic{ width:12px; height:12px; fill:currentColor; stroke:none; flex:none; }
.a2-soc-can{ display:inline-flex; align-items:center; gap:4px; white-space:nowrap; }
.a2-soc-cans{ display:inline-flex; flex-wrap:wrap; gap:4px 10px; }
.a2-soc-fmt{ display:inline-flex; align-items:center; gap:5px; min-height:22px; padding:0 8px 0 6px; border-radius:5px; font-size:11.5px; font-weight:600; color:var(--a2-fmt-grafica); background:var(--a2-fmt-grafica-bg); }
.a2-soc-fmt .a2-ico{ width:13px; height:13px; }
.a2-soc-data{ display:inline-flex; align-items:center; gap:4px; white-space:nowrap; color:var(--a2-t2); }
.a2-soc-data .a2-ico{ width:13px; height:13px; color:var(--a2-t3); }

/* Proponi i temi: a sinistra le scelte, a destra che cosa legge da solo. */
.a2-soc-prop{ display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.5fr); gap:20px; align-items:start; }
.a2-soc-campi{ display:flex; flex-direction:column; gap:14px; }
.a2-soc-campo{ display:flex; flex-direction:column; gap:5px; font-size:13px; }
.a2-soc-k{ font-size:12px; font-weight:600; color:var(--a2-t2); }
.a2-soc-k small{ font-weight:400; color:var(--a2-t3); font-size:12px; }
.a2-soc-seg{ display:inline-flex; gap:4px; flex-wrap:wrap; }
.a2-soc-seg button{ font:inherit; font-size:12.5px; color:var(--a2-t2); background:var(--a2-surface); border:1px solid var(--a2-line); border-radius:999px; padding:4px 12px; cursor:pointer; min-width:40px; }
.a2-soc-seg button[aria-pressed="true"]{ background:var(--a2-t1); border-color:var(--a2-t1); color:#fff; }
.a2-soc-prompt{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:13px; }
.a2-soc-legge{ background:var(--a2-sunken); border-radius:var(--a2-r2); padding:12px 14px 14px; display:flex; flex-direction:column; gap:12px; }
.a2-soc-legge-t{ font-size:13px; font-weight:650; color:var(--a2-t1); }
.a2-soc-legge-t small{ font-weight:400; color:var(--a2-t3); font-size:12px; margin-left:6px; }
.a2-soc-gr{ display:flex; flex-direction:column; gap:6px; }
.a2-soc-gr-k{ font-size:10.5px; font-weight:600; letter-spacing:.07em; text-transform:uppercase; color:var(--a2-t3); }
.a2-soc-chips{ display:flex; flex-wrap:wrap; gap:6px; }
.a2-soc-chip{ display:inline-flex; align-items:center; gap:5px; height:26px; padding:0 9px 0 4px; border-radius:999px; background:var(--a2-surface); box-shadow:inset 0 0 0 1px var(--a2-line); font-size:12px; color:var(--a2-t1); white-space:nowrap; }
.a2-soc-chip-vuoto{ background:transparent; box-shadow:none; border:1px dashed var(--a2-line-str); color:var(--a2-t3); }
.a2-soc-chip-vuoto em{ font-style:normal; font-size:11px; color:var(--a2-t3); }
/* Pilastro e leva di un'idea, e l'equilibrio fra i pilastri in cima alla lista. */
.a2-soc-pl{ display:flex; flex-wrap:wrap; gap:6px; margin:6px 0 2px; }
.a2-soc-pil{ display:inline-flex; align-items:center; gap:4px; min-height:22px; padding:0 9px; border-radius:999px; font-size:11.5px; font-weight:600; background:var(--a2-surface-2, #f1f3f6); color:var(--a2-t2); }
.a2-soc-pil-1{ background:#e6efff; color:#1e4a93; } .a2-soc-pil-2{ background:#e5f5ec; color:#1d6b43; }
.a2-soc-pil-3{ background:#fbeee2; color:#8a4a12; } .a2-soc-pil-4{ background:#efe9fb; color:#55358f; }
.a2-soc-pil-5{ background:#fdf0c4; color:#7a5a00; } .a2-soc-pil-6{ background:#e3f4f7; color:#14606e; }
.a2-soc-leva{ display:inline-flex; align-items:center; gap:4px; min-height:22px; padding:0 8px; border-radius:999px; font-size:11.5px; color:var(--a2-t2); box-shadow:inset 0 0 0 1px var(--a2-line); }
.a2-soc-leva .a2-ico{ width:12px; height:12px; }
.a2-soc-equi{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; font-size:12.5px; margin:0 0 14px; }
.a2-soc-tipi{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:6px; }
.a2-soc-tp{ display:flex; align-items:center; gap:8px; padding:5px 8px 5px 5px; border-radius:7px; background:var(--a2-surface); box-shadow:inset 0 0 0 1px var(--a2-line); font-size:12px; min-width:0; }
.a2-soc-tp-m{ width:46px; height:46px; display:grid; place-items:center; flex:none; background:var(--a2-sunken); border-radius:5px; }
.a2-soc-tp-m .a2-ico{ width:18px; height:18px; color:var(--a2-fmt-grafica); }
.a2-soc-tp b{ display:block; font-weight:600; color:var(--a2-t1); }
.a2-soc-tp span{ color:var(--a2-t3); font-size:11.5px; }
.a2-soc-tp span .a2-ico{ width:12px; height:12px; vertical-align:-2px; margin-right:3px; }
.a2-soc-tp-manca{ background:transparent; box-shadow:none; border:1px dashed var(--a2-obs-500); }
.a2-soc-tp-manca .a2-soc-tp-m{ background:var(--a2-obs-25); border:1px dashed var(--a2-obs-100); }
.a2-soc-tp-manca .a2-soc-tp-m .a2-ico{ color:var(--a2-obs-700); }
.a2-soc-tp-manca span{ color:var(--a2-obs-700); }
.a2-soc-tp-manca a{ color:var(--a2-acc-h); font-weight:500; text-decoration:none; }
.a2-soc-tp-arr{ background:transparent; }
.a2-soc-tp-arr .a2-soc-tp-m .a2-ico{ color:var(--a2-t-off); }
.a2-soc-motivo{ display:flex; align-items:flex-start; gap:8px; margin:0 18px 13px; padding:8px 10px; border-radius:6px; background:var(--a2-obs-25); color:var(--a2-obs-700); font-size:12.5px; line-height:1.45; }
.a2-soc-motivo .a2-ico{ flex:none; margin-top:1px; }
.a2-soc-stato{ font-size:12.5px; color:var(--a2-t2); padding:0 18px; }
.a2-soc-stato:empty{ display:none; }
.a2-soc-stato:not(:empty){ padding-bottom:13px; }
.a2-soc-stato-err{ color:var(--a2-err-700); }
/* L'attesa di un'operazione lunga (attesa.js): rotella, testo e secondi trascorsi, in evidenza. */
.a2-attesa{ display:flex; align-items:center; gap:8px; width:fit-content; max-width:100%; padding:7px 12px; border:1px solid var(--a2-acc-100); border-radius:var(--a2-r1); background:var(--a2-surface); color:var(--a2-acc); font-size:13px; font-weight:600; line-height:1.4; }
.a2-attesa > .a2-ico{ flex:none; width:16px; height:16px; }
.a2-attesa-sec{ font-weight:500; color:var(--a2-acc-t2); font-variant-numeric:tabular-nums; white-space:nowrap; }
.a2-attesa-sec:not(:empty)::before{ content:"· "; }
.a2-soc-stato.a2-attesa{ margin:0 18px 13px; padding:7px 12px; }
[data-social] [aria-busy="true"]{ cursor:progress; }

/* I temi proposti: una scheda per tema. */
.a2-soc-temi-card{ margin-top:18px; }
.a2-soc-temi-card .a2-card-hd{ flex-wrap:wrap; }
.a2-soc-tornate{ display:inline-flex; align-items:center; gap:6px; }
.a2-soc-filtri{ display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.a2-soc-filtri[hidden]{ display:none; }
.a2-soc-filtro{ display:inline-flex; align-items:center; gap:5px; font:inherit; font-size:12.5px; color:var(--a2-t2); background:var(--a2-surface); border:1px solid var(--a2-line); border-radius:999px; padding:3px 11px; cursor:pointer; }
.a2-soc-filtro b{ font-weight:600; color:var(--a2-t3); }
.a2-soc-filtro[aria-pressed="true"]{ background:var(--a2-t1); border-color:var(--a2-t1); color:#fff; }
.a2-soc-filtro[aria-pressed="true"] b{ color:#fff; opacity:.75; }
.a2-soc-temi{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:12px; }
.a2-soc-tema{ display:flex; flex-direction:column; gap:9px; padding:12px 14px; border:1px solid var(--a2-line); border-radius:var(--a2-r2); background:var(--a2-surface); min-width:0; }
.a2-soc-tema[hidden]{ display:none; }
.a2-soc-tema-ok{ box-shadow:inset 3px 0 0 var(--a2-acc); }
.a2-soc-tema-no{ background:var(--a2-sunken); }
.a2-soc-tema-no .a2-soc-tema-t, .a2-soc-tema-no dl, .a2-soc-tema-no .a2-soc-tema-meta, .a2-soc-tema-no .a2-soc-tema-m{ opacity:.55; }
.a2-soc-tema-no .a2-soc-tema-t{ text-decoration:line-through; text-decoration-color:var(--a2-t3); }
.a2-soc-tema-hd{ display:flex; gap:12px; align-items:flex-start; }
.a2-soc-tema-tx{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:7px; }
.a2-soc-tema-top{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.a2-soc-tema-n{ font-family:var(--a2-f-mono); font-size:11px; color:var(--a2-t3); }
.a2-soc-tema-t{ margin:0; font-size:14.5px; font-weight:650; line-height:1.3; color:var(--a2-t1); letter-spacing:-.008em; }
.a2-soc-tema-m{ flex:none; width:72px; height:72px; display:grid; place-items:center; background:var(--a2-sunken); border-radius:6px; }
.a2-soc-tema-m > .a2-ico{ width:22px; height:22px; color:var(--a2-t2); }
/* Con la miniatura vera dell'esemplare suggerito (miniature-template.js): il riquadro 16:9 del Dossier, piu' piccolo. */
.a2-soc-tema-mini{ width:112px; height:auto; background:none; }
.a2-soc-tema-mini .a2-tpl-mini{ width:100%; }
/* La procedura del Social dentro il suo involucro da aggiornare (social-temi.js): l'involucro non conta nel layout. */
.a2-soc-aggiorna{ display:contents; }
/* Il template reel suggerito a un'idea: verticale, centrato nello spazio della miniatura. */
.a2-soc-tema-mini .a2-reel-mini{ width:64px; margin:0 auto; }
.a2-soc-tema dl{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:3px 10px; margin:0; font-size:12.5px; line-height:1.45; }
.a2-soc-tema dt{ color:var(--a2-t3); }
.a2-soc-tema dd{ margin:0; color:var(--a2-t2); }
.a2-soc-tema-meta{ display:flex; flex-wrap:wrap; align-items:center; gap:6px 12px; font-size:12px; color:var(--a2-t2); }
.a2-soc-tema-ft{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; border-top:1px solid var(--a2-line); padding-top:9px; margin-top:auto; }
.a2-soc-tema-ft .a2-hint{ margin-left:auto; max-width:none; }
.a2-soc-corr{ display:flex; flex-direction:column; gap:6px; }
.a2-soc-corr[hidden]{ display:none; }
.a2-soc-corr .a2-area{ min-height:52px; font-size:12.5px; }
.a2-soc-az{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.a2-soc-errore{ font-size:12px; color:var(--a2-err-700); background:var(--a2-err-50); border-radius:6px; padding:5px 8px; line-height:1.45; }
.a2-soc-errore[hidden]{ display:none; }
.a2-soc-st-dec{ background:var(--a2-obs-100); color:var(--a2-obs-700); }
.a2-soc-st-no{ background:var(--a2-surface); color:var(--a2-t3); box-shadow:inset 0 0 0 1px var(--a2-line-str); }
.a2-soc-costo{ display:inline-flex; align-items:center; gap:6px; font-size:12.5px; color:var(--a2-t2); }
.a2-soc-costo .a2-ico{ color:var(--a2-t3); width:14px; height:14px; flex:none; }
.a2-soc-costo b{ color:var(--a2-t1); font-weight:600; }
/* Nei piedi in riga l'aiuto prende lo spazio che resta; nel riquadro «Che cosa legge da solo», in colonna, e' solo testo. */
.a2-soc-ft-hint{ max-width:none; flex:1 1 280px; }
.a2-soc-nota{ max-width:none; }
.a2-soc-nessuno{ margin:4px 0 0; }
.a2-soc-nessuno[hidden]{ display:none; }
@media (max-width: 1100px){ .a2-soc-tipi{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width: 900px){ .a2-soc-prop, .a2-soc-temi{ grid-template-columns:minmax(0,1fr); } }
@media (max-width: 520px){ .a2-soc-tipi{ grid-template-columns:minmax(0,1fr); } .a2-soc-tema-mini{ width:84px; } }

/* =====================================================================
   La scheda Social, vista Tema e vista Contenuti: dal mockup 21, scene
   «produci» e «contenuti». Un tema declinato in uscite (una riga per
   uscita, poi il risultato di ognuna) e tutti i contenuti dell'azienda,
   con i filtri e il calendario del mese.
   ===================================================================== */
.a2-soc-dl{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:6px 16px; margin:0; font-size:13px; line-height:1.5; }
.a2-soc-dl dt{ color:var(--a2-t3); font-size:12px; padding-top:1px; }
.a2-soc-dl dd{ margin:0; color:var(--a2-t1); }
.a2-soc-sugg{ display:flex; flex-wrap:wrap; align-items:center; gap:6px 14px; }

/* Lo stato di un'uscita: da produrre, prodotto, in Canva. */
.a2-soc-st{ display:inline-flex; align-items:center; gap:5px; font-size:12px; font-weight:550; line-height:1; padding:4px 8px 4px 6px; border-radius:999px; white-space:nowrap; }
.a2-soc-st .a2-ico{ width:13px; height:13px; }
.a2-soc-st-dap{ background:var(--a2-surface); color:var(--a2-t3); box-shadow:inset 0 0 0 1px var(--a2-line-str); }
.a2-soc-st-pro{ background:var(--a2-run-100); color:var(--a2-run-700); }
.a2-soc-st-can{ background:#EAF6FB; color:#0E7EA8; }

/* Le uscite del tema: una riga ciascuna. */
.a2-soc-usc-card{ margin-top:16px; }
.a2-soc-usc-scorri{ overflow-x:auto; }
.a2-soc-usc{ width:100%; border-collapse:collapse; font-size:13px; }
.a2-soc-usc th{ text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--a2-t3); font-weight:600; padding:8px 12px; background:var(--a2-sunken); border-bottom:1px solid var(--a2-line); white-space:nowrap; }
.a2-soc-usc td{ padding:10px 12px; border-bottom:1px solid var(--a2-line); vertical-align:middle; color:var(--a2-t2); }
.a2-soc-usc tr[data-uscita]:target td{ background:var(--a2-acc-50); }
.a2-soc-usc-cf{ display:flex; flex-direction:column; gap:5px; align-items:flex-start; }
.a2-soc-giorno{ height:28px; font-size:12px; padding:0 6px; width:auto; }
.a2-soc-es{ display:flex; align-items:center; gap:10px; min-width:220px; }
.a2-soc-es-m{ display:flex; gap:4px; align-items:center; padding:5px; background:var(--a2-sunken); border-radius:6px; flex:none; }
.a2-soc-es-m .a2-tpl-mini{ width:64px; }
.a2-soc-es-vuota{ width:40px; height:40px; display:grid; place-items:center; }
.a2-soc-es-vuota .a2-ico{ width:18px; height:18px; color:var(--a2-t3); }
.a2-soc-es-t{ display:flex; flex-direction:column; gap:4px; font-size:12px; min-width:0; color:var(--a2-t1); }
.a2-soc-es-t small{ color:var(--a2-t3); font-size:11.5px; }
.a2-soc-avv{ display:flex; align-items:flex-start; gap:4px; font-size:11.5px; line-height:1.4; color:var(--a2-obs-700); margin-top:2px; }
.a2-soc-avv .a2-ico{ width:12px; height:12px; flex:none; margin-top:1px; }
.a2-soc-usc-nota{ display:block; font-size:11.5px; margin-top:4px; }
.a2-soc-usc-az{ text-align:right; white-space:nowrap; }
.a2-soc-usc-az .a2-btn + .a2-btn{ margin-left:4px; }
.a2-soc-usc-err td{ padding:0 12px 10px; }
.a2-soc-usc-err[hidden]{ display:none; }
.a2-soc-usc-agg{ display:flex; align-items:center; gap:10px; padding:10px 12px; flex-wrap:wrap; }
.a2-soc-usc-agg .a2-hint{ max-width:none; flex:1 1 300px; }
.a2-soc-agg{ display:grid; grid-template-columns:repeat(2, minmax(0,280px)); gap:10px 14px; align-items:end; margin:0 12px 12px; padding:12px; border-radius:var(--a2-r2); background:var(--a2-sunken); }
.a2-soc-agg[hidden]{ display:none; }
.a2-soc-agg .a2-soc-az, .a2-soc-agg .a2-soc-errore{ grid-column:1 / -1; }

/* Il risultato di un'uscita prodotta: la grafica con la caption accanto. */
.a2-soc-esito-card{ margin-top:16px; scroll-margin-top:16px; }
.a2-soc-esito-card .a2-card-hd{ flex-wrap:wrap; }
.a2-soc-esito{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:20px; align-items:start; }
.a2-soc-esito-testo{ grid-template-columns:minmax(0,1fr); }
.a2-soc-esito-g{ padding:12px; background:var(--a2-sunken); border-radius:var(--a2-r2); }
.a2-soc-esito-g img{ display:block; width:auto; height:auto; max-width:min(380px, 100%); max-height:480px; border-radius:2px; box-shadow:0 0 0 1px rgba(16,24,40,.08), 0 1px 3px rgba(16,24,40,.14); background:#fff; }
/* Un'uscita a più pagine: sotto l'apertura, quante pagine sono nel PDF. */
.a2-soc-esito-pag{ display:flex; align-items:center; gap:5px; margin-top:8px; font-size:12px; color:var(--a2-t2); }
.a2-soc-esito-pag .a2-ico{ width:14px; height:14px; }
/* La scelta delle pagine interne nella riga di un'uscita a più pagine. */
.a2-soc-interne{ display:block; margin:2px 0; }
.a2-soc-esito-d{ display:flex; flex-direction:column; gap:12px; min-width:0; }
.a2-soc-avvisi{ display:flex; flex-direction:column; gap:4px; padding:6px 9px; border-radius:6px; background:var(--a2-obs-25); }
.a2-soc-cap-hd{ display:flex; align-items:center; gap:8px; font-size:12px; font-weight:600; color:var(--a2-t2); margin-bottom:6px; }
.a2-soc-cap-hd .a2-ico{ width:14px; height:14px; color:var(--a2-t3); }
.a2-soc-cap-hd span{ margin-left:auto; font-weight:400; color:var(--a2-t3); font-family:var(--a2-f-mono); font-size:11.5px; }
.a2-soc-cap{ white-space:pre-wrap; overflow-wrap:anywhere; font-size:13.5px; line-height:1.6; color:var(--a2-t1); background:var(--a2-surface); border:1px solid var(--a2-line); border-radius:var(--a2-r2); padding:12px 14px; margin:0; font-family:var(--a2-f-sans); }
.a2-soc-copia{ margin-top:8px; }
.a2-soc-da{ display:flex; flex-wrap:wrap; gap:6px 14px; align-items:center; font-size:12px; color:var(--a2-t3); }
.a2-soc-esito-card .a2-card-ft{ flex-wrap:wrap; }
.a2-soc-esito-err{ padding:0 18px 13px; }
.a2-soc-esito-err[hidden]{ display:none; }

/* I contenuti: i filtri, l'elenco con la selezione. */
.a2-soc-sel-n{ font-size:12.5px; }
.a2-soc-sel-n[hidden]{ display:none; }
.a2-soc-barra-bd{ padding-bottom:0; }
.a2-soc-barra{ display:flex; flex-wrap:wrap; align-items:center; gap:10px 18px; margin:0 0 12px; }
.a2-soc-barra[hidden]{ display:none; }
.a2-soc-filtri > span{ font-size:11px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--a2-t3); margin-right:2px; }
.a2-soc-filtro .a2-ico{ width:13px; height:13px; }
.a2-soc-el{ border:0; border-radius:0; border-top:1px solid var(--a2-line); }
.a2-soc-el td{ padding:7px 12px; }
.a2-soc-el tr[hidden]{ display:none; }
.a2-soc-el td.a2-soc-el-ck{ width:30px; padding-right:0; }
.a2-soc-el td.a2-soc-el-m{ width:62px; padding:6px 6px 6px 0; }
.a2-soc-el-mb{ width:56px; height:56px; display:grid; place-items:center; background:var(--a2-sunken); border-radius:6px; overflow:hidden; }
.a2-soc-el-mb img{ max-width:52px; max-height:52px; display:block; }
.a2-soc-el-mb .a2-ico{ width:18px; height:18px; color:var(--a2-t3); }
.a2-soc-el-n b{ display:block; color:var(--a2-t1); font-weight:600; font-size:13px; }
.a2-soc-el-n small{ display:block; color:var(--a2-t3); font-size:11.5px; margin-top:1px; }
.a2-soc-el-lnk{ text-decoration:none; }
.a2-soc-el-lnk:hover b{ color:var(--a2-acc-h); text-decoration:underline; }
.a2-soc-el tr.a2-soc-sel td{ background:var(--a2-acc-50); }
.a2-soc-el-nessuno{ padding:0 18px 12px; }
.a2-soc-nonasset{ display:flex; gap:10px; align-items:flex-start; padding:10px 14px; border-radius:var(--a2-r2); background:var(--a2-sunken); font-size:12.5px; line-height:1.5; color:var(--a2-t2); margin-top:12px; }
.a2-soc-nonasset .a2-ico{ flex:none; margin-top:1px; color:var(--a2-t3); }
.a2-soc-nonasset b{ color:var(--a2-t1); }

/* Il calendario del mese: i giorni con le uscite, il segno del formato e il colore dello stato. */
.a2-soc-cal-card{ margin-top:16px; scroll-margin-top:16px; }
.a2-soc-cal-card .a2-card-hd{ flex-wrap:wrap; }
.a2-soc-cal-scorri{ overflow-x:auto; }
.a2-soc-cal{ display:grid; grid-template-columns:repeat(7, minmax(84px,1fr)); border:1px solid var(--a2-line); border-radius:var(--a2-r2); overflow:hidden; background:var(--a2-line); gap:1px; }
.a2-soc-cal-riga{ display:contents; }
.a2-soc-cal-gs{ background:var(--a2-sunken); font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.05em; color:var(--a2-t3); padding:6px 8px; }
.a2-soc-cal-g{ background:var(--a2-surface); min-height:84px; padding:5px 6px 6px; display:flex; flex-direction:column; gap:3px; min-width:0; }
.a2-soc-cal-g > i{ font-style:normal; font-size:11.5px; font-weight:600; color:var(--a2-t2); font-variant-numeric:tabular-nums; }
.a2-soc-cal-fuori{ background:var(--a2-bg); }
.a2-soc-cal-fuori > i{ color:var(--a2-t-off); font-weight:400; }
.a2-soc-cal-oggi > i{ color:var(--a2-acc-h); }
.a2-soc-cal-ev{ display:flex; align-items:center; gap:4px; font-size:11px; line-height:1.25; padding:3px 5px; border-radius:4px; min-width:0; color:var(--a2-t1); text-decoration:none; }
.a2-soc-cal-ev:hover{ box-shadow:inset 0 0 0 1px var(--a2-acc); }
.a2-soc-cal-ev .a2-ico{ width:12px; height:12px; flex:none; }
.a2-soc-cal-ev .a2-soc-ic{ width:10px; height:10px; }
.a2-soc-cal-ev span{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.a2-soc-cal-da-produrre{ box-shadow:inset 0 0 0 1px var(--a2-line-str); background:var(--a2-surface); color:var(--a2-t2); }
.a2-soc-cal-prodotto{ background:var(--a2-run-100); }
.a2-soc-cal-in-canva{ background:#EAF6FB; }
.a2-soc-legenda{ display:flex; flex-wrap:wrap; gap:6px 14px; align-items:center; font-size:12px; color:var(--a2-t3); margin-top:12px; }
.a2-soc-legenda span{ display:inline-flex; align-items:center; gap:5px; }
.a2-soc-legenda .a2-ico{ width:13px; height:13px; }
.a2-soc-legenda-st{ gap:6px; flex-wrap:wrap; }
@media (max-width: 900px){ .a2-soc-esito{ grid-template-columns:minmax(0,1fr); } .a2-soc-agg{ grid-template-columns:minmax(0,1fr); } }
/* ---- Social: le basi, i piani editoriali, il nuovo piano, le parole (mockup 23) ---- */
.a2-soc-zona{ border-radius:var(--a2-r2); padding:4px 2px 6px; }
.a2-soc-zona + .a2-soc-zona{ margin-top:18px; }
.a2-soc-zona-hd{ display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 10px; margin:0 0 10px 2px; font-size:14px; }
.a2-soc-zona-hd span{ font-size:12.5px; color:var(--a2-t3); }
.a2-soc-zona-fine{ margin-left:auto; }
.a2-soc-zona-chiusa{ background:var(--a2-sunken); padding:10px 12px; }
.a2-soc-zona-chiusa .a2-soc-zona-hd{ margin-bottom:6px; }
.a2-soc-zona-chiusa .a2-soc-basi-passi{ margin-top:14px; }
.a2-soc-basi-riga{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; font-size:12.5px; }
.a2-soc-basi-avviso{ display:inline-flex; flex-wrap:wrap; align-items:center; gap:4px; color:var(--a2-obs-700); }
.a2-soc-basi-apri{ margin-left:auto; font:inherit; font-size:12.5px; background:none; border:0; padding:0; cursor:pointer; }
.a2-soc-passi{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:10px; }
.a2-soc-passo{ border:1px solid var(--a2-line); border-radius:var(--a2-r2); padding:12px; display:flex; flex-direction:column; gap:6px; background:var(--a2-surface); min-width:0; }
.a2-soc-passo-prossimo{ border:2px solid var(--a2-acc); box-shadow:0 0 0 3px var(--a2-acc-100); }
.a2-soc-passo-fatto{ background:var(--a2-sunken); }
.a2-soc-passo-hd{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:14px; }
.a2-soc-passo-n{ width:22px; height:22px; border-radius:50%; background:var(--a2-t1); color:#fff; font-size:12px; font-weight:650; display:grid; place-items:center; flex:none; }
.a2-soc-passo-fatto .a2-soc-passo-n{ background:var(--a2-acc); }
.a2-soc-prossimo{ font-size:11px; font-weight:650; color:var(--a2-acc-h); background:var(--a2-acc-100); border-radius:999px; padding:1px 8px; }
.a2-soc-passo-r{ list-style:none; margin:0; padding:0; font-size:12.5px; color:var(--a2-t2); line-height:1.5; flex:1; display:flex; flex-direction:column; gap:2px; }
.a2-soc-passo-gr{ font-size:12px; color:var(--a2-t1); margin-top:4px; }
.a2-soc-mancanti{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:4px; }
.a2-soc-manca{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.a2-soc-manca > span{ min-width:0; overflow-wrap:anywhere; }
.a2-soc-manca .a2-btn{ flex:none; }
.a2-soc-passo-lib{ font-size:12.5px; }
.a2-soc-passo-az{ margin-top:4px; font-size:13px; }
.a2-soc-piani{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:12px; }
.a2-soc-piano{ border:1px solid var(--a2-line); border-radius:var(--a2-r2); padding:14px; display:flex; flex-direction:column; gap:8px; background:var(--a2-surface); min-width:0; }
.a2-soc-piano-prossimo{ border:2px solid var(--a2-acc); box-shadow:0 0 0 3px var(--a2-acc-100); }
.a2-soc-piano-vuoto{ border-style:dashed; }
.a2-soc-piano-hd{ display:flex; flex-direction:column; gap:3px; font-size:15px; overflow-wrap:anywhere; }
.a2-soc-piano-per{ display:inline-flex; align-items:center; gap:4px; font-size:12px; color:var(--a2-t2); }
.a2-soc-piano-per-no{ color:var(--a2-t3); font-style:italic; }
.a2-soc-piano-ind{ font-size:12.5px; color:var(--a2-t2); line-height:1.5; margin:0; overflow-wrap:anywhere; }
.a2-soc-piano-ind-tutte{ white-space:pre-line; font-size:13px; max-width:60em; }
.a2-soc-piano-conti{ display:flex; flex-wrap:wrap; gap:4px 12px; font-size:12px; color:var(--a2-t3); margin-top:auto; }
.a2-soc-piano-conti b{ color:var(--a2-t1); }
.a2-soc-piano-ft{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px; border-top:1px solid var(--a2-line); padding-top:8px; }
.a2-soc-piano-ft .a2-st{ white-space:normal; line-height:1.3; }
.a2-soc-piani-vuoto{ display:flex; flex-wrap:wrap; align-items:center; gap:10px 16px; font-size:13px; color:var(--a2-t2); }
.a2-soc-piani-vuoto p{ margin:0; flex-basis:100%; line-height:1.5; }
.a2-soc-form{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:14px 20px; }
.a2-soc-form .a2-soc-campo{ display:flex; flex-direction:column; gap:5px; }
.a2-soc-form-largo{ grid-column:1 / -1; }
.a2-soc-testata + .a2-soc-temi-card{ margin-top:16px; }
.a2-soc-parole{ margin-top:16px; }
.a2-soc-parole > summary{ cursor:pointer; list-style:none; }
.a2-soc-parole > summary::-webkit-details-marker{ display:none; }
.a2-soc-parole-chev{ margin-left:auto; transition:transform .15s ease; }
.a2-soc-parole[open] .a2-soc-parole-chev{ transform:rotate(180deg); }
.a2-soc-parole-dl{ display:grid; grid-template-columns:150px minmax(0,1fr); gap:8px 16px; margin:0; font-size:13.5px; }
.a2-soc-parole-dl dt{ font-weight:650; color:var(--a2-t1); }
.a2-soc-parole-dl dd{ margin:0; color:var(--a2-t2); line-height:1.5; }
@media (max-width: 1100px){ .a2-soc-passi, .a2-soc-piani{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); } }
@media (max-width: 700px){
  .a2-soc-passi, .a2-soc-piani, .a2-soc-form, .a2-soc-parole-dl{ grid-template-columns:minmax(0,1fr); }
  .a2-soc-basi-apri, .a2-soc-zona-fine{ margin-left:0; }
}
.a2-soc-zona-chiusa .a2-soc-basi-passi > .a2-soc-zona-hd{ display:none; }
/* ---- Social: dentro un piano, la testa con le tre tappe, la tappa 2, i post del piano ---- */
.a2-soc-testata .a2-card-hd{ flex-wrap:wrap; }
.a2-soc-tappe{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-top:12px; }
.a2-soc-testata .a2-card-bd > .a2-soc-tappe:first-child{ margin-top:0; }
.a2-soc-tappa{ display:inline-flex; flex-wrap:wrap; align-items:center; gap:8px; border:1px solid var(--a2-line); border-radius:999px; padding:6px 12px; font-size:13px; color:var(--a2-t1); text-decoration:none; background:var(--a2-surface); }
.a2-soc-tappa:hover{ border-color:var(--a2-acc); }
.a2-soc-tappa:focus-visible{ outline:2px solid var(--a2-acc); outline-offset:2px; }
.a2-soc-tappa-aperta{ border:2px solid var(--a2-acc); background:var(--a2-acc-50); padding:5px 11px; }
.a2-soc-tappa .a2-st{ white-space:normal; line-height:1.3; }
.a2-soc-tappa-fr{ color:var(--a2-t3); }
.a2-soc-testata + .a2-soc-tappa-post{ display:block; margin-top:16px; }
/* La tappa 2: la fascia dell'abbinamento, le idee approvate con i loro post (una scheda ciascuna), l'aggiunta. */
.a2-soc-abbina{ display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; font-size:12.5px; color:var(--a2-t2); background:var(--a2-acc-50); border-bottom:1px solid var(--a2-line); padding:10px 20px; }
.a2-soc-abbina > span:first-of-type{ flex:1 1 320px; min-width:0; line-height:1.45; }
.a2-soc-abbina .a2-soc-avv{ flex-basis:100%; margin-top:0; }
.a2-soc-abbina .a2-soc-portata{ display:block; font-weight:600; color:var(--a2-t1); }
.a2-soc-abbina .a2-soc-stato{ flex-basis:100%; padding:0; }
.a2-soc-abbina .a2-soc-stato:empty{ display:none; }
.a2-soc-abbina .a2-soc-stato.a2-attesa{ margin:4px 0 0; padding:7px 12px; }
/* Le idee approvate in una griglia di schede: con un post per idea, il caso comune, una riga intera
   lasciava vuoto quasi tutto lo spazio. Il selettore «+ aggiungi un post» si apre in una finestra. */
.a2-soc-ias{ display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap:12px; }
.a2-soc-ias > .a2-soc-ia{ display:flex; flex-direction:column; }
.a2-soc-ias > .a2-soc-ia > .a2-soc-agg-r{ margin-top:auto; padding-top:10px; }
.a2-soc-ia{ border:1px solid var(--a2-line); border-radius:var(--a2-r2); padding:12px; min-width:0; }
.a2-soc-ia-hd{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; font-size:14px; margin-bottom:8px; }
.a2-soc-ia-hd > b{ flex:1 1 240px; min-width:0; overflow-wrap:anywhere; }
.a2-soc-ia-apri{ font-size:12.5px; }
.a2-soc-ia-righe{ display:flex; flex-direction:column; gap:6px; }
.a2-soc-rp{ display:grid; grid-template-columns:52px 150px minmax(180px, 260px) minmax(0,1fr) auto; align-items:center; gap:10px; font-size:12.5px; background:var(--a2-sunken); border-radius:var(--a2-r1); padding:6px 8px; }
.a2-soc-rp-m{ display:flex; align-items:center; }
.a2-soc-rp-m .a2-tpl-mini{ width:46px; }
.a2-soc-rp-c{ display:flex; flex-direction:column; align-items:flex-start; gap:3px; min-width:0; }
.a2-soc-rp-es{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.a2-soc-rp-es .a2-sel{ max-width:100%; }
.a2-soc-rp-es small{ font-size:11px; color:var(--a2-t3); line-height:1.35; }
.a2-soc-rp-p{ color:var(--a2-t2); line-height:1.4; min-width:0; overflow-wrap:anywhere; }
.a2-soc-rp-segno{ color:var(--a2-acc); margin-right:4px; }
.a2-soc-rp-tuo{ display:inline-block; margin-left:6px; font-size:10.5px; font-weight:650; color:var(--a2-acc-h); background:var(--a2-acc-100); border-radius:999px; padding:1px 7px; white-space:nowrap; }
.a2-soc-rp-az{ display:flex; justify-content:flex-end; }
.a2-soc-rp-fatto{ background:transparent; border:1px dashed var(--a2-line); }
.a2-soc-rp-err .a2-soc-errore{ margin:0; }
.a2-soc-ia-agg{ display:inline-block; margin-top:8px; font-size:12.5px; background:none; border:0; padding:0; cursor:pointer; }
.a2-soc-ia-agg:disabled{ color:var(--a2-t-off); cursor:default; }
.a2-soc-ia .a2-soc-agg{ margin-top:8px; }
@media (max-width: 900px){
  .a2-soc-rp{ grid-template-columns:52px minmax(0,1fr) auto; }
  .a2-soc-rp-es, .a2-soc-rp-p{ grid-column:2 / -1; }
}
.a2-soc-el-cap{ max-width:46em; overflow-wrap:anywhere; line-height:1.4; }
@media (max-width: 700px){ .a2-soc-tappa-fr{ display:none; } .a2-soc-tappa{ border-radius:var(--a2-r2); } }

/* ---------- Il reel (mockup 24): anteprime che si riproducono, «Progetta il template reel» ---------- */
.a2-reel{ position:relative; display:block; aspect-ratio:9/16; background:#090E20; border-radius:6px; overflow:hidden; box-shadow:0 0 0 1px rgba(16,24,40,.10), 0 2px 6px rgba(16,24,40,.16); flex:none; }
.a2-reel canvas{ display:block; width:100%; height:100%; }
.a2-reel-pp{ position:absolute; z-index:3; left:6px; bottom:9px; width:28px; height:28px; border-radius:50%; border:0; padding:0; display:grid; place-items:center; background:rgba(9,14,32,.66); color:#fff; cursor:pointer; opacity:0; transition:opacity var(--a2-fast); }
.a2-reel:hover .a2-reel-pp, .a2-reel-in-pausa .a2-reel-pp, .a2-reel-pp:focus-visible{ opacity:1; }
.a2-reel-pp svg{ width:14px; height:14px; fill:currentColor; }
.a2-reel-t{ position:absolute; z-index:2; left:0; right:0; bottom:0; height:3px; background:rgba(255,255,255,.25); }
.a2-reel-t i{ display:block; height:100%; width:0; background:var(--a2-acc); }
.a2-reel-gal{ width:118px; }
.a2-reel-grande{ width:300px; max-width:100%; border-radius:12px; }
.a2-reel-grande .a2-reel-pp{ width:40px; height:40px; left:12px; bottom:14px; }
.a2-reel-grande .a2-reel-pp svg{ width:20px; height:20px; }
.a2-reel-grande .a2-reel-t{ height:4px; }
.a2-reel-vuoto{ display:grid; place-items:center; padding:8px; text-align:center; font-size:11px; line-height:1.4; color:rgba(255,255,255,.7); }
.a2-reel-cornice{ display:grid; place-items:center; background:var(--a2-sunken); border-radius:6px; box-shadow:0 0 0 1px var(--a2-line); padding:12px 0; }
.a2-gal-es-prop .a2-reel-cornice{ box-shadow:none; outline:1.5px dashed var(--a2-obs-500); outline-offset:-1.5px; background:var(--a2-obs-25); }
.a2-gal-meta{ font-size:11px; color:var(--a2-t3); }
.a2-reel-progetta{ box-sizing:border-box; width:260px; display:flex; flex-direction:column; align-items:flex-start; gap:8px; border:1.5px dashed var(--a2-line-str); border-radius:var(--a2-r2); padding:14px; font-size:12.5px; }
.a2-reel-progetta .a2-hint{ font-size:11.5px; line-height:1.45; }
.a2-reel-progetta-no{ font-weight:600; color:var(--a2-t2); }
.a2-reel-errore{ margin:0; font-size:12px; line-height:1.45; color:var(--a2-err-700); }
.a2-can-nota{ font-size:11px; line-height:1.4; margin-top:4px; }
.a2-reel-scheda{ display:flex; flex-wrap:wrap; gap:18px; align-items:flex-start; }
.a2-reel-scheda > .a2-hint{ flex-basis:100%; margin:0; }
.a2-reel-kit{ flex:1 1 220px; }
/* ---------- Reel: catalogo (mockup 27, schermate a e b): lo stile, le slide, «Aggiungi slide» ---------- */
.a2-gal-meta.a2-lnk{ color:var(--a2-acc-h); font-weight:500; }
.a2-rc-dist{ display:block; margin:0 0 12px; }
.a2-rc-stile{ display:grid; grid-template-columns:repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap:14px; margin:0 0 12px; }
.a2-rc-stile > div{ border:1px solid var(--a2-line); border-radius:var(--a2-r2); background:var(--a2-surface); padding:12px 14px; font-size:12.5px; color:var(--a2-t2); line-height:1.5; min-width:0; }
.a2-rc-k{ display:block; font-size:11px; font-weight:650; letter-spacing:.06em; text-transform:uppercase; color:var(--a2-t3); margin-bottom:6px; }
.a2-rc-font{ display:block; font-weight:700; font-size:28px; line-height:1.05; color:var(--a2-t1); letter-spacing:-1px; overflow-wrap:anywhere; }
.a2-rc-font small{ display:block; font-size:12px; font-weight:400; letter-spacing:0; color:var(--a2-t3); margin-top:6px; font-family:var(--a2-f-sans); }
.a2-rc-pal{ display:flex; flex-wrap:wrap; gap:4px; margin-top:10px; }
.a2-rc-pal i{ width:22px; height:22px; border-radius:5px; box-shadow:inset 0 0 0 1px rgba(16,24,40,.14); display:grid; place-items:center; font:600 9.5px/1 var(--a2-f-mono); font-style:normal; }
.a2-rc-motivi{ margin:0; padding-left:16px; list-style:disc; }
.a2-rc-motivi li + li{ margin-top:3px; }
.a2-rc-altri{ margin-top:4px; }
.a2-rc-altri summary{ cursor:pointer; }
.a2-rc-altri .a2-rc-motivi{ margin-top:4px; }
.a2-rc-mov{ display:flex; flex-direction:column; gap:6px; }
.a2-rc-mov span{ display:flex; align-items:baseline; gap:6px; }
.a2-rc-mov b{ font-weight:600; color:var(--a2-t1); min-width:88px; }
.a2-rc{ margin-top:16px; }
.a2-rc-filtri{ display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; margin:0 0 8px; }
.a2-rc-filtri-k{ font-size:11px; font-weight:650; letter-spacing:.06em; text-transform:uppercase; color:var(--a2-t3); min-width:62px; }
.a2-rc-filtri .a2-med-tipi:empty{ display:none; }
.a2-rc-nota-r1{ display:flex; align-items:flex-start; gap:6px; margin:4px 0 6px; font-size:12.5px; line-height:1.5; color:var(--a2-t2); background:var(--a2-obs-25); box-shadow:inset 0 0 0 1px var(--a2-obs-100); border-radius:6px; padding:8px 10px; max-width:980px; }
.a2-rc-nota-r1 .a2-ico{ flex:none; width:15px; height:15px; margin-top:2px; color:var(--a2-obs-700); }
.a2-rc-nota-fn{ margin:0 0 12px; font-size:12px; }
.a2-rc-esito{ display:block; margin:0 0 10px; font-size:12.5px; line-height:1.45; color:var(--a2-acc-h); max-width:980px; }
.a2-rc-esito-no{ color:var(--a2-err-700); }
.a2-rc-esito[hidden]{ display:none; }
.a2-rc-griglia{ display:grid; grid-template-columns:repeat(auto-fill, minmax(min(330px, 100%), 1fr)); gap:12px; }
.a2-rc-sl{ margin:0; display:grid; grid-template-columns:142px minmax(0,1fr); gap:12px; align-items:start; border:1px solid var(--a2-line); border-radius:var(--a2-r2); background:var(--a2-surface); padding:10px; }
.a2-rc-sl[hidden]{ display:none; }
.a2-rc-cornice{ padding:10px 0; }
.a2-rc-sl figcaption{ display:flex; flex-direction:column; gap:6px; min-width:0; font-size:12.5px; }
.a2-rc-hd{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.a2-rc-nm{ font-size:13.5px; font-weight:650; color:var(--a2-t1); overflow-wrap:anywhere; }
.a2-rc-r1{ font-size:10.5px; font-weight:650; color:#6b4f00; background:#f6e9bf; border-radius:999px; padding:1px 7px; white-space:nowrap; }
.a2-rc-tags{ display:flex; flex-wrap:wrap; gap:4px; }
.a2-rc-fn, .a2-rc-serve{ display:inline-flex; align-items:center; font-size:11px; font-weight:600; border-radius:999px; padding:1px 8px; white-space:nowrap; }
.a2-rc-fn{ background:var(--a2-acc-50); color:var(--a2-acc-h); }
.a2-rc-serve{ color:var(--a2-t3); box-shadow:inset 0 0 0 1px var(--a2-line); }
.a2-rc-quando{ color:var(--a2-t2); line-height:1.45; overflow-wrap:anywhere; }
.a2-rc-quando i{ font-style:normal; display:block; font-size:10.5px; font-weight:650; letter-spacing:.06em; text-transform:uppercase; color:var(--a2-t3); }
.a2-rc-az{ display:flex; gap:6px; flex-wrap:wrap; align-items:center; margin-top:2px; }
.a2-rc-tolta{ opacity:.5; }
.a2-rc-tolta .a2-reel{ filter:grayscale(1); }
.a2-rc-tolta-t{ font-size:12px; color:var(--a2-t3); }
.a2-rc-prop{ border:1.5px dashed var(--a2-obs-500); background:var(--a2-obs-25); }
.a2-rc-tenuta{ border-color:var(--a2-acc-100); background:var(--a2-acc-50); }
.a2-rc-scartata{ opacity:.45; }
.a2-rc-ok{ display:inline-flex; align-items:center; gap:5px; font-size:12px; font-weight:600; color:var(--a2-acc-h); }
.a2-rc-ok .a2-ico{ width:14px; height:14px; }
.a2-rc-ok-no{ color:var(--a2-t3); }
.a2-rc-errore{ font-size:12px; line-height:1.4; color:var(--a2-err-700); }
.a2-rc-errore:empty{ display:none; }
.a2-rc-agg-t{ display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:8px; border:1.5px dashed var(--a2-line-str); border-radius:var(--a2-r2); padding:14px; font-size:12.5px; min-height:120px; }
.a2-rc-agg-t .a2-hint{ font-size:11.5px; line-height:1.45; }
.a2-rc-agg{ margin-top:16px; border:1px solid var(--a2-line); border-radius:var(--a2-r2); background:var(--a2-surface); padding:14px 16px; display:flex; flex-direction:column; gap:10px; }
.a2-rc-agg[hidden]{ display:none; }
.a2-rc-agg-hd{ display:flex; align-items:center; gap:8px; font-size:14px; }
.a2-rc-agg textarea{ width:100%; max-width:980px; box-sizing:border-box; font-size:13px; }
.a2-rc-agg-ft{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px; }
.a2-rc-agg .a2-rc-esito{ margin:0; }
.a2-rc-proposte:empty{ display:none; }
@media (max-width: 420px){
  .a2-rc-sl{ grid-template-columns:minmax(0,1fr); }
  .a2-rc-cornice{ justify-self:start; padding:10px; }
}
/* ---------- Il reel nei post (mockup 24, scene b, c, d) ---------- */
.a2-reel-mini{ width:30px; border-radius:3px; }
.a2-reel-mini .a2-reel-pp{ width:16px; height:16px; left:2px; bottom:5px; }
.a2-reel-mini .a2-reel-pp svg{ width:9px; height:9px; }
.a2-reel-mini .a2-reel-t{ height:2px; }
.a2-reel-riga{ width:64px; border-radius:5px; }
.a2-soc-rp-m .a2-reel-mini, .a2-soc-es-m .a2-reel-mini{ margin:0 auto; }
.a2-soc-el-mb:has(.a2-reel){ width:auto; height:auto; background:none; overflow:visible; }
.a2-soc-el td.a2-soc-el-m:has(.a2-reel-riga){ width:72px; }
.a2-reel-zone{ position:absolute; inset:0; z-index:2; pointer-events:none; }
.a2-reel-zone[hidden]{ display:none; }
.a2-reel-zone i{ position:absolute; left:0; right:0; background:rgba(255,0,80,.18); border:1px dashed rgba(255,0,80,.6); }
.a2-reel-info{ display:flex; flex-wrap:wrap; margin-top:3px; }
.a2-rs{ display:inline-flex; align-items:center; gap:4px; font-size:11.5px; font-weight:600; border-radius:999px; padding:1px 8px; margin:2px 4px 0 0; white-space:nowrap; }
.a2-rs .a2-ico{ width:12px; height:12px; }
.a2-rs-da{ background:var(--a2-obs-100); color:var(--a2-obs-700); }
.a2-rs-ok{ background:var(--a2-acc-100); color:var(--a2-acc-h); }
.a2-card-hd-end .a2-rs{ margin:0; }
.a2-soc-el-n small.a2-reel-es{ margin-top:3px; }
.a2-reel-az{ display:flex; flex-wrap:wrap; align-items:flex-start; gap:6px; max-width:330px; }
.a2-card-ft .a2-reel-az{ max-width:none; }
.a2-reel-az-col{ display:flex; flex-direction:column; gap:3px; }
.a2-reel-az-col .a2-soc-costo{ font-size:11px; }
.a2-reel-motivo{ flex-basis:100%; font-size:11.5px; line-height:1.4; color:var(--a2-t3); }
.a2-reel-avanz{ display:block; margin-top:6px; max-width:300px; flex-basis:100%; }
.a2-reel-avanz[hidden]{ display:none; }
.a2-reel-avanz i{ display:block; height:6px; width:0; background:var(--a2-acc); border-radius:3px; box-shadow:0 0 0 1px var(--a2-line); }
.a2-reel-avanz span{ display:block; font-size:11px; color:var(--a2-t3); margin-top:3px; font-variant-numeric:tabular-nums; }
.a2-reel-nota{ display:flex; align-items:flex-start; gap:6px; margin:10px 18px 14px; font-size:12px; }
.a2-rv-sub{ display:inline-flex; flex-wrap:wrap; align-items:center; gap:4px 10px; }
.a2-rv{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:26px; align-items:start; }
.a2-rv-sx{ width:300px; max-width:100%; display:flex; flex-direction:column; gap:10px; }
.a2-rv-com{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; font-size:12.5px; }
.a2-rv-com[hidden]{ display:none; }
.a2-rv-com input[type=range]{ flex:1 1 100%; accent-color:var(--a2-acc); margin:0; }
.a2-rv-tempo{ font-variant-numeric:tabular-nums; color:var(--a2-t3); }
.a2-rv-dx{ min-width:0; display:flex; flex-direction:column; gap:12px; }
.a2-rv-hd{ display:flex; align-items:baseline; gap:10px; font-size:14px; }
.a2-rv-scene{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px; }
.a2-rv-sc{ font-size:12.5px; }
.a2-rv-sc button{ font:inherit; position:relative; display:grid; grid-template-columns:54px minmax(0,1fr); grid-template-rows:auto auto 1fr; column-gap:9px; row-gap:2px; align-items:start; width:176px; text-align:left; padding:6px 10px 6px 6px; border:1px solid var(--a2-line); border-radius:8px; background:var(--a2-surface); cursor:pointer; color:var(--a2-t1); }
.a2-rv-sc button:hover{ background:var(--a2-sunken); }
.a2-rv-sc canvas{ grid-row:1 / 4; width:54px; height:96px; border-radius:4px; display:block; background:#090E20; }
.a2-rv-sc button b{ font-size:12.5px; font-weight:600; line-height:1.3; margin-top:18px; }
.a2-rv-sc button small{ font-size:11.5px; color:var(--a2-t3); font-variant-numeric:tabular-nums; }
.a2-rv-sc-n{ width:20px; height:20px; border-radius:50%; background:#1d2230; color:#fff; font-size:11px; font-weight:650; display:inline-grid; place-items:center; }
.a2-rv-sc button .a2-rv-sc-n{ position:absolute; left:70px; top:6px; }
.a2-rv-sc-on button{ border:2px solid var(--a2-acc); padding:5px 9px 5px 5px; background:var(--a2-acc-50); }
.a2-rv-sc-ora .a2-rv-sc-n{ background:var(--a2-acc); color:#090E20; }
.a2-rv-ed{ border:1px solid var(--a2-line); border-radius:10px; padding:14px 16px; background:var(--a2-surface); display:flex; flex-direction:column; gap:12px; }
.a2-rv-ed[hidden]{ display:none; }
.a2-rv-ed-hd{ display:flex; align-items:center; gap:8px; font-size:14px; }
.a2-rv-chip{ display:inline-flex; align-items:center; gap:4px; font-size:11.5px; font-weight:600; color:var(--a2-t2); background:var(--a2-sunken); border-radius:999px; padding:1px 8px; }
.a2-rv-chip .a2-ico{ width:12px; height:12px; }
.a2-rv-campi{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px 14px; }
.a2-rv-campi textarea{ width:100%; box-sizing:border-box; font-size:12.5px; resize:vertical; }
.a2-rv-dur{ display:flex; flex-wrap:wrap; align-items:flex-end; gap:6px 14px; }
.a2-rv-dur-in{ display:inline-flex; align-items:center; gap:6px; font-size:12.5px; color:var(--a2-t2); }
.a2-rv-dur-in input{ width:76px; }
.a2-rv-az{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; padding-top:10px; border-top:1px solid var(--a2-line); }
.a2-rv-nota{ display:flex; align-items:center; gap:6px; margin:0; font-size:12.5px; color:var(--a2-t3); }
.a2-rv-nota-on{ color:var(--a2-obs-700); font-weight:600; }
@media (max-width: 1100px){ .a2-rv{ grid-template-columns:minmax(0,1fr); } .a2-rv-campi{ grid-template-columns:minmax(0,1fr); } }

/* ---------- Spazio: Media ---------- */
/* La scheda Media (mockup 26, schermate «a», «b» e «f»): caricamento e
   spazio occupato, filtri e ricerca, la fascia «Descrivi e trascrivi», la
   griglia delle miniature, la coda del caricamento, la scheda vuota. */
.a2-med-top{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:12px 18px; align-items:stretch; }
.a2-med-drop{ padding:12px 16px; gap:12px; }
.a2-med-drop .a2-drop-ico{ width:38px; height:38px; }
.a2-med-car[hidden], [data-md-nonsupp][hidden]{ display:none; }
.a2-med-spazio{ display:flex; flex-direction:column; justify-content:center; gap:5px; min-width:240px; height:100%; box-sizing:border-box; padding:10px 16px; border:1px solid var(--a2-line); border-radius:var(--a2-r3); background:var(--a2-surface); font-size:12.5px; color:var(--a2-t2); }
.a2-med-spazio b{ font-size:17px; color:var(--a2-t1); font-weight:650; letter-spacing:-.01em; font-variant-numeric:tabular-nums; }
.a2-med-spazio-k{ font-size:11px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--a2-t3); }
.a2-med-spazio-bar{ display:flex; height:6px; border-radius:999px; overflow:hidden; background:var(--a2-line); }
.a2-med-spazio-bar i{ display:block; height:100%; }
.a2-med-sb-v{ background:var(--a2-acc); }
.a2-med-sb-f{ background:var(--a2-fmt-immagine); }
.a2-med-sb-m{ background:var(--a2-fmt-html); }
.a2-med-sb-x{ background:var(--a2-t-off); }
.a2-med-spazio small{ color:var(--a2-t3); font-size:11.5px; line-height:1.4; }
.a2-med-spazio small i{ display:inline-block; width:7px; height:7px; border-radius:2px; margin:0 3px 0 6px; }
.a2-med-spazio small i:first-child{ margin-left:0; }

.a2-med-filtri{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; margin:16px 0 10px; }
.a2-med-tipi{ display:inline-flex; flex-wrap:wrap; border:1px solid var(--a2-line-str); border-radius:999px; overflow:hidden; background:var(--a2-surface); }
.a2-med-tipi a{ font-size:12.5px; padding:5px 12px; color:var(--a2-t2); text-decoration:none; display:inline-flex; align-items:center; gap:6px; }
.a2-med-tipi a + a{ border-left:1px solid var(--a2-line); }
.a2-med-tipi a:hover{ background:var(--a2-sunken); }
.a2-med-tipi a:focus-visible{ outline:2px solid var(--a2-acc); outline-offset:-2px; }
.a2-med-tipi a[aria-current="true"]{ background:var(--a2-acc-50); color:var(--a2-acc-h); font-weight:600; }
.a2-med-tipi .a2-ico{ width:14px; height:14px; }
.a2-med-tipi small{ font-family:var(--a2-f-mono); font-size:10.5px; color:var(--a2-t3); }
.a2-med-cerca{ margin-left:auto; position:relative; }
.a2-med-cerca .a2-ico{ position:absolute; left:9px; top:50%; transform:translateY(-50%); width:14px; height:14px; color:var(--a2-t3); pointer-events:none; }
.a2-med-cerca input{ width:300px; padding-left:30px; }

.a2-med-desc{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px; padding:10px 14px; margin:0 0 14px; border:1px solid var(--a2-obs-100); background:var(--a2-obs-50); border-radius:var(--a2-r2); font-size:12.5px; color:var(--a2-t2); }
.a2-med-desc-c{ display:flex; flex-direction:column; gap:1px; }
.a2-med-desc-stato{ flex-basis:100%; display:flex; flex-wrap:wrap; align-items:center; gap:6px 8px; color:var(--a2-t1); }
.a2-med-desc-stato[hidden]{ display:none; }
.a2-med-desc-stato > .a2-ico{ width:14px; height:14px; color:var(--a2-obs-700); flex:none; }
.a2-med-costo-righe{ list-style:none; margin:0 0 10px; padding:0; display:flex; flex-direction:column; gap:8px; font-size:13px; }
.a2-med-costo-righe li{ display:grid; grid-template-columns:18px minmax(0,1fr) auto; gap:8px; align-items:start; color:var(--a2-t2); line-height:1.45; }
.a2-med-costo-righe li > .a2-ico{ width:16px; height:16px; color:var(--a2-t3); margin-top:1px; }
.a2-med-costo-righe li b{ color:var(--a2-t1); }
.a2-med-costo-righe li > span:last-child{ font-variant-numeric:tabular-nums; color:var(--a2-t1); font-weight:600; white-space:nowrap; }
.a2-med-costo-righe small{ display:block; color:var(--a2-t3); font-size:12px; }
.a2-med-costo-nota{ font-size:12px; color:var(--a2-t3); line-height:1.5; margin:0 0 6px; }

.a2-med-griglia{ display:grid; grid-template-columns:repeat(auto-fill, minmax(178px, 1fr)); gap:16px 14px; }
.a2-med-el{ display:flex; flex-direction:column; gap:6px; min-width:0; }
.a2-med-mini{ box-sizing:border-box; position:relative; display:grid; place-items:center; aspect-ratio:4/3; border-radius:var(--a2-r2); background:var(--a2-sunken); box-shadow:inset 0 0 0 1px var(--a2-line); overflow:hidden; text-decoration:none; transition:box-shadow var(--a2-fast) var(--a2-ease); }
.a2-med-mini:hover{ box-shadow:inset 0 0 0 1px var(--a2-line-str), var(--a2-lift-1); }
.a2-med-mini:focus-visible{ outline:2px solid var(--a2-acc); outline-offset:2px; }
.a2-med-img{ position:relative; overflow:hidden; border-radius:3px; max-width:100%; max-height:100%; }
.a2-med-img > img{ display:block; width:100%; height:100%; object-fit:cover; }
.a2-med-o-verticale .a2-med-img, .a2-med-o-quadrato .a2-med-img{ height:100%; }
.a2-med-o-orizzontale .a2-med-img{ width:100%; }
.a2-med-ph{ display:grid; place-items:center; width:100%; height:100%; min-width:60px; min-height:45px; background:linear-gradient(160deg, #6F8DA8, #2C4A66 60%, #090E20); }
.a2-med-ph .a2-ico{ width:30%; height:30%; max-width:46px; max-height:46px; color:#fff; opacity:.55; }
/* La musica (Eleven Music): nessuna immagine, il segnaposto quadrato con l'icona. */
.a2-med-ph-musica{ background:linear-gradient(160deg, #9C7BB8, #5A3E7A 60%, #1C1230); }
.a2-med-ov{ position:absolute; display:inline-flex; align-items:center; gap:4px; font:600 11px/1 var(--a2-f-sans); border-radius:999px; padding:4px 7px; white-space:nowrap; }
.a2-med-ov .a2-ico{ width:12px; height:12px; }
.a2-med-dur{ right:7px; bottom:7px; background:rgba(9,14,32,.78); color:#fff; font-variant-numeric:tabular-nums; }
.a2-med-dur .a2-ico{ fill:currentColor; }
.a2-med-parl, .a2-med-fatto{ left:7px; top:7px; background:#fff; color:var(--a2-acc-h); box-shadow:0 0 0 1px var(--a2-acc-100); }
.a2-med-dades{ left:7px; top:7px; background:var(--a2-obs-100); color:var(--a2-obs-700); box-shadow:0 0 0 1px var(--a2-obs-200); }
.a2-med-lav{ left:7px; top:7px; background:var(--a2-run-50); color:var(--a2-run-700); box-shadow:0 0 0 1px var(--a2-run-100); }
.a2-med-attesa{ left:7px; top:7px; background:#fff; color:var(--a2-obs-700); box-shadow:0 0 0 1px var(--a2-obs-200); }
.a2-med-err{ left:7px; top:7px; background:var(--a2-err-50); color:var(--a2-err-700); box-shadow:0 0 0 1px var(--a2-err-100); }
.a2-med-el-t{ font-size:12.5px; font-weight:600; color:var(--a2-t1); line-height:1.35; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.a2-med-el-t-file{ font-family:var(--a2-f-mono); font-weight:500; font-size:12px; color:var(--a2-t2); word-break:break-all; }
.a2-med-el-m{ display:flex; align-items:center; gap:5px; font-size:11.5px; color:var(--a2-t3); font-variant-numeric:tabular-nums; }
.a2-med-el-m .a2-ico{ width:12px; height:12px; flex:none; }
.a2-med-el-trov{ font-size:11.5px; line-height:1.4; color:var(--a2-t2); background:var(--a2-sunken); border-radius:6px; padding:5px 7px; }
.a2-med-el-t mark, .a2-med-el-trov mark{ background:#F7E7C6; color:inherit; border-radius:2px; padding:0 1px; }
.a2-med-el-trov small{ color:var(--a2-t3); font-variant-numeric:tabular-nums; }
.a2-med-nessuno{ grid-column:1 / -1; padding:22px; text-align:center; color:var(--a2-t3); font-size:13px; background:var(--a2-sunken); border-radius:var(--a2-r2); }

.a2-med-car{ margin-top:14px; }
.a2-med-car-lista{ list-style:none; margin:0; padding:0; }
.a2-med-car-f{ display:grid; grid-template-columns:64px minmax(0,1fr) auto; gap:5px 14px; align-items:center; padding:12px 16px; border-top:1px solid var(--a2-line); }
.a2-med-car-f:first-child{ border-top:0; }
.a2-med-car-mini{ grid-row:1 / 4; align-self:start; width:64px; height:48px; border-radius:6px; overflow:hidden; background:var(--a2-sunken); box-shadow:inset 0 0 0 1px var(--a2-line); display:grid; place-items:center; color:var(--a2-t3); }
.a2-med-car-mini img{ display:block; width:100%; height:100%; object-fit:cover; }
.a2-med-car-mini .a2-ico{ width:20px; height:20px; }
.a2-med-car-nome{ display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 8px; font-size:13px; min-width:0; }
.a2-med-car-nome > b{ font-family:var(--a2-f-mono); font-weight:500; font-size:12.5px; word-break:break-all; }
.a2-med-car-nome span{ color:var(--a2-t3); font-size:12px; font-variant-numeric:tabular-nums; }
.a2-med-car-nome span b{ color:var(--a2-t1); }
.a2-med-car-fasi{ display:flex; flex-wrap:wrap; align-items:center; gap:4px; font-size:11.5px; }
.a2-med-car-fase{ display:inline-flex; align-items:center; gap:4px; padding:2px 8px 2px 6px; border-radius:999px; background:var(--a2-sunken); color:var(--a2-t3); box-shadow:inset 0 0 0 1px var(--a2-line); white-space:nowrap; }
.a2-med-car-fase .a2-ico{ width:12px; height:12px; }
.a2-med-car-fase-on{ background:var(--a2-run-50); color:var(--a2-run-700); box-shadow:inset 0 0 0 1px var(--a2-run-100); font-weight:600; }
.a2-med-car-fase-ok{ background:var(--a2-acc-50); color:var(--a2-acc-h); box-shadow:inset 0 0 0 1px var(--a2-acc-100); }
.a2-med-car-fase-salta{ opacity:.65; }
.a2-med-car-fase-err{ background:var(--a2-err-50); color:var(--a2-err-700); box-shadow:inset 0 0 0 1px var(--a2-err-100); font-weight:600; }
.a2-med-car-fr{ color:var(--a2-t-off); }
.a2-med-car-det{ font-size:12px; color:var(--a2-t2); display:flex; flex-wrap:wrap; align-items:center; gap:4px 10px; min-height:18px; font-variant-numeric:tabular-nums; }
.a2-med-car-det .a2-bar{ flex:0 1 260px; min-width:120px; height:6px; }
.a2-med-car-det .a2-bar i{ transition:width .2s linear; }
.a2-med-car-det em{ font-style:normal; color:var(--a2-t3); }
.a2-med-car-det > .a2-ico{ width:14px; height:14px; color:var(--a2-run-700); }
.a2-med-car-az{ grid-column:3; grid-row:1 / 4; display:flex; gap:6px; align-items:center; }
.a2-med-car-errore{ grid-column:2 / 4; display:flex; gap:8px; align-items:flex-start; margin-top:4px; padding:9px 12px; border-radius:var(--a2-r2); background:var(--a2-err-50); border:1px solid var(--a2-err-100); color:var(--a2-err-700); font-size:12.5px; line-height:1.5; }
.a2-med-car-errore .a2-ico{ flex:none; margin-top:2px; width:15px; height:15px; }

.a2-med-vuota{ margin-top:14px; padding:34px 22px 30px; }
.a2-med-vuota-l{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px; text-align:left; font-size:13px; color:var(--a2-t2); }
.a2-med-vuota-l li{ display:flex; gap:8px; align-items:flex-start; }
.a2-med-vuota-l .a2-ico{ color:var(--a2-acc); flex:none; margin-top:3px; }
.a2-med-vuota-act{ margin-top:16px; }
.a2-med-vuota-act label{ cursor:pointer; }

/* Il dettaglio di un media (mockup 26, schermate «c» e «d»): l'anteprima
   con misure e azioni a sinistra; a destra passaggi, trascrizione con i
   tempi e la descrizione da correggere. */
.a2-med-briciole{ display:flex; align-items:center; gap:6px; font-size:12.5px; color:var(--a2-t3); margin-bottom:6px; min-width:0; }
.a2-med-briciole > span:last-child{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.a2-med-briciole a{ color:var(--a2-acc-h); text-decoration:none; font-weight:500; display:inline-flex; align-items:center; gap:3px; }
.a2-med-briciole .a2-ico{ width:14px; height:14px; }
.a2-med-det{ display:grid; grid-template-columns:minmax(0, 380px) minmax(0, 1fr); gap:22px; align-items:start; margin-top:14px; }
.a2-med-det-video{ grid-template-columns:minmax(0, 320px) minmax(0, 1fr); }
.a2-med-ant{ display:flex; flex-direction:column; gap:10px; min-width:0; }
.a2-med-ant-img{ border-radius:var(--a2-r2); overflow:hidden; background:var(--a2-sunken); box-shadow:0 0 0 1px var(--a2-line); }
.a2-med-ant-img img{ display:block; width:100%; height:auto; }
.a2-med-ant-musica{ display:grid; gap:12px; }
/* La musica del reel: nella proposta e nella vista del reel (tappa 3). */
.a2-rp-musica{ display:grid; gap:8px; margin-top:8px; }
.a2-rp-musica-k{ display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--a2-t2); }
.a2-rp-musica-descr{ width:100%; min-height:3.2em; resize:vertical; }
.a2-rp-musica-audio, .a2-rv-musica-audio{ width:100%; max-width:360px; height:32px; }
.a2-rp-musica-az{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.a2-rv-musica{ flex-wrap:wrap; }
.a2-rv-musica-pannello{ flex-basis:100%; display:grid; gap:8px; }
.a2-med-ant-musica .a2-med-ph{ aspect-ratio:1 / 1; max-width:280px; border-radius:var(--a2-r2); }
.a2-med-ant-musica audio{ width:100%; }
.a2-med-diritti{ margin-top:8px; max-width:none; }
.a2-med-video{ display:block; width:100%; max-height:70vh; border-radius:var(--a2-r2); background:#090E20; box-shadow:0 0 0 1px var(--a2-line); }
.a2-med-mis{ display:grid; grid-template-columns:auto 1fr; gap:4px 12px; font-size:12.5px; color:var(--a2-t2); padding:10px 12px; margin:0; background:var(--a2-surface); border:1px solid var(--a2-line); border-radius:var(--a2-r2); }
.a2-med-mis dt{ color:var(--a2-t3); }
.a2-med-mis dd{ margin:0; font-variant-numeric:tabular-nums; display:flex; align-items:center; gap:5px; flex-wrap:wrap; min-width:0; }
.a2-med-mis dd .a2-ico{ width:14px; height:14px; color:var(--a2-t3); }
.a2-med-az{ display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.a2-med-az-form{ display:contents; }
.a2-med-az .a2-soc-costo{ font-size:11.5px; flex-basis:100%; }
.a2-med-det-stato{ display:flex; flex-wrap:wrap; align-items:center; gap:6px 8px; font-size:12.5px; color:var(--a2-t1); padding:8px 12px; border-radius:var(--a2-r2); background:var(--a2-obs-50); border:1px solid var(--a2-obs-100); }
.a2-med-det-stato[hidden]{ display:none; }
.a2-med-det-stato > .a2-ico{ width:14px; height:14px; flex:none; color:var(--a2-obs-700); }

.a2-med-col{ display:flex; flex-direction:column; gap:14px; min-width:0; }
.a2-med-sez{ border:1px solid var(--a2-line); border-radius:var(--a2-r3); background:var(--a2-surface); }
.a2-med-sez-hd{ display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; padding:11px 14px; border-bottom:1px solid var(--a2-line); }
.a2-med-sez-hd .a2-card-t{ font-size:14px; }
.a2-med-sez-hd .a2-card-sub{ font-size:12px; }
.a2-med-sez-end{ margin-left:auto; display:flex; gap:6px; align-items:center; }
.a2-med-sez-ft{ padding:9px 14px; border-top:1px solid var(--a2-line); font-size:12px; color:var(--a2-t3); line-height:1.5; }
.a2-med-sez-nota{ margin:0; padding:12px 14px 0; font-size:12.5px; color:var(--a2-t2); line-height:1.5; }
.a2-med-sez-esito{ display:flex; align-items:flex-start; gap:6px; padding:9px 14px; border-top:1px solid var(--a2-err-100); background:var(--a2-err-50); color:var(--a2-err-700); font-size:12.5px; border-radius:0 0 var(--a2-r3) var(--a2-r3); }
.a2-med-sez-esito[hidden]{ display:none; }
.a2-med-sez-esito .a2-ico{ width:14px; height:14px; flex:none; margin-top:2px; }
.a2-med-segui{ font-size:12px; color:var(--a2-t3); gap:6px; cursor:pointer; }
.a2-med-manca{ display:flex; flex-direction:column; align-items:flex-start; gap:10px; padding:16px; font-size:13px; line-height:1.55; color:var(--a2-t2); }
.a2-med-manca b{ color:var(--a2-t1); }

.a2-med-ia{ display:inline-flex; align-items:center; gap:4px; font-size:11px; font-weight:600; color:var(--a2-t3); background:var(--a2-sunken); border-radius:999px; padding:1px 7px 1px 5px; white-space:nowrap; }
.a2-med-ia .a2-ico{ width:11px; height:11px; }
.a2-med-ia-tuo{ color:var(--a2-acc-h); background:var(--a2-acc-50); }

.a2-med-pass{ list-style:none; margin:0; padding:6px; display:flex; flex-direction:column; gap:2px; }
.a2-med-pas{ display:grid; grid-template-columns:22px minmax(0,1fr) auto; align-items:center; gap:8px; padding:3px 6px; border-radius:var(--a2-r1); }
.a2-med-pas-n{ width:20px; height:20px; border-radius:50%; background:var(--a2-sunken); color:var(--a2-t2); font-size:11px; font-weight:650; display:grid; place-items:center; box-shadow:inset 0 0 0 1px var(--a2-line); }
.a2-med-pas input{ width:100%; box-sizing:border-box; border:1px solid transparent; background:transparent; font:inherit; font-size:13px; color:var(--a2-t1); padding:4px 6px; border-radius:5px; }
.a2-med-pas input:not([readonly]):hover{ border-color:var(--a2-line); }
.a2-med-pas input:focus{ outline:none; border-color:var(--a2-acc); background:var(--a2-surface); }
.a2-med-pas input[readonly]:focus{ border-color:transparent; }
.a2-med-pas-end{ display:inline-flex; align-items:center; gap:6px; }
.a2-med-tc{ all:unset; cursor:pointer; font-family:var(--a2-f-mono); font-size:11.5px; color:var(--a2-acc-h); padding:3px 8px; border-radius:999px; background:var(--a2-acc-50); white-space:nowrap; font-variant-numeric:tabular-nums; }
.a2-med-tc:hover{ background:var(--a2-acc-100); }
.a2-med-tc:focus-visible{ outline:2px solid var(--a2-acc); outline-offset:1px; }
.a2-med-pas-ora{ background:var(--a2-acc-50); }
.a2-med-pas-ora .a2-med-pas-n{ background:var(--a2-acc); color:#fff; box-shadow:none; }

.a2-med-trasc{ list-style:none; margin:0; padding:6px; max-height:440px; overflow:auto; display:flex; flex-direction:column; gap:1px; position:relative; }
.a2-med-fr{ display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:start; gap:10px; padding:6px 6px 6px 9px; border-radius:var(--a2-r1); cursor:pointer; }
.a2-med-fr:hover{ background:var(--a2-sunken); }
.a2-med-fr-t{ all:unset; cursor:pointer; font-family:var(--a2-f-mono); font-size:11.5px; color:var(--a2-t3); padding-top:2px; font-variant-numeric:tabular-nums; white-space:nowrap; border-radius:4px; }
.a2-med-fr-t:focus-visible{ outline:2px solid var(--a2-acc); outline-offset:1px; }
.a2-med-fr-x{ font-size:13.5px; line-height:1.55; color:var(--a2-t1); min-width:0; }
.a2-med-fr-x textarea{ width:100%; box-sizing:border-box; font:inherit; font-size:13.5px; line-height:1.5; resize:vertical; }
.a2-med-fr-ed{ opacity:0; border:0; background:none; cursor:pointer; color:var(--a2-t3); padding:3px; border-radius:5px; }
.a2-med-fr-ed[hidden]{ display:none; }
.a2-med-fr:hover .a2-med-fr-ed, .a2-med-fr-ed:focus-visible{ opacity:1; }
.a2-med-fr-ed:hover{ background:var(--a2-line); color:var(--a2-t1); }
/* Sui touch non c'e' hover: la matita si vede sempre. */
@media (hover:none){ .a2-med-fr-ed{ opacity:1; } }
.a2-med-fr-ed .a2-ico{ width:14px; height:14px; display:block; }
.a2-med-fr-ora, .a2-med-fr-ora:hover{ background:var(--a2-acc-50); box-shadow:inset 3px 0 0 var(--a2-acc); }
.a2-med-fr-ora .a2-med-fr-t{ color:var(--a2-acc-h); font-weight:600; }
.a2-med-fr-in-mod, .a2-med-fr-in-mod:hover{ cursor:default; background:var(--a2-surface); box-shadow:inset 0 0 0 1px var(--a2-acc); }
.a2-med-fr-az{ display:flex; gap:6px; margin-top:6px; align-items:center; flex-wrap:wrap; }
.a2-med-fr-az small{ color:var(--a2-t3); font-size:11.5px; }
.a2-med-fr-corr{ margin-left:6px; vertical-align:1px; }

.a2-med-sotto-desc{ padding:12px 14px; display:flex; flex-direction:column; gap:12px; margin:0; }
.a2-med-campi{ display:flex; flex-direction:column; gap:14px; border:0; padding:0; margin:0; min-width:0; }
.a2-med-campo{ display:flex; flex-direction:column; gap:6px; min-width:0; }
.a2-med-campo-t{ display:flex; flex-wrap:wrap; align-items:center; gap:6px 8px; font-size:12.5px; font-weight:600; color:var(--a2-t1); }
.a2-med-campo-t small{ font-weight:400; color:var(--a2-t3); font-size:12px; }
.a2-med-campo textarea{ width:100%; box-sizing:border-box; font-size:13px; line-height:1.55; resize:vertical; }
.a2-med-campo .a2-input.a2-med-titolo{ font-size:14px; font-weight:600; width:100%; box-sizing:border-box; }
.a2-med-testo-img{ margin:0; font-size:13px; line-height:1.5; color:var(--a2-t2); white-space:pre-line; background:var(--a2-sunken); border-radius:var(--a2-r1); padding:8px 10px; }
.a2-med-avv{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px; }
.a2-med-avv:empty{ display:none; }
.a2-med-avv li{ display:flex; align-items:center; gap:8px; padding:5px 6px 5px 10px; border-radius:var(--a2-r1); background:var(--a2-obs-50); border:1px solid var(--a2-obs-100); color:var(--a2-obs-700); font-size:12.5px; }
.a2-med-avv li > .a2-ico{ width:14px; height:14px; flex:none; }
.a2-med-avv li input{ flex:1 1 auto; min-width:0; border:0; background:transparent; font:inherit; color:inherit; padding:2px 0; }
.a2-med-avv li input:focus{ outline:none; box-shadow:0 1px 0 var(--a2-obs-500); }
.a2-med-avv-x{ border:0; background:none; color:var(--a2-obs-700); cursor:pointer; padding:2px 6px; border-radius:4px; font-size:15px; line-height:1; }
.a2-med-avv-x:hover{ background:var(--a2-obs-100); }
.a2-med-campi:disabled .a2-med-avv-x{ display:none; }
.a2-med-avv-agg{ align-self:flex-start; background:none; border:0; padding:0; font:inherit; font-size:12.5px; cursor:pointer; }
.a2-med-salva{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; padding-top:12px; border-top:1px solid var(--a2-line); }
.a2-med-salva .a2-hint{ font-size:12px; }

@media (max-width: 1100px){
  .a2-med-top{ grid-template-columns:minmax(0,1fr); }
  .a2-med-cerca{ margin-left:0; flex:1 1 100%; }
  .a2-med-cerca input{ width:100%; box-sizing:border-box; }
  .a2-med-det, .a2-med-det-video{ grid-template-columns:minmax(0,1fr); }
  .a2-med-ant{ max-width:400px; }
}
@media (max-width: 640px){
  .a2-med-car-f{ grid-template-columns:48px minmax(0,1fr); }
  .a2-med-car-mini{ width:48px; height:36px; }
  .a2-med-car-az{ grid-column:2; grid-row:auto; }
  .a2-med-car-errore{ grid-column:1 / -1; }
}

/* ---------- La proposta del reel (mockup 27, schermate c, d, f) ---------- */
/* Tappa 2: le tre scelte sotto la riga di un reel da produrre. */
.a2-soc-rp-reel{ row-gap:6px; }
.a2-rp-t2{ grid-column:1 / -1; display:flex; flex-direction:column; gap:8px; background:var(--a2-surface); border:1px solid var(--a2-line); border-radius:var(--a2-r2); padding:10px 12px; }
.a2-rp-t2-righe{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:10px 18px; }
.a2-rp-t2-scelta{ display:flex; flex-direction:column; align-items:flex-start; gap:5px; min-width:0; }
.a2-rp-t2-k{ display:inline-flex; align-items:center; gap:5px; font-weight:600; font-size:12.5px; color:var(--a2-t1); }
.a2-rp-t2-k .a2-ico{ width:14px; height:14px; color:var(--a2-t3); }
.a2-rp-t2-n{ font-size:11.5px; color:var(--a2-t3); line-height:1.4; }
.a2-rp-t2-off .a2-rp-t2-k{ color:var(--a2-t3); }
.a2-rp-t2-ft{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px; padding-top:8px; border-top:1px solid var(--a2-line); }
.a2-rp-seg{ display:inline-flex; border:1px solid var(--a2-line-str); border-radius:999px; overflow:hidden; font-size:12.5px; background:var(--a2-surface); }
.a2-rp-seg button{ font:inherit; border:0; background:transparent; padding:4px 12px; cursor:pointer; color:var(--a2-t2); }
.a2-rp-seg button + button{ border-left:1px solid var(--a2-line); }
.a2-rp-seg button[aria-pressed="true"]{ background:#1d2230; color:#fff; font-weight:600; }
.a2-rp-seg button:disabled{ color:var(--a2-t-off); cursor:not-allowed; }
.a2-rp-seg button:disabled[aria-pressed="true"]{ background:var(--a2-sunken); color:var(--a2-t3); }

/* La proposta. */
.a2-rp-avvisi{ margin:0 0 12px; }
.a2-rp-scelte{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:10px; margin:0 0 16px; }
.a2-rp-scelta{ border:1px solid var(--a2-line); border-radius:var(--a2-r2); background:var(--a2-surface); padding:10px 12px; display:flex; flex-direction:column; gap:6px; font-size:12.5px; }
.a2-rp-scelta-off{ background:var(--a2-sunken); }
.a2-rp-scelta-hd{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.a2-rp-scelta-hd b{ font-size:13px; display:inline-flex; align-items:center; gap:5px; }
.a2-rp-scelta-hd b .a2-ico{ width:15px; height:15px; color:var(--a2-t3); }
.a2-rp-dt{ font-size:10.5px; font-weight:650; color:var(--a2-acc-h); background:var(--a2-acc-100); border-radius:999px; padding:1px 7px; }
.a2-rp-deciso{ margin:0; color:var(--a2-t1); line-height:1.45; }
.a2-rp-perche{ display:flex; align-items:flex-start; gap:5px; color:var(--a2-t2); line-height:1.45; font-size:12px; margin:0; }
.a2-rp-perche .a2-ico{ flex:none; width:13px; height:13px; margin-top:2px; color:var(--a2-acc); }
.a2-rp-nota{ font-size:11.5px; line-height:1.4; }
.a2-rp{ display:grid; grid-template-columns:300px minmax(0,1fr); gap:24px; align-items:start; }
.a2-rp-sx{ position:sticky; top:12px; display:flex; flex-direction:column; gap:10px; }
.a2-rp-leg{ display:flex; flex-direction:column; gap:4px; font-size:11.5px; color:var(--a2-t3); line-height:1.4; margin:0; }
.a2-rp-leg span{ display:flex; gap:6px; align-items:flex-start; }
.a2-rp-leg i{ flex:none; width:10px; height:10px; border-radius:3px; margin-top:3px; border:1.5px dashed #8a93a6; }
.a2-rp-dx{ min-width:0; display:flex; flex-direction:column; gap:12px; }
.a2-rp-hd{ display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 12px; font-size:14px; }
.a2-rp-hd .a2-hint{ font-size:12px; }
.a2-rp-scal{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; }
.a2-rp-sl{ display:grid; grid-template-columns:64px minmax(0,1fr) auto; gap:12px; align-items:start; border:1px solid var(--a2-line); border-radius:10px; background:var(--a2-surface); padding:10px; }
.a2-rp-sl-ora{ border-color:var(--a2-acc); box-shadow:0 0 0 1px var(--a2-acc); }
.a2-rp-sl-m{ border:0; padding:0; background:none; cursor:pointer; display:block; }
.a2-rp-sl-c{ min-width:0; display:flex; flex-direction:column; gap:8px; }
.a2-rp-sl-hd{ display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; font-size:12.5px; }
.a2-rp-sl-sel{ max-width:240px; font-weight:600; }
.a2-rp-fn{ display:inline-flex; align-items:center; font-size:11px; font-weight:600; border-radius:999px; padding:1px 8px; white-space:nowrap; background:#e4eefb; color:#0C5F9E; }
.a2-rp-sl-dur{ display:inline-flex; align-items:center; gap:5px; color:var(--a2-t3); font-size:12px; font-variant-numeric:tabular-nums; }
.a2-rp-sl-dur input, .a2-rp-tratto input{ height:26px; width:62px; padding:0 6px; font-size:12px; box-sizing:border-box; }
.a2-rp-chip{ display:inline-flex; align-items:center; gap:4px; font-size:11px; font-weight:600; border-radius:999px; padding:1px 8px; white-space:nowrap; background:#e9e4f7; color:#4b3a8c; }
.a2-rp-chip .a2-ico{ width:12px; height:12px; }
.a2-rp-pass{ display:flex; flex-wrap:wrap; align-items:baseline; gap:3px 8px; font-size:12.5px; padding:6px 9px; border-radius:6px; background:var(--a2-sunken); }
.a2-rp-pass-k{ font-size:10.5px; font-weight:650; letter-spacing:.05em; text-transform:uppercase; color:var(--a2-t3); }
.a2-rp-pass b{ color:var(--a2-t1); font-weight:600; }
.a2-rp-pass-p{ flex:1 1 100%; color:var(--a2-t2); line-height:1.45; }
.a2-rp-pass-p > span{ color:var(--a2-acc); }
.a2-rp-testi{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:6px 10px; }
.a2-rp-campo{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.a2-rp-campo > span{ font-size:10.5px; font-weight:650; letter-spacing:.05em; text-transform:uppercase; color:var(--a2-t3); }
.a2-rp-ta{ width:100%; box-sizing:border-box; font-size:12.5px; line-height:1.4; resize:vertical; min-height:30px; padding:4px 8px; }
.a2-rp-mat{ display:flex; flex-wrap:wrap; align-items:center; gap:5px 10px; font-size:12.5px; padding-top:7px; border-top:1px dashed var(--a2-line); }
.a2-rp-k{ display:inline-flex; align-items:center; gap:5px; font-weight:600; color:var(--a2-t1); min-width:96px; }
.a2-rp-k .a2-ico{ width:14px; height:14px; color:var(--a2-t3); }
.a2-rp-v{ color:var(--a2-t3); }
.a2-rp-det{ flex:1 1 100%; display:flex; flex-wrap:wrap; align-items:center; gap:5px 10px; }
.a2-rp-det[hidden]{ display:none; }
.a2-rp-det .a2-rp-ta{ flex:1 1 100%; }
.a2-rp-det .a2-hint{ font-size:11.5px; }
.a2-rp-genera{ flex:1 1 100%; display:flex; flex-wrap:wrap; align-items:center; gap:5px 10px; }
.a2-rp-mini{ width:40px; height:40px; object-fit:cover; border-radius:5px; box-shadow:0 0 0 1px var(--a2-line); background:var(--a2-sunken); }
.a2-rp-tratto{ display:inline-flex; align-items:center; gap:5px; color:var(--a2-t3); font-variant-numeric:tabular-nums; }
.a2-rp-sl-az{ display:flex; flex-direction:column; align-items:stretch; gap:4px; }
.a2-rp-sl-az .a2-btn-sm{ padding-left:6px; padding-right:6px; justify-content:center; }
.a2-rp-torna{ font-size:11.5px; white-space:nowrap; }
.a2-rp-chiedi{ border:1px solid var(--a2-line); border-radius:10px; background:var(--a2-surface); padding:12px 14px; display:flex; flex-direction:column; gap:8px; }
.a2-rp-chiedi-dopo{ margin:0 18px 14px; }
.a2-rp-chiedi-hd{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; font-size:13.5px; }
.a2-rp-chiedi-hd .a2-hint{ font-size:12px; }
.a2-rp-chiedi textarea{ width:100%; box-sizing:border-box; font-size:12.5px; }
.a2-rp-chiedi-ft{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px; }
.a2-rp-ft{ display:flex; flex-wrap:wrap; align-items:flex-start; gap:12px 24px; }
.a2-rp-costi{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:5px; font-size:12.5px; color:var(--a2-t2); flex:1 1 420px; }
.a2-rp-costi li{ display:flex; gap:10px; align-items:baseline; }
.a2-rp-co-k{ display:inline-flex; align-items:center; gap:5px; min-width:150px; font-weight:600; color:var(--a2-t1); }
.a2-rp-co-k .a2-ico{ width:14px; height:14px; color:var(--a2-t3); }
.a2-rp-approva{ display:flex; flex-direction:column; align-items:flex-start; gap:6px; max-width:380px; }
.a2-rp-approva .a2-hint{ font-size:11.5px; line-height:1.45; }
@media (max-width: 1180px){
  .a2-rp{ grid-template-columns:minmax(0,1fr); }
  .a2-rp-sx{ position:static; }
  .a2-rp-scelte, .a2-rp-t2-righe{ grid-template-columns:minmax(0,1fr); }
}
@media (max-width: 640px){
  .a2-rp-sl{ grid-template-columns:52px minmax(0,1fr); }
  .a2-rp-sl-az{ grid-column:1 / -1; flex-direction:row; flex-wrap:wrap; }
  .a2-rp-testi{ grid-template-columns:minmax(0,1fr); }
  .a2-rp-co-k{ min-width:0; }
}

/* =====================================================================
   Tipi e formati (mockup 28): le regole m28-* del mockup con il prefisso
   a2-tf-. La galleria del Brand per tipo e formato (_SezioneTipo,
   _TesseraTemplate, _RiquadroCrea) e le pagine di Crea un template e
   Crea una variante. Il riquadro verde tratteggiato (a2-can-crea, e
   a2-tf-altro nella forma piccola) e' il segno di ogni generazione.
   Le miniature disegnate del mockup non ci sono: l'app ha quelle vere.
   ===================================================================== */
/* ---------- I tipi nuovi: Carosello e Reel hanno il loro colore ---------- */
.a2-tipo-fmt-carosello { --tipo:#8A3FA0; background:#F2E6F6; }
.a2-tipo-fmt-reel { --tipo:#0E6F80; background:#DFF0F3; }

/* ---------- Il riquadro delle miniature ---------- */
.a2-tf-mini { display:flex; align-items:center; justify-content:center; gap:5px; height:132px; padding:8px; box-sizing:border-box; background:var(--a2-sunken); border-radius:6px; box-shadow:0 0 0 1px var(--a2-line); overflow:hidden; }
.a2-tf-mini-alta { height:170px; }
.a2-tf-mini-grande { height:250px; }
.a2-tf-mini-bassa { height:76px; }

/* ---------- 1 · La galleria ---------- */
.a2-tf-intro { margin:0 0 12px; font-size:13.5px; color:var(--a2-t2); max-width:60em; line-height:1.5; }
.a2-tf-indice { display:flex; flex-wrap:wrap; gap:6px; margin:0 0 16px; }
.a2-tf-indice a { display:inline-flex; align-items:center; gap:6px; text-decoration:none; font-size:12.5px; color:var(--a2-t2); border:1px solid var(--a2-line); background:var(--a2-surface); border-radius:999px; padding:3px 10px 3px 6px; }
.a2-tf-indice a:hover { border-color:var(--a2-line-str); color:var(--a2-t1); }
.a2-tf-indice .a2-tipo { height:18px; }
.a2-tf-indice-n { font-family:var(--a2-f-mono); font-size:11px; color:var(--a2-t3); }
.a2-tf-gal { display:flex; flex-direction:column; gap:14px; }
.a2-tf-gal .a2-card-hd { flex-wrap:wrap; }
.a2-tf-gal .a2-gal-fmt-t { gap:8px; }
.a2-tf-gal .a2-card-bd { display:flex; flex-direction:column; gap:14px; }
.a2-tf-es { width:226px; }
.a2-tf-es figcaption { gap:5px; }
.a2-tf-riga { display:flex; flex-wrap:wrap; align-items:center; gap:4px 8px; }
.a2-tf-fmt { display:inline-flex; align-items:center; gap:5px; height:20px; padding:0 8px; border-radius:999px; background:var(--a2-sunken); box-shadow:inset 0 0 0 1px var(--a2-line); font-size:11.5px; color:var(--a2-t2); white-space:nowrap; }
.a2-tf-fmt i { font-style:normal; font-family:var(--a2-f-mono); font-size:10.5px; color:var(--a2-t3); }
.a2-tf-var { font-size:11.5px; color:#7a5a06; background:#FBF3D6; border-radius:6px; padding:1px 8px; }
.a2-tf-serve { font-size:11.5px; color:var(--a2-t2); line-height:1.45; }
.a2-tf-serve b { display:block; font-size:10.5px; font-weight:650; letter-spacing:.05em; text-transform:uppercase; color:var(--a2-t3); margin-bottom:1px; }
.a2-tf-es .a2-tpl-az { display:flex; flex-wrap:wrap; gap:6px; margin-top:3px; }
.a2-tf-filtri { display:flex; flex-wrap:wrap; align-items:center; gap:6px; }
.a2-tf-filtri-k { font-size:11.5px; font-weight:600; color:var(--a2-t3); margin-right:2px; }
.a2-tf-chip { font:inherit; font-size:12px; color:var(--a2-t2); background:var(--a2-surface); border:1px solid var(--a2-line); border-radius:999px; padding:3px 10px; cursor:pointer; display:inline-flex; gap:6px; align-items:baseline; }
.a2-tf-chip i { font-style:normal; font-family:var(--a2-f-mono); font-size:10.5px; color:var(--a2-t3); }
.a2-tf-chip[aria-pressed="true"] { background:var(--a2-t1); border-color:var(--a2-t1); color:#fff; }
.a2-tf-chip[aria-pressed="true"] i { color:#cfd5e2; }
.a2-tf-gr { display:flex; flex-direction:column; gap:10px; }
.a2-tf-gr + .a2-tf-gr { border-top:1px solid var(--a2-line); padding-top:14px; }
.a2-tf-gr-hd { display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 10px; font-size:12.5px; }
.a2-tf-gr-hd b { font-size:13px; font-weight:650; color:var(--a2-t1); }
.a2-tf-vuoto { margin:0; font-size:12.5px; color:var(--a2-t3); }
.a2-tf-crea { cursor:pointer; }
.a2-tf-gal .a2-can-crea { align-self:flex-start; }

/* ---------- 2 · Crea un template ---------- */
.a2-tf-modulo .a2-card-bd { display:flex; flex-direction:column; gap:14px; }
.a2-tf-r { display:grid; grid-template-columns:150px minmax(0,1fr); gap:6px 14px; align-items:start; font-size:13px; }
.a2-tf-k { padding-top:5px; font-size:12px; font-weight:600; color:var(--a2-t2); }
.a2-tf-k small { display:block; font-weight:400; color:var(--a2-t3); font-size:11.5px; }
.a2-tf-v { display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; min-width:0; }
.a2-tf-v-col { flex-direction:column; align-items:flex-start; }
.a2-tf-sel { height:32px; min-width:280px; max-width:100%; }
.a2-tf-px { width:92px; }
.a2-tf-sag { display:block; flex:none; border:1.5px dashed var(--a2-acc); border-radius:3px; background:var(--a2-acc-50); }
.a2-tf-fisso { display:inline-flex; align-items:center; gap:7px; height:30px; padding:0 11px; border-radius:var(--a2-r2); background:var(--a2-sunken); border:1px solid var(--a2-line); color:var(--a2-t1); font-weight:600; font-size:12.5px; }
.a2-tf-fisso .a2-ico { width:14px; height:14px; color:var(--a2-t3); }
.a2-tf-area { width:100%; max-width:640px; min-height:64px; }
.a2-tf-radio { display:flex; flex-direction:column; gap:6px; }
.a2-tf-radio label { display:flex; align-items:center; gap:9px; font-size:13px; color:var(--a2-t1); cursor:pointer; }
.a2-tf-radio label span { color:var(--a2-t3); font-size:12px; }
.a2-tf-usa { font-size:12px; color:var(--a2-t3); line-height:1.5; }
.a2-tf-usa b { color:var(--a2-t2); font-weight:600; }
.a2-tf-esito { margin-top:16px; }
.a2-tf-esito .a2-card-bd { display:flex; flex-direction:column; gap:14px; }
.a2-tf-griglia { display:flex; flex-wrap:wrap; gap:14px; align-items:flex-start; }
.a2-tf-griglia-slide { display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:12px; }
.a2-tf-prop { width:226px; }
.a2-tf-prop-g { width:330px; max-width:100%; }
.a2-tf-pag { width:168px; }
.a2-tf-slide { width:auto; }
.a2-tf-scegli { display:flex; align-items:center; gap:7px; cursor:pointer; }
.a2-tf-prop figcaption, .a2-tf-slide figcaption { gap:5px; }
.a2-tf-prop .a2-tpl-az, .a2-tf-slide .a2-tpl-az { display:flex; flex-wrap:wrap; gap:6px; margin-top:2px; }
.a2-tf-ok { background:var(--a2-acc-100); color:var(--a2-acc-h); }
.a2-tf-agg { display:flex; flex-direction:column; gap:8px; align-items:stretch; width:100%; max-width:640px; box-sizing:border-box; }
.a2-tf-agg-r { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.a2-tf-agg-r .a2-input { flex:1 1 260px; min-width:0; height:32px; }
.a2-tf-agg .a2-hint { max-width:none; }
.a2-tf-ft { display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px; }
.a2-tf-esito-n { font-size:12.5px; color:var(--a2-t3); }
.a2-tf-togli { animation:a2-tf-via .25s ease forwards; }
@keyframes a2-tf-via { to { opacity:0; transform:scale(.96); } }
.a2-tf-nome-car { display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; font-size:12.5px; }
.a2-tf-nome-car .a2-input { height:30px; width:280px; max-width:100%; }

/* ---------- 3 · Crea una variante ---------- */
.a2-tf-var-g { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:16px; align-items:start; }
.a2-tf-var-col { display:flex; flex-direction:column; gap:14px; min-width:0; }
.a2-tf-var-g .a2-card-bd { display:flex; flex-direction:column; gap:10px; }
.a2-tf-var-vuota { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; height:250px; border:1.5px dashed var(--a2-line-str); border-radius:6px; color:var(--a2-t3); font-size:12.5px; text-align:center; padding:12px; box-sizing:border-box; }
.a2-tf-var-vuota .a2-ico { width:22px; height:22px; }
.a2-tf-bene { display:flex; gap:8px; align-items:flex-start; padding:10px 12px; border-radius:var(--a2-r2); background:var(--a2-acc-50); color:var(--a2-acc-h); font-size:12.5px; box-shadow:inset 0 0 0 1px var(--a2-acc-100); }
.a2-tf-bene .a2-ico { flex:none; width:16px; height:16px; margin-top:1px; }
.a2-tf-nome { height:32px; width:100%; }
@media (max-width:1000px) { .a2-tf-var-g { grid-template-columns:minmax(0,1fr); } }

/* ---------- 4 · Quale template usare ---------- */
.a2-tf-base .a2-card-bd { display:flex; flex-direction:column; gap:10px; }
.a2-tf-scelta { display:grid; grid-template-columns:auto 92px minmax(0,1fr); gap:12px; align-items:center; padding:10px 12px; border:1px solid var(--a2-line); border-radius:var(--a2-r2); background:var(--a2-surface); cursor:pointer; }
.a2-tf-scelta:hover { border-color:var(--a2-line-str); }
.a2-tf-scelta.attiva { border-color:var(--a2-acc); box-shadow:0 0 0 3px var(--a2-acc-50); }
.a2-tf-scelta .a2-tf-mini { height:76px; padding:5px; }
.a2-tf-scelta-t { display:flex; flex-direction:column; gap:3px; min-width:0; font-size:12.5px; }
.a2-tf-scelta-t b { font-size:13.5px; font-weight:650; color:var(--a2-t1); }
.a2-tf-ia { display:inline-flex; align-items:center; gap:4px; width:fit-content; height:20px; padding:0 8px; border-radius:999px; background:var(--a2-acc-100); color:var(--a2-acc-h); font-size:11px; font-weight:650; }
.a2-tf-ia .a2-ico { width:12px; height:12px; }
.a2-tf-perche { font-size:12.5px; color:var(--a2-t2); }
.a2-tf-altri-k { font-size:11.5px; font-weight:600; color:var(--a2-t3); margin-top:4px; }
.a2-tf-unico { grid-template-columns:92px minmax(0,1fr); cursor:default; }
.a2-tf-passo { opacity:.8; border-style:dashed; }
.a2-tf-contenuto { font-size:13px; color:var(--a2-t2); line-height:1.55; }
.a2-tf-contenuto b { color:var(--a2-t1); }
.a2-tf-caso-g { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.25fr); gap:16px; align-items:start; }
@media (max-width:1000px) { .a2-tf-caso-g { grid-template-columns:minmax(0,1fr); } }

/* ---------- Telefono ---------- */
@media (max-width:640px) {
  .mk-pagina { padding:16px 10px 60px; }
  .a2-tf-r { grid-template-columns:minmax(0,1fr); }
  .a2-tf-k { padding-top:0; }
  .a2-tf-sel { min-width:0; width:100%; }
  .a2-tf-es, .a2-tf-prop { width:calc(50% - 7px); min-width:150px; }
  .a2-tf-gal .a2-can-crea { width:100%; box-sizing:border-box; }
  .a2-tf-scelta { grid-template-columns:auto 72px minmax(0,1fr); }
}
@media (max-width:420px) { .a2-tf-es, .a2-tf-prop { width:100%; } }

/* ---------- Revisione: righe per formato, «Adatto a», «Correggi» ---------- */
.a2-tf-riga-t { align-items:stretch; }
.a2-tf-riga-t > .a2-tf-es { align-self:flex-start; }
.a2-tf-crea-col { flex-direction:column; align-items:flex-start; justify-content:flex-start; gap:10px; width:200px; box-sizing:border-box; padding:14px; min-height:132px; align-self:flex-start; }
.a2-tf-crea-col .a2-can-crea-t > span { font-size:12px; }
.a2-tf-crea-f { display:block; font-family:var(--a2-f-mono); font-size:11px; color:var(--a2-acc-h); margin-bottom:2px; }
.a2-tf-altro { display:inline-flex; flex-wrap:wrap; align-items:center; gap:4px 8px; width:fit-content; max-width:100%; padding:6px 12px; border:1.5px dashed var(--a2-acc); border-radius:var(--a2-r2); background:var(--a2-acc-50); color:var(--a2-acc-h); font-size:12.5px; text-decoration:none; }
.a2-tf-altro:hover { background:var(--a2-acc-50-h); }
.a2-tf-altro b { font-weight:650; }
.a2-tf-altro span { color:var(--a2-t3); font-size:11.5px; }
.a2-tf-altro .a2-ico { width:14px; height:14px; }
.a2-tf-adatto { display:flex; flex-direction:column; gap:3px; width:100%; }
.a2-tf-adatto > b { font-size:10.5px; font-weight:650; letter-spacing:.05em; text-transform:uppercase; color:var(--a2-t3); }
.a2-tf-adatto-l { display:flex; flex-wrap:wrap; gap:4px; align-items:center; }
.a2-tf-sit { display:inline-flex; align-items:center; gap:2px; height:20px; padding:0 8px; border-radius:999px; background:#EEF3FA; color:#1F4E79; font-size:11.5px; box-shadow:inset 0 0 0 1px #D5E2F1; white-space:nowrap; }
.a2-tf-sit-x { border:0; background:transparent; color:#5a7896; cursor:pointer; font:inherit; font-size:13px; line-height:1; padding:0 0 0 3px; }
.a2-tf-sit-x:hover { color:var(--a2-err-700); }
.a2-tf-adatto-in { width:84px; height:20px; padding:0 6px; border:1px dashed var(--a2-line-str); border-radius:999px; font:inherit; font-size:11.5px; background:transparent; color:var(--a2-t2); }
.a2-tf-adatto-in:focus { outline:2px solid var(--a2-acc); outline-offset:1px; border-style:solid; background:var(--a2-surface); }
.a2-tf-serve b { display:flex; align-items:center; gap:4px; }
.a2-tf-modifica { border:0; background:transparent; padding:0; cursor:pointer; color:var(--a2-t3); display:inline-grid; place-items:center; }
.a2-tf-modifica:hover { color:var(--a2-acc-h); }
.a2-tf-modifica .a2-ico { width:13px; height:13px; }
.a2-tf-serve-in { height:26px; width:100%; font-size:12px; padding:0 7px; }
.a2-tf-corr { display:flex; flex-direction:column; gap:6px; width:100%; padding:8px; box-sizing:border-box; border-radius:var(--a2-r2); background:var(--a2-sunken); box-shadow:inset 0 0 0 1px var(--a2-line); }
.a2-tf-corr .a2-area { min-height:52px; font-size:12px; }
.a2-tf-corr .a2-hint { font-size:11px; }
.a2-tf-corretta { font-size:11.5px; color:var(--a2-obs-700); }
.a2-tf-var-res { display:flex; flex-direction:column; gap:10px; }
.a2-tf-griglia-slide { grid-template-columns:repeat(auto-fill, minmax(180px, 1fr)); }
@media (max-width:640px) { .a2-tf-crea-col { width:calc(50% - 7px); min-width:150px; } }
@media (max-width:420px) { .a2-tf-crea-col { width:100%; min-height:0; } }
.a2-tf-prop { width:240px; }
.a2-tf-prop .a2-tpl-az .a2-btn, .a2-tf-slide .a2-tpl-az .a2-btn, .a2-tf-var-res .a2-tpl-az .a2-btn { padding:0 8px; gap:5px; }
.a2-tf-pag { width:240px; }
/* Ogni ingresso a una generazione ha lo stesso segno: il riquadro verdino tratteggiato. */
button.a2-tf-altro { cursor:pointer; font:inherit; font-size:12.5px; font-weight:650; }

/* ---------- Nell'app: ancore, «da scrivere», il riquadro del reel ---------- */
.a2-tf-ancora{ display:block; height:0; scroll-margin-top:72px; }
.a2-gal-fmt{ scroll-margin-top:16px; }
.a2-tf-gr-hd .a2-gal-nprop{ font-weight:600; }
.a2-tf-adatto-vuoto{ font-size:11.5px; color:var(--a2-t3); }
.a2-tf-es .a2-gal-bdg, .a2-tf-es .a2-gal-st{ display:flex; flex-wrap:wrap; gap:4px; }
.a2-tf-es .a2-tpl-az form{ margin:0; }
.a2-tf-crea-col .a2-can-crea-t > span a{ color:inherit; }
.a2-tf-reel-crea{ width:260px; cursor:default; }
.a2-tf-reel-crea .a2-tf-reel-campo{ display:flex; flex-direction:column; gap:4px; width:100%; font-size:12px; color:var(--a2-t2); }
.a2-tf-reel-crea .a2-area{ min-height:52px; font-size:12px; width:100%; box-sizing:border-box; }
.a2-tf-reel-crea .a2-soc-costo{ font-size:11.5px; }
.a2-tf-nota-canali{ margin:4px 0 0; }
/* L'editor dei canali, sotto le sezioni dei tipi. */
.a2-tf-canali{ margin:16px 0 4px; max-width:900px; }
.a2-tf-canali > .a2-card{ margin:0; }
/* «Crea un template» in Esegui (mockup 28, scene 2 e 3): le righe di «Che cosa generi» e la scheda di una proposta. */
.a2-tf-righe{ display:flex; flex-direction:column; gap:14px; }
.a2-tf-scegli .a2-input{ flex:1; min-width:0; }
.a2-tf-prop .a2-tf-adatto .a2-hint{ font-size:11px; }
/* La pagina di un template (Galleria/Esemplare): «Adatto a» con l'editor, e il riquadro verde della variante del reel. */
.a2-gal-dett form.a2-card-bd[data-adatto]{ display:flex; flex-direction:column; gap:8px; }
.a2-tf-var-reel{ margin-top:16px; scroll-margin-top:72px; }
.a2-tf-var-reel-box{ width:100%; max-width:640px; box-sizing:border-box; }
.a2-tf-var-reel-box .a2-can-crea-t{ width:100%; }
.a2-tf-var-reel-box .a2-area{ width:100%; box-sizing:border-box; min-height:64px; }

/* ===== Cataloghi (mockup 29): le pagine di un carosello, nella proposta (Esegui) e nella pagina del template (Galleria) ===== */
.a2-cat-mini{ display:flex; align-items:center; justify-content:center; background:var(--a2-sunken); border-radius:6px; box-shadow:0 0 0 1px var(--a2-line); overflow:hidden; padding:5px; box-sizing:border-box; }
.a2-cat-mini > *{ width:100%; }
.a2-cat-ruolo{ display:inline-flex; align-items:center; height:20px; padding:0 8px; border-radius:999px; font-size:11px; font-weight:650; white-space:nowrap; }
.a2-cat-ruolo-apertura{ background:#E3EEF8; color:#0C5F9E; }
.a2-cat-ruolo-interna{ background:var(--a2-sunken); color:var(--a2-t2); box-shadow:inset 0 0 0 1px var(--a2-line); }
.a2-cat-ruolo-chiusura{ background:#FBF3D6; color:#7a5a06; }
.a2-cat-pagine{ display:grid; grid-template-columns:repeat(auto-fill, minmax(min(178px, 100%), 1fr)); gap:12px; align-items:start; margin-top:6px; }
.a2-cat-pag{ margin:0; display:flex; flex-direction:column; gap:8px; border:1.5px dashed var(--a2-obs-500); background:var(--a2-obs-25); border-radius:var(--a2-r2); padding:8px; min-width:0; }
.a2-cat-pag figcaption{ display:flex; flex-direction:column; gap:6px; min-width:0; font-size:12.5px; }
.a2-cat-pag-hd{ display:flex; flex-wrap:wrap; align-items:center; gap:4px 6px; }
.a2-cat-pag-n{ font-family:var(--a2-f-mono); font-size:11px; color:var(--a2-t3); }
.a2-cat-pag-nm{ font-size:13px; font-weight:650; color:var(--a2-t1); overflow-wrap:anywhere; }
.a2-cat-pag .a2-tpl-az{ margin-top:0; padding-top:0; }
.a2-cat-pag .a2-tpl-az .a2-btn{ padding:0 8px; gap:5px; }
.a2-cat-pag.ok{ border-style:solid; border-color:var(--a2-acc-100); background:var(--a2-acc-50); }
.a2-cat-pag.no{ opacity:.5; border-style:solid; border-color:var(--a2-line); background:var(--a2-surface); }
.a2-cat-pag.no .a2-cat-mini{ filter:grayscale(1); }
.a2-cat-stato{ font-size:12px; font-weight:600; color:var(--a2-acc-h); display:inline-flex; align-items:center; gap:4px; }
.a2-cat-stato .a2-ico{ width:14px; height:14px; }
.a2-cat-stato-no{ color:var(--a2-t3); }
.a2-cat-conta{ display:flex; flex-wrap:wrap; gap:6px 10px; align-items:center; font-size:12.5px; color:var(--a2-t2); }
.a2-cat-gruppo + .a2-cat-gruppo{ margin-top:18px; padding-top:16px; border-top:1px solid var(--a2-line); }
.a2-cat-gruppo-hd{ display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 10px; margin:0 0 10px; }
.a2-cat-gruppo-hd h3{ margin:0; font-size:14px; font-weight:650; color:var(--a2-t1); }
.a2-cat-gruppo-hd span{ font-size:12px; color:var(--a2-t3); }
.a2-cat .a2-rc-griglia{ grid-template-columns:repeat(auto-fill, minmax(min(300px, 100%), 1fr)); }
.a2-cat .a2-rc-sl{ grid-template-columns:104px minmax(0,1fr); }
.a2-cat .a2-rc-sl .a2-cat-mini{ height:auto; }
.a2-cat-minimo{ font-size:11.5px; color:var(--a2-t3); line-height:1.35; }
.a2-cat-nuova{ background:var(--a2-acc-100); color:var(--a2-acc-h); }
/* Il catalogo delle slide di un PowerPoint (mockup 29, scena 3): il segno «di base», la slide su cui si appoggia un'aggiunta, la riga del file. */
.a2-cat-16 .a2-rc-sl{ grid-template-columns:136px minmax(0,1fr); }
.a2-cat-base{ display:inline-flex; align-items:center; gap:4px; height:20px; padding:0 8px; border-radius:999px; font-size:11px; font-weight:650; background:var(--a2-sunken); color:var(--a2-t3); box-shadow:inset 0 0 0 1px var(--a2-line); white-space:nowrap; }
.a2-cat-base .a2-ico{ width:12px; height:12px; }
.a2-cat-su{ font-size:12px; color:var(--a2-t2); }
.a2-cat-su b{ font-weight:600; color:var(--a2-t1); }
.a2-cat-su small{ display:block; color:var(--a2-t3); font-size:11.5px; }
.a2-cat-file{ margin:14px 0 0; }
.a2-cat-tolte{ margin-top:16px; border:1px dashed var(--a2-line-str); border-radius:var(--a2-r2); padding:10px 12px; background:var(--a2-sunken); }
.a2-cat-tolte-hd{ display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 10px; font-size:12.5px; margin-bottom:8px; }
.a2-cat-tolte-hd b{ font-size:11px; font-weight:650; letter-spacing:.06em; text-transform:uppercase; color:var(--a2-t3); }
.a2-cat-tolte-l{ display:flex; flex-wrap:wrap; gap:8px; }
.a2-cat-tolta{ display:inline-flex; align-items:center; gap:8px; padding:4px 10px 4px 4px; border:1px solid var(--a2-line); border-radius:var(--a2-r2); background:var(--a2-surface); font-size:12.5px; max-width:100%; }
.a2-cat-tolta .a2-cat-mini{ width:44px; padding:3px; flex:none; filter:grayscale(1); opacity:.7; }
.a2-cat-tolta-t{ display:flex; flex-direction:column; min-width:0; }
.a2-cat-tolta-t b{ font-weight:600; color:var(--a2-t2); overflow-wrap:anywhere; }
.a2-cat-tolta-t span{ font-size:11px; color:var(--a2-t3); }
.a2-cat-agg{ margin-top:18px; display:flex; flex-direction:column; align-items:stretch; gap:10px; width:100%; max-width:none; box-sizing:border-box; padding:14px 16px; }
.a2-cat-agg > b{ margin:0; }
.a2-cat-agg-g{ display:grid; grid-template-columns:minmax(0, 1fr) auto; gap:10px 16px; align-items:end; }
.a2-cat-agg-g label.a2-label{ display:block; margin-bottom:4px; }
.a2-cat-agg textarea{ width:100%; box-sizing:border-box; font-size:13px; min-height:56px; }
.a2-cat-agg-opz{ display:flex; flex-wrap:wrap; gap:10px 16px; align-items:flex-end; }
.a2-cat-agg-opz .a2-sel{ height:32px; min-width:130px; }
.a2-cat-agg-ft{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px; }
.a2-cat-agg .a2-hint{ max-width:none; }
.a2-cat-agg .a2-rc-griglia:empty{ display:none; }
.a2-cat-scarto{ display:flex; align-items:flex-start; gap:6px; margin:0; font-size:12.5px; line-height:1.5; color:var(--a2-t2); background:var(--a2-obs-25); box-shadow:inset 0 0 0 1px var(--a2-obs-100); border-radius:6px; padding:8px 10px; }
.a2-cat-ft{ display:flex; flex-wrap:wrap; align-items:center; gap:10px 12px; }
.a2-cat-ft .a2-cat-conta{ margin-right:auto; }
.a2-cat-prop .a2-cat-pagine{ grid-column:1 / -1; }
@media (max-width:640px){
  .a2-cat-agg-g{ grid-template-columns:minmax(0,1fr); }
}

/* ===== Profili › Provider IA: la scheda ElevenLabs e le voci del profilo (mockup 25 «a») ===== */
.a2-voci{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px; max-width:760px; }
/* Una scelta fra poche opzioni con una riga di spiegazione (Provider IA: la musica dei reel, mockup 46). */
/* L'archivio dei suoni dell'applicazione (Pages/Suoni, mockup 46 tavola 4). */
.a2-suoni{ display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); gap:16px; align-items:start; }
.a2-suoni-filtri{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-bottom:12px; }
.a2-suoni-filtri .a2-input{ max-width:240px; }
.a2-suoni-griglia{ display:grid; grid-template-columns:repeat(auto-fill, minmax(190px,1fr)); gap:10px; }
.a2-suono{ display:grid; grid-template-columns:34px minmax(0,1fr); gap:10px; align-items:start; padding:10px; border-radius:10px; box-shadow:inset 0 0 0 1px var(--a2-line); background:var(--a2-surface); }
.a2-suono > button{ width:34px; height:34px; border-radius:50%; border:0; background:var(--a2-acc-50); color:var(--a2-acc); display:grid; place-items:center; cursor:pointer; }
.a2-suono > button[aria-pressed="true"]{ background:var(--a2-acc); color:#fff; }
.a2-suono b{ font-size:13px; font-weight:600; display:block; }
.a2-suono small{ font-size:11.5px; color:var(--a2-t3); }
.a2-suono-gestisci{ margin-top:6px; font-size:12px; }
.a2-suono-gestisci summary{ cursor:pointer; color:var(--a2-t2); }
.a2-suono-gestisci form{ display:flex; flex-wrap:wrap; gap:6px; margin-top:6px; }
.a2-suono-gestisci .a2-input, .a2-suono-gestisci .a2-sel{ width:100%; }
.a2-suoni-gen{ display:flex; flex-direction:column; gap:10px; }
.a2-suoni-gen label{ display:flex; flex-direction:column; gap:5px; font-size:12.5px; color:var(--a2-t2); }
.a2-suoni-v{ font-family:var(--a2-f-mono); font-size:13px; color:var(--a2-t1); }
.a2-suoni-costo{ font-family:var(--a2-f-mono); font-size:12.5px; background:var(--a2-sunken); border-radius:8px; padding:8px 10px; color:var(--a2-t1); }
@media (max-width:980px){ .a2-suoni{ grid-template-columns:1fr; } }

.a2-opz{ display:flex; flex-direction:column; gap:8px; }
.a2-opz label{ display:grid; grid-template-columns:18px minmax(0,1fr); gap:8px; padding:10px 12px; border-radius:10px; box-shadow:inset 0 0 0 1px var(--a2-line); cursor:pointer; font-size:13px; line-height:1.45; }
.a2-opz label:has(input:checked){ box-shadow:inset 0 0 0 1.5px var(--a2-acc); background:var(--a2-acc-50); }
.a2-opz small{ display:block; color:var(--a2-t3); font-size:12px; }
.a2-voci-voce{ display:grid; grid-template-columns:22px minmax(130px,180px) minmax(170px,1fr) auto; gap:8px; align-items:center; padding:7px 8px 7px 9px; border:1px solid var(--a2-line); border-radius:8px; background:var(--a2-surface); }
.a2-voci-pred{ border-color:var(--a2-acc-100); background:var(--a2-acc-50); }
.a2-voci-voce .a2-input, .a2-voci-voce .a2-sel{ width:100%; box-sizing:border-box; }
.a2-voci-az{ display:flex; align-items:center; gap:4px; flex-wrap:wrap; }
.a2-voci-az .a2-btn-sm{ padding-left:7px; padding-right:7px; }
.a2-voci-sotto{ grid-column:2 / -1; display:flex; flex-wrap:wrap; align-items:center; gap:4px 10px; font-size:11.5px; color:var(--a2-t3); }
.a2-voci-sotto:empty{ display:none; }
.a2-voci-sotto .a2-tag{ font-size:11px; }
.a2-voci-manca{ display:inline-flex; align-items:center; gap:4px; color:var(--a2-obs-700); font-weight:600; }
.a2-voci-manca .a2-ico{ width:13px; height:13px; }
.a2-voci-ft{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; margin-top:8px; font-size:12.5px; color:var(--a2-t3); }
.a2-voci-salva{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; margin-top:10px; }
button.a2-voci-lnk{ background:none; border:0; padding:0; font:inherit; cursor:pointer; }
.a2-voci-riga{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; margin-top:6px; }
.a2-voci-esito{ font-size:12.5px; color:var(--a2-t3); }
.a2-voci-vuoto{ margin:6px 0 0; }
@media (max-width:900px){
  .a2-voci-voce{ grid-template-columns:22px minmax(0,1fr); }
  .a2-voci-voce > :nth-child(3), .a2-voci-az{ grid-column:2; }
}

/* ===== La voce del reel: la proposta (mockup 27) e la vista del reel (mockup 25 «c» e «d») ===== */
.a2-rp-voce{ display:inline-flex; align-items:center; gap:6px; font-size:12px; color:var(--a2-t3); margin-top:4px; }
.a2-rp-bat{ display:flex; flex-direction:column; gap:3px; margin:6px 0; }
.a2-rp-bat .a2-rp-campo > span{ display:inline-flex; align-items:center; gap:4px; }
.a2-rp-bat-off{ opacity:.6; }
.a2-rv-voce{ display:flex; flex-wrap:wrap; align-items:center; gap:6px 12px; margin:0 0 10px; }
.a2-rv-voce-k{ display:inline-flex; align-items:center; gap:6px; font-weight:600; font-size:12.5px; color:var(--a2-t1); }
.a2-rv-voce-no{ margin:0 0 10px; }
.a2-rv-bat{ display:flex; flex-direction:column; gap:3px; margin-top:10px; }
.a2-rv-bat-da{ color:var(--a2-obs-700); font-weight:600; }

/* ---------- Il video parlato nella proposta del reel (mockup 30, classi m30-* portate) ---------- */
.a2-parlato-scelta{ grid-column:1 / -1; }
.a2-parlato-riga2{ display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); gap:10px 18px; align-items:start; margin-top:6px; }
.a2-parlato-col{ display:flex; flex-direction:column; gap:7px; min-width:0; }
.a2-parlato-media{ display:flex; flex-wrap:wrap; gap:12px; align-items:center; border:1px solid var(--a2-line); border-radius:8px; padding:8px 10px; background:var(--a2-surface); min-width:0; }
.a2-parlato-mini{ width:96px; aspect-ratio:16/9; object-fit:cover; border-radius:5px; background:#090E20; box-shadow:0 0 0 1px var(--a2-line); flex:none; }
.a2-parlato-media-c{ flex:1 1 220px; min-width:0; display:flex; flex-direction:column; gap:3px; font-size:12.5px; }
.a2-parlato-media-c b{ font-size:13px; color:var(--a2-t1); }
.a2-parlato-media-m{ display:flex; flex-wrap:wrap; gap:4px 8px; align-items:center; color:var(--a2-t3); font-size:12px; font-variant-numeric:tabular-nums; }
.a2-parlato-ok{ display:inline-flex; align-items:center; gap:4px; font-size:11px; font-weight:600; color:#1B6E3A; background:#E3F4E8; border-radius:999px; padding:1px 8px 1px 6px; white-space:nowrap; }
.a2-parlato-ok .a2-ico{ width:11px; height:11px; }
.a2-parlato-media-alt{ margin-left:auto; flex:none; }
.a2-parlato-modo{ display:flex; flex-direction:column; gap:4px; font-size:12.5px; }
.a2-parlato-modo p{ margin:0; color:var(--a2-t2); line-height:1.45; }
.a2-parlato-modo p b{ color:var(--a2-t1); font-weight:600; }
.a2-parlato-modo p.a2-parlato-modo-off, .a2-parlato-modo p.a2-parlato-modo-off b{ color:var(--a2-t3); font-weight:500; }
.a2-parlato-fonte{ display:flex; flex-wrap:wrap; align-items:center; gap:6px 12px; }
.a2-parlato-fonte-k{ font-size:10.5px; font-weight:650; letter-spacing:.05em; text-transform:uppercase; color:var(--a2-t3); min-width:62px; }
.a2-parlato-durata{ display:inline-flex; align-items:center; gap:6px; font-weight:600; color:var(--a2-t1); font-variant-numeric:tabular-nums; }
.a2-parlato-durata .a2-ico{ width:14px; height:14px; color:var(--a2-t3); }
.a2-parlato-chip{ display:inline-flex; align-items:center; gap:4px; font-size:11px; font-weight:600; border-radius:999px; padding:1px 8px 1px 6px; white-space:nowrap; background:#DFF0F3; color:#0E6F80; }
.a2-parlato-chip .a2-ico, .a2-parlato-muta .a2-ico{ width:12px; height:12px; }
.a2-parlato-muta{ display:inline-flex; align-items:center; gap:4px; font-size:11px; font-weight:600; border-radius:999px; padding:1px 8px 1px 6px; white-space:nowrap; background:var(--a2-sunken); color:var(--a2-t2); box-shadow:inset 0 0 0 1px var(--a2-line); }
.a2-parlato-tempo{ font-variant-numeric:tabular-nums; color:var(--a2-t3); font-size:12px; }
.a2-parlato-tl{ display:flex; flex-direction:column; gap:4px; margin:0 0 10px; }
.a2-parlato-tl-bar{ display:flex; gap:2px; height:34px; border-radius:7px; overflow:hidden; background:var(--a2-sunken); box-shadow:0 0 0 1px var(--a2-line); }
.a2-parlato-tl-seg{ all:unset; box-sizing:border-box; min-width:0; display:flex; align-items:center; justify-content:center; gap:4px; font-size:11px; font-weight:650; cursor:pointer; overflow:hidden; white-space:nowrap; padding:0 4px; }
.a2-parlato-tl-seg .a2-ico{ width:13px; height:13px; flex:none; }
.a2-parlato-tl-seg:focus-visible{ outline:2px solid var(--a2-acc); outline-offset:-2px; }
.a2-parlato-tl-tg{ background:#0E6F80; color:#fff; }
.a2-parlato-tl-sl{ background:#DCE8F4; color:#0C5F9E; }
.a2-parlato-tl-ora{ box-shadow:inset 0 0 0 2px #F3D46B; }
.a2-parlato-tl-sc{ display:flex; justify-content:space-between; font-size:11px; color:var(--a2-t3); font-variant-numeric:tabular-nums; font-family:var(--a2-f-mono); }
.a2-parlato-tl-leg{ display:flex; flex-wrap:wrap; gap:4px 14px; font-size:11.5px; color:var(--a2-t3); }
.a2-parlato-tl-leg span{ display:inline-flex; align-items:center; gap:5px; }
.a2-parlato-tl-leg i{ width:10px; height:10px; border-radius:3px; display:inline-block; }
.a2-rp-sl.a2-parlato-tg{ border-color:#bfe0e5; background:#fbfeff; }
.a2-parlato-detto{ display:flex; flex-direction:column; gap:4px; }
.a2-parlato-k{ font-size:10.5px; font-weight:650; letter-spacing:.05em; text-transform:uppercase; color:var(--a2-t3); display:flex; align-items:center; gap:5px; }
.a2-parlato-k .a2-ico{ width:13px; height:13px; }
.a2-parlato-frasi{ margin:0; padding:7px 10px; border-radius:6px; background:var(--a2-sunken); font-size:13px; line-height:1.6; color:var(--a2-t1); }
.a2-parlato-fuori{ color:var(--a2-t3); }
.a2-parlato-fine{ display:inline-block; font:600 10.5px/1 var(--a2-f-mono); color:#0E6F80; background:#DFF0F3; border-radius:4px; padding:2px 5px; margin:0 4px; vertical-align:1px; }
.a2-parlato-fine-bordo{ background:#0E6F80; color:#fff; }
.a2-parlato-sposta{ display:flex; flex-wrap:wrap; align-items:center; gap:6px 14px; font-size:12px; color:var(--a2-t3); }
.a2-parlato-sposta-g{ display:inline-flex; align-items:center; gap:4px; }
.a2-parlato-sposta-g > span{ font-weight:600; color:var(--a2-t2); margin-right:2px; }
.a2-parlato-sposta .a2-btn-sm{ padding-left:5px; padding-right:5px; }
.a2-parlato-inq{ display:inline-flex; align-items:center; gap:5px; }
.a2-parlato-agg{ border:1.5px dashed var(--a2-line-str); border-radius:10px; padding:10px 12px; display:flex; flex-direction:column; gap:8px; background:var(--a2-surface); margin:10px 0 0; }
.a2-parlato-agg-hd{ display:flex; flex-wrap:wrap; align-items:center; gap:6px 12px; font-size:13px; }
.a2-parlato-pass{ padding:0; }
.a2-parlato-pass .a2-med-pas{ grid-template-columns:22px minmax(0,1fr) auto; }
.a2-parlato-agg-t{ font-size:13px; color:var(--a2-t1); min-width:0; }
.a2-parlato-agg-t small{ display:block; color:var(--a2-t3); font-size:12px; line-height:1.4; }
.a2-parlato-usato{ font-size:11px; color:var(--a2-t3); white-space:nowrap; }
@media (max-width:1180px){ .a2-parlato-riga2{ grid-template-columns:minmax(0,1fr); } }
@media (max-width:640px){
  .a2-parlato-media-alt{ margin-left:0; }
  .a2-parlato-tl-seg span{ display:none; }
}
/* ---------- Il sovrapposto e l'inquadratura (mockup 30, scene 3 e 4) ---------- */
.a2-parlato-corsie{ display:flex; flex-direction:column; gap:3px; }
.a2-parlato-corsia{ position:relative; height:30px; border-radius:6px; background:var(--a2-sunken); box-shadow:0 0 0 1px var(--a2-line); overflow:hidden; }
.a2-parlato-corsia .a2-parlato-tl-seg{ position:absolute; top:0; bottom:0; }
.a2-parlato-tl-ov{ background:#E3DAF5; color:#4b3a8c; border-left:2px solid #fff; border-right:2px solid #fff; }
.a2-parlato-corsia-k{ font-size:10.5px; font-weight:650; letter-spacing:.05em; text-transform:uppercase; color:var(--a2-t3); }
.a2-parlato-sopra{ display:inline-flex; align-items:center; gap:4px; font-size:11px; font-weight:600; border-radius:999px; padding:1px 8px 1px 6px; white-space:nowrap; background:#EDE7F8; color:#4b3a8c; }
.a2-parlato-sopra .a2-ico{ width:12px; height:12px; }
.a2-parlato-sopra-m{ display:grid; place-items:center; color:#4b3a8c; background:#EDE7F8; }
.a2-parlato-video .a2-rp-sl-c{ grid-column:1 / -1; }
.a2-parlato-inq-pan{ border:1px solid var(--a2-line); border-radius:10px; padding:12px 14px; background:var(--a2-surface); display:flex; flex-direction:column; gap:12px; margin:10px 0 0; }
.a2-parlato-inq-hd{ display:flex; flex-wrap:wrap; align-items:center; gap:6px 12px; font-size:13px; }
.a2-parlato-inq-hd b{ color:var(--a2-t1); }
.a2-parlato-inq-x{ margin-left:auto; }
.a2-parlato-inq-grid{ display:grid; grid-template-columns:minmax(0,1.6fr) minmax(0,1fr); gap:20px; align-items:start; }
.a2-parlato-inq-box{ display:flex; flex-direction:column; gap:8px; min-width:0; }
.a2-parlato-inq-az, .a2-parlato-inq-ft{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.a2-parlato-orig{ position:relative; display:block; width:100%; overflow:hidden; border-radius:6px; background:#090E20; box-shadow:0 0 0 1px var(--a2-line); touch-action:none; cursor:grab; }
.a2-parlato-orig video{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; pointer-events:none; }
.a2-parlato-win{ position:absolute; top:0; bottom:0; box-shadow:0 0 0 2000px rgba(9,14,32,.55); outline:2px solid #F3D46B; outline-offset:-2px; pointer-events:none; }
.a2-parlato-win span{ position:absolute; left:50%; bottom:6px; transform:translateX(-50%); font:600 11px/1 var(--a2-f-sans, sans-serif); background:#F3D46B; color:#1d2230; border-radius:99px; padding:3px 8px; white-space:nowrap; }
.a2-parlato-ia{ position:absolute; top:4%; bottom:4%; border:1.5px dashed #fff; border-radius:4px; pointer-events:none; }
.a2-parlato-ia span{ position:absolute; left:4px; top:4px; font:600 10.5px/1.2 var(--a2-f-sans, sans-serif); color:#1d2230; background:#fff; border-radius:99px; padding:2px 7px 2px 5px; display:inline-flex; align-items:center; gap:3px; white-space:nowrap; }
.a2-parlato-ia .a2-ico{ width:11px; height:11px; }
.a2-parlato-ant{ width:150px; height:auto; aspect-ratio:9 / 16; border-radius:9px; box-shadow:0 0 0 1px var(--a2-line), 0 2px 6px rgba(16,24,40,.16); background:#090E20; }
@media (max-width:1180px){ .a2-parlato-inq-grid{ grid-template-columns:minmax(0,1fr); } }
/* ---------- Il video parlato nel reel prodotto (mockup 30, scena 5) ---------- */
.a2-parlato-rv{ flex-wrap:wrap; }
.a2-parlato-tagli{ list-style:none; margin:0 0 12px; padding:0; display:flex; flex-direction:column; gap:8px; }
.a2-parlato-taglio{ border:1px solid #bfe0e5; background:#fbfeff; border-radius:8px; padding:8px 10px; display:flex; flex-direction:column; gap:6px; }
.a2-parlato-corr{ background:#EDE7F8; color:#4b3a8c; border-radius:3px; padding:0 3px; font-weight:600; }
.a2-parlato-corr-k{ font-size:11px; color:#4b3a8c; margin:0 4px; }

/* La riga della raccolta in Esegui (mockup 52, tavole 1 e 2, .mk-avv-racc): gialla se ci sono domande ancora aperte o la scheda e' vuota, verde se la raccolta e' completa. */
.a2-raccolta{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; border:1px solid #f0d995; background:#fffbea; border-radius:10px; padding:10px 12px; font-size:13.5px; color:#5b4a10; margin:12px 0 4px; }
.a2-raccolta > span{ flex:1; min-width:220px; }
.a2-raccolta > .a2-ico{ width:16px; height:16px; flex:none; }
.a2-raccolta-ok{ border-color:#bfe6d0; background:#f2fbf6; color:#1c5a3a; }

/* La proposta per un fatto di setup in Esegui (mockup 52, tavole 1 e 2): la bozza da ritoccare, o le alternative da spuntare. */
.a2-fatto-prop{ margin-top:16px; padding-top:14px; border-top:1px solid var(--a2-line); }
.a2-fatto-prop[hidden]{ display:none; }
.a2-fatto-prop-hd{ font-size:14px; font-weight:600; color:var(--a2-t1); margin-bottom:10px; }
.a2-fatto-prop-hd .a2-hint{ font-weight:400; margin-left:6px; }
.a2-fatto-prop .a2-area{ width:100%; min-height:230px; font-size:14px; line-height:1.6; }
.a2-fatto-prop-ritoccata{ font-size:12px; color:var(--a2-obs-700); margin:6px 0 0; }
.a2-fatto-prop-ritoccata[hidden]{ display:none; }
.a2-fatto-prop-oggi{ background:var(--a2-sunken); border:1px solid var(--a2-line); border-radius:8px; padding:10px 12px; font-size:13px; color:var(--a2-t2); margin-bottom:12px; }
.a2-fatto-prop-oggi-t{ display:block; font-size:11.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--a2-t3); margin-bottom:4px; }
.a2-fatto-prop-oggi .a2-md{ font-size:13px; }
.a2-fatto-prop-alt{ display:grid; grid-template-columns:22px minmax(0,1fr); gap:10px; align-items:start; border:1px solid var(--a2-line); border-radius:9px; padding:10px 12px; margin-bottom:8px; background:var(--a2-surface); transition:border-color .12s, background .12s; }
.a2-fatto-prop-alt.on{ border-color:var(--a2-acc); background:var(--a2-acc-50); }
.a2-fatto-prop-alt .a2-chk{ margin-top:3px; }
.a2-fatto-prop-n{ font-size:11.5px; color:var(--a2-t3); margin-bottom:2px; }
.a2-fatto-prop-x{ font-size:14px; line-height:1.5; color:var(--a2-t1); outline:none; border-radius:4px; }
.a2-fatto-prop-x:focus{ background:var(--a2-surface); box-shadow:0 0 0 2px var(--a2-acc-100); }
.a2-fatto-prop-w{ font-size:12.5px; color:var(--a2-t2); margin-top:3px; }
.a2-fatto-prop-piede{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:12px; padding-top:12px; border-top:1px solid var(--a2-line); }
.a2-fatto-prop-conta{ font-size:13px; color:var(--a2-t2); margin-right:auto; }
.a2-fatto-prop-modo{ display:inline-flex; border:1px solid var(--a2-line-str); border-radius:8px; overflow:hidden; }
.a2-fatto-prop-modo label{ display:flex; align-items:center; gap:6px; padding:5px 10px; font-size:13px; cursor:pointer; }
.a2-fatto-prop-modo label+label{ border-left:1px solid var(--a2-line-str); }
.a2-fatto-prop-modo .a2-chk{ margin:0; }

/* ---------- La verifica dei fatti in Esegui (mockup 32, scena 7) ---------- */
:root{ --ver-ok:#2F7D4F; --ver-ok-50:#EAF5EE; --ver-ok-100:#C9E6D3; --ver-val:#5B6B8C; --ver-val-50:#EEF1F7; --ver-val-100:#D5DCEA; --ver-contr:#B45309; --ver-contr-50:#FFF4E5; --ver-no:#B42318; --ver-no-50:#FDECEA; --ver-ip:#6B5CA5; --ver-ip-50:#F3F0FA; --ver-ip-100:#D9D2EE; }
.a2-verifica-azioni{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:12px; }
.a2-verifica-azioni [hidden]{ display:none; }
.a2-verifica{ display:flex; flex-direction:column; gap:12px; margin-top:12px; }
.a2-verifica[hidden]{ display:none; }
.a2-verifica-conti{ display:grid; grid-template-columns:repeat(auto-fit, minmax(110px,1fr)); gap:8px; }
.a2-verifica-conto{ border-radius:10px; padding:9px 11px; font-size:12px; line-height:1.35; }
.a2-verifica-conto b{ display:block; font-size:22px; font-weight:650; letter-spacing:-.02em; }
.a2-verifica-conto.fonte{ background:var(--ver-ok-50); color:var(--ver-ok); }
.a2-verifica-conto.valorizzazione{ background:var(--ver-val-50); color:var(--ver-val); }
.a2-verifica-conto.contrasto{ background:var(--ver-contr-50); color:var(--ver-contr); }
.a2-verifica-conto.non_fornito{ background:var(--ver-no-50); color:var(--ver-no); }
.a2-verifica-conto.ipotesi{ background:var(--ver-ip-50); color:var(--ver-ip); }
.a2-verifica-box{ border:1px solid var(--a2-line); border-radius:10px; background:var(--a2-surface); padding:12px 13px; font-size:12.5px; color:var(--a2-t2); line-height:1.5; }
.a2-verifica-box p{ margin:0; }
.a2-verifica-box:empty{ display:none; }
.a2-verifica-lab{ font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--a2-t3); }
.a2-verifica-az{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-top:10px; }
.a2-verifica-riga{ display:flex; flex-direction:column; gap:6px; margin-top:10px; }
.a2-verifica-riga textarea{ width:100%; resize:vertical; }
.a2-verifica-a{ border-radius:3px; padding:1px 1px; cursor:pointer; box-decoration-break:clone; -webkit-box-decoration-break:clone; }
.a2-verifica-a.fonte{ background:var(--ver-ok-50); box-shadow:inset 0 -2px 0 var(--ver-ok-100); }
.a2-verifica-a.valorizzazione{ background:var(--ver-val-50); box-shadow:inset 0 -2px 0 var(--ver-val-100); }
.a2-verifica-a.contrasto{ background:#FFE7C2; box-shadow:inset 0 -2px 0 var(--ver-contr); }
.a2-verifica-a.non_fornito{ background:#FBD9D5; box-shadow:inset 0 -2px 0 var(--ver-no); }
/* Un'ipotesi su mercato o clienti: segnata, ma piano; non blocca. */
.a2-verifica-a.ipotesi{ background:var(--ver-ip-50); box-shadow:inset 0 -2px 0 var(--ver-ip-100); }
.a2-verifica-a.sel{ outline:2px solid var(--a2-t1); outline-offset:1px; }
.a2-verifica-a:focus-visible{ outline:2px solid var(--a2-acc); outline-offset:1px; }
.a2-verifica-azioni[hidden],.a2-verifica-conti[hidden],.a2-verifica-box[hidden]{ display:none; }
.a2-verifica-conti-resto{ grid-column:1 / -1; font-size:12.5px; line-height:1.7; color:var(--a2-t2); }
.a2-verifica-box q{ display:block; margin:3px 0 8px; color:var(--a2-t1); font-style:italic; }
.a2-verifica-box .a2-verifica-lab{ display:flex; align-items:center; gap:5px; }
.a2-verifica-box .a2-verifica-lab + p{ margin-top:4px; }
.a2-verifica-box p + .a2-verifica-lab{ margin-top:8px; }
.a2-verifica-elenco{ margin:6px 0 0; padding-left:18px; font-size:13px; color:var(--a2-t1); line-height:1.6; }
.a2-verifica-elenco li + li{ margin-top:3px; }
@media (max-width:720px){ .a2-verifica-conti{ grid-template-columns:repeat(2, minmax(0,1fr)); } }

/* ---------- La scheda delle domande per il cliente (mockup 32, scena 4) ---------- */
.a2-dq{ display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:16px; align-items:start; }
.a2-dq-pannello{ display:flex; flex-direction:column; gap:12px; }
.a2-dq-gruppo{ margin-bottom:14px; }
.a2-dq-gruppo-hd{ font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--a2-t3); margin:0 0 6px; }
.a2-dq-q{ border:1px solid var(--a2-line); border-radius:10px; background:var(--a2-surface); padding:10px 12px; margin-bottom:8px; scroll-margin-top:80px; }
.a2-dq-q:target{ box-shadow:0 0 0 2px var(--a2-acc); }
.a2-dq-q-hd{ display:grid; grid-template-columns:22px minmax(0,1fr) auto; gap:8px; align-items:start; }
.a2-dq-qn{ display:inline-grid; place-items:center; min-width:20px; height:20px; padding:0 4px; box-sizing:border-box; border-radius:999px; background:var(--a2-sunken); box-shadow:inset 0 0 0 1px var(--a2-line); color:var(--a2-t1); font-size:11px; font-weight:700; flex:none; }
.a2-dq-q-t{ font-size:13.5px; color:var(--a2-t1); font-weight:550; line-height:1.4; }
.a2-dq-s{ font-size:11px; font-weight:600; border-radius:999px; padding:2px 8px; white-space:nowrap; }
.a2-dq-s-aperta{ background:var(--a2-sunken); color:var(--a2-t2); box-shadow:inset 0 0 0 1px var(--a2-line); }
.a2-dq-s-risposta{ background:var(--ver-ok-50); color:var(--ver-ok); }
.a2-dq-s-nonapp{ background:var(--ver-val-50); color:var(--ver-val); }
.a2-dq-s-proposta, .a2-dq-s-chiarire{ background:var(--a2-obs-50); color:var(--a2-obs-700); }
.a2-dq-s-mancante{ background:var(--ver-no-50); color:var(--ver-no); }
.a2-dq-q .a2-area{ width:100%; box-sizing:border-box; min-height:38px; margin-top:8px; }
.a2-dq-q-ft{ display:flex; flex-wrap:wrap; gap:6px; margin:7px 0 0 30px; }
.a2-dq-q-ft form{ display:contents; }
.a2-dq-q form > .a2-dq-q-ft{ margin-left:0; }
.a2-dq-q-r{ display:flex; flex-direction:column; gap:2px; margin:7px 0 0 30px; font-size:13px; color:var(--a2-t1); }
.a2-dq-cit{ font-style:italic; color:var(--a2-t1); }
.a2-dq-q-risposta{ border-color:var(--ver-ok-100); }
.a2-dq-q-nonapp{ border-color:var(--ver-val-100); }
.a2-dq-q-proposta{ border-color:var(--a2-obs-100); background:var(--a2-obs-25); }
.a2-dq-box{ border:1px solid var(--a2-line); border-radius:10px; background:var(--a2-surface); padding:12px 13px; font-size:12.5px; color:var(--a2-t2); line-height:1.5; }
.a2-dq-box p{ margin:0; }
.a2-dq-box ul{ margin:4px 0 0; padding-left:16px; list-style:disc; }
.a2-dq-box li{ display:list-item; }
.a2-dq-box-hd{ display:flex; align-items:center; gap:7px; font-weight:600; color:var(--a2-t1); font-size:13px; margin-bottom:6px; }
.a2-dq-box-hd .a2-ico{ width:16px; height:16px; }
.a2-dq-box-az{ display:flex; flex-wrap:wrap; gap:6px; margin-top:9px; }
.a2-dq-quadro{ list-style:none; margin:4px 0 0; padding:0; display:flex; flex-direction:column; gap:6px; }
.a2-dq-quadro li{ display:grid; grid-template-columns:minmax(0,1fr) 70px auto; gap:8px; align-items:center; font-size:12.5px; color:var(--a2-t1); }
.a2-dq-barra{ height:6px; border-radius:999px; background:var(--a2-sunken); box-shadow:inset 0 0 0 1px var(--a2-line); overflow:hidden; }
.a2-dq-barra i{ display:block; height:100%; background:var(--ver-ok); border-radius:999px; }
.a2-dq-righe{ list-style:none; margin:0; padding:0; }
.a2-dq-righe li{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px; padding:6px 2px; border-bottom:1px solid var(--a2-line); font-size:12.5px; color:var(--a2-t1); line-height:1.45; }
.a2-dq-righe li:last-child{ border-bottom:0; }
.a2-dq-righe li.nuova{ background:var(--ver-ok-50); border-radius:6px; padding-left:6px; }
.a2-dq-orig{ font-size:11px; color:var(--a2-t3); white-space:nowrap; }
.a2-dq-righe li.nuova .a2-dq-orig{ color:var(--ver-ok); }
.a2-dq-apri{ display:inline-block; margin-top:8px; font-size:12.5px; }
.a2-dq-proponi{ display:inline-flex; flex-wrap:wrap; align-items:center; gap:8px; }
@media (max-width:1100px){ .a2-dq{ grid-template-columns:minmax(0,1fr); } }
/* ---------- La declinazione e le foto del piano (mockup 31) ---------- */
.a2-soc-conti{ display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:600; color:var(--a2-t1); background:var(--a2-sunken); box-shadow:inset 0 0 0 1px var(--a2-line); border-radius:999px; padding:3px 10px; white-space:nowrap; }
.a2-soc-conti .a2-ico{ width:13px; height:13px; color:var(--a2-t3); }
.a2-soc-zero{ display:inline-flex; align-items:center; gap:6px; font-size:12.5px; color:var(--a2-acc-h); }
.a2-soc-zero .a2-ico{ width:14px; height:14px; }
.a2-soc-ia-n{ font-family:var(--a2-f-mono); font-size:11.5px; color:var(--a2-t3); white-space:nowrap; }
.a2-soc-cmbs{ display:grid; grid-template-columns:repeat(auto-fill, minmax(250px, 1fr)); gap:10px; }
.a2-soc-cmb{ display:flex; flex-direction:column; gap:8px; min-width:0; padding:10px 12px 11px; border-radius:var(--a2-r2); background:var(--a2-sunken); box-shadow:inset 0 0 0 1px var(--a2-line); font-size:12.5px; }
.a2-soc-cmb-tuo{ box-shadow:inset 0 0 0 1px var(--a2-acc-100), inset 3px 0 0 var(--a2-acc); }
.a2-soc-cmb-hd{ display:flex; align-items:center; gap:6px; min-width:0; }
.a2-soc-cmb-hd .a2-soc-fmt{ flex:none; }
.a2-soc-px{ font-family:var(--a2-f-mono); font-size:11px; color:var(--a2-t3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; }
.a2-soc-x{ margin-left:auto; flex:none; display:inline-grid; place-items:center; width:24px; height:24px; border:0; border-radius:6px; background:transparent; color:var(--a2-t3); cursor:pointer; }
.a2-soc-x:hover{ background:var(--a2-surface); color:var(--a2-err-700); }
.a2-soc-x .a2-ico{ width:14px; height:14px; }
/* «Cambia» su un post della declinazione: apre la finestra del selettore al posto dell'aggiunta. */
.a2-soc-cambia{ margin-left:auto; flex:none; font:inherit; font-size:12px; font-weight:550; color:var(--a2-acc); background:transparent; border:0; border-radius:6px; padding:3px 7px; cursor:pointer; }
.a2-soc-cambia:hover{ background:var(--a2-surface); color:var(--a2-acc-h); }
.a2-soc-cambia:disabled{ color:var(--a2-t-off); cursor:default; background:transparent; }
.a2-soc-cambia + .a2-soc-x{ margin-left:0; }
.a2-soc-cmb-t{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.a2-soc-cmb-t .a2-sel{ width:100%; max-width:100%; background-color:var(--a2-surface); }
.a2-soc-sit-citata{ background:var(--a2-acc-100) !important; color:var(--a2-acc-h) !important; box-shadow:inset 0 0 0 1px var(--a2-acc) !important; font-weight:600; }
.a2-soc-senza-adatto{ display:inline-flex; align-items:flex-start; gap:5px; font-size:11.5px; line-height:1.4; color:var(--a2-obs-700); background:var(--a2-obs-100); border-radius:6px; padding:3px 8px; width:fit-content; max-width:100%; box-sizing:border-box; }
.a2-soc-senza-adatto .a2-ico{ width:13px; height:13px; flex:none; margin-top:1px; }
.a2-soc-cmb-p{ margin:0; color:var(--a2-t2); line-height:1.45; overflow-wrap:anywhere; }
.a2-soc-cmb-p:empty{ display:none; }
.a2-soc-var{ display:flex; flex-wrap:wrap; align-items:center; gap:4px 8px; font-size:11.5px; color:var(--a2-t2); }
.a2-soc-var-n{ color:var(--a2-t3); }
.a2-soc-agg-r{ display:flex; flex-wrap:wrap; align-items:center; gap:6px 12px; margin-top:10px; }
.a2-soc-agg-r .a2-soc-ia-agg{ margin-top:0; }
.a2-soc-pk{ margin-top:10px; padding:12px; border-radius:var(--a2-r2); background:var(--a2-surface); box-shadow:inset 0 0 0 1px var(--a2-line-str); display:flex; flex-direction:column; gap:12px; }
.a2-soc-pk[hidden], .a2-soc-pk-passo[hidden], .a2-soc-fc-pan[hidden]{ display:none; }
.a2-soc-pk-dlg{ width:min(860px, calc(100vw - 32px)); }
.a2-soc-pk-dlg .a2-dialogo-sub{ line-height:1.45; }
.a2-soc-pk-dlg .a2-soc-pk{ margin:0; padding:16px 18px; border-radius:0; box-shadow:none; }
.a2-soc-pk-passo{ display:flex; flex-direction:column; gap:8px; min-width:0; }
.a2-soc-pk-g{ display:flex; flex-wrap:wrap; align-items:center; gap:6px; }
.a2-soc-pk-tipo{ width:74px; flex:none; font-size:11px; font-weight:650; letter-spacing:.05em; text-transform:uppercase; color:var(--a2-t3); }
.a2-soc-chip{ font:inherit; font-size:12px; color:var(--a2-t2); background:var(--a2-surface); border:1px solid var(--a2-line); border-radius:999px; padding:3px 10px 3px 8px; cursor:pointer; display:inline-flex; gap:6px; align-items:center; max-width:100%; }
.a2-soc-chip .a2-ico{ width:13px; height:13px; flex:none; }
.a2-soc-chip i{ font-style:normal; font-family:var(--a2-f-mono); font-size:10.5px; color:var(--a2-t3); min-width:0; overflow-wrap:anywhere; }
/* Un'etichetta lunga va a capo dentro il suo bordo invece di uscirne. */
.a2-soc-chip{ flex-wrap:wrap; text-align:left; line-height:1.35; }
.a2-soc-chip[aria-pressed="true"]{ background:var(--a2-t1); border-color:var(--a2-t1); color:#fff; }
.a2-soc-chip[aria-pressed="true"] i{ color:#cfd5e2; }
.a2-soc-chip-off{ cursor:default; color:var(--a2-t-off); background:var(--a2-sunken); border-style:dashed; flex-wrap:wrap; }
.a2-soc-chip-off .a2-lnk{ font-size:11.5px; }
.a2-soc-pk-tpls{ display:grid; grid-template-columns:repeat(auto-fill, minmax(230px, 1fr)); gap:8px; }
.a2-soc-pk-tpl{ display:flex; flex-direction:column; gap:6px; padding:10px; border-radius:var(--a2-r2); background:var(--a2-sunken); box-shadow:inset 0 0 0 1px var(--a2-line); font-size:12.5px; min-width:0; }
.a2-soc-pk-tpl > b{ font-size:13px; color:var(--a2-t1); }
.a2-soc-pk-tpl .a2-btn{ align-self:flex-start; }
.a2-soc-pk-serve{ font-size:11.5px; color:var(--a2-t3); line-height:1.4; }
.a2-soc-pk-gia{ font-size:11.5px; color:var(--a2-t3); }
.a2-soc-ok{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; }
.a2-soc-riep{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px; }
.a2-soc-riep-n{ display:flex; flex-wrap:wrap; align-items:center; gap:4px 10px; font-size:13px; color:var(--a2-t1); flex:1 1 320px; min-width:0; }
.a2-soc-riep-n b{ font-weight:650; }
.a2-soc-riep .a2-tf-altro{ flex:none; }
.a2-soc-riep-nota{ flex-basis:100%; }
.a2-soc-fotos{ display:grid; grid-template-columns:minmax(0,1fr); gap:12px; }
.a2-soc-fc{ display:flex; flex-direction:column; gap:10px; }
.a2-soc-fc .a2-soc-ia-hd{ margin-bottom:0; }
.a2-soc-fc-g{ display:grid; grid-template-columns:240px minmax(0,1.1fr) minmax(0,1fr); gap:12px; align-items:start; }
.a2-soc-foto{ position:relative; display:block; aspect-ratio:4/3; border-radius:6px; overflow:hidden; background:var(--a2-sunken); box-shadow:0 0 0 1px var(--a2-line); }
.a2-soc-foto > img{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; object-position:center; display:block; }
/* La foto intera, non ritagliata: la sua forma si vede, i ritagli per formato stanno accanto. */
.a2-soc-foto-bdg{ position:absolute; left:6px; bottom:6px; display:inline-flex; align-items:center; gap:4px; font-size:10.5px; font-weight:650; color:#fff; background:rgba(9,14,32,.68); border-radius:999px; padding:2px 8px 2px 6px; }
.a2-soc-foto-bdg .a2-ico{ width:12px; height:12px; }
.a2-soc-dagen{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; border:1.5px dashed var(--a2-acc); border-radius:6px; background:var(--a2-acc-50); color:var(--a2-acc-h); font-size:12px; font-weight:600; text-align:center; padding:10px; box-sizing:border-box; }
.a2-soc-dagen .a2-ico{ width:22px; height:22px; }
.a2-soc-dagen .a2-hint{ font-weight:400; }
.a2-soc-dagen-in, .a2-soc-dagen-no{ background:var(--a2-surface); color:var(--a2-t2); border-color:var(--a2-line-str); }
.a2-soc-fc-i{ display:flex; flex-direction:column; gap:8px; min-width:0; font-size:12.5px; }
.a2-soc-fonte{ display:flex; align-items:flex-start; gap:6px; color:var(--a2-t1); }
.a2-soc-fonte > .a2-ico{ flex:none; margin-top:2px; }
.a2-soc-fonte > span{ min-width:0; }
.a2-soc-fonte b{ font-weight:600; }
.a2-soc-prompt{ margin:0; font-size:12px; line-height:1.5; color:var(--a2-t2); background:var(--a2-sunken); border-radius:6px; padding:6px 9px; box-shadow:inset 0 0 0 1px var(--a2-line); overflow-wrap:anywhere; white-space:pre-line; }
.a2-soc-prompt b{ display:block; font-size:10.5px; font-weight:650; letter-spacing:.05em; text-transform:uppercase; color:var(--a2-t3); margin-bottom:2px; }
.a2-soc-k2{ font-size:10.5px; font-weight:650; letter-spacing:.05em; text-transform:uppercase; color:var(--a2-t3); }
.a2-soc-usano{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:3px; }
.a2-soc-usano li{ display:flex; flex-wrap:wrap; align-items:center; gap:4px 8px; font-size:12px; color:var(--a2-t2); }
.a2-soc-usano li.a2-soc-nofoto{ color:var(--a2-t3); }
.a2-soc-nofoto-n{ font-size:11px; color:var(--a2-t3); font-style:italic; }
.a2-soc-tagli{ display:flex; flex-wrap:wrap; align-items:flex-end; gap:10px; }
.a2-soc-taglio{ display:flex; flex-direction:column; align-items:center; gap:3px; font-family:var(--a2-f-mono); font-size:10.5px; color:var(--a2-t3); }
.a2-soc-taglio-f{ position:relative; display:block; height:72px; border-radius:3px; overflow:hidden; box-shadow:0 0 0 1px var(--a2-line-str); background:var(--a2-sunken); }
.a2-soc-taglio-f > img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; display:block; }
.a2-soc-inq{ margin:-2px 0 0; line-height:1.45; }
.a2-soc-taglio-vuoto{ background:repeating-linear-gradient(135deg, var(--a2-sunken) 0 6px, var(--a2-surface) 6px 12px); }
.a2-soc-taglio-stretto .a2-soc-taglio-f{ box-shadow:0 0 0 2px var(--a2-obs-700); }
.a2-soc-fc-az{ display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.a2-soc-fc-pan{ padding:10px; border-radius:var(--a2-r2); background:var(--a2-sunken); box-shadow:inset 0 0 0 1px var(--a2-line); display:flex; flex-direction:column; gap:8px; }
.a2-soc-media{ display:grid; grid-template-columns:repeat(auto-fill, minmax(140px, 1fr)); gap:8px; font-size:12px; color:var(--a2-t3); }
.a2-soc-media-v{ display:flex; flex-direction:column; gap:4px; padding:6px; border-radius:6px; background:var(--a2-surface); box-shadow:inset 0 0 0 1px var(--a2-line); border:0; font:inherit; font-size:11.5px; text-align:left; color:var(--a2-t2); cursor:pointer; line-height:1.35; }
.a2-soc-media-v:hover{ box-shadow:inset 0 0 0 1px var(--a2-acc); }
.a2-soc-media-v b{ font-size:12px; color:var(--a2-t1); font-weight:600; }
.a2-soc-media-v[aria-current="true"]{ box-shadow:inset 0 0 0 2px var(--a2-acc); background:var(--a2-acc-50); }
.a2-soc-in-uso{ font-size:10.5px; font-weight:650; color:var(--a2-acc-h); }
.a2-soc-prog{ flex-wrap:wrap; }
.a2-soc-prog .a2-hint{ flex-basis:100%; }
.a2-soc-el-idea td{ background:var(--a2-sunken); font-size:12.5px; padding-top:8px; padding-bottom:8px; }
.a2-soc-el-idea b{ margin-right:10px; }
.a2-soc-gr-foto{ display:inline-flex; align-items:center; gap:5px; font-size:12px; color:var(--a2-t3); }
.a2-soc-reel-bdg{ display:inline-flex; align-items:center; gap:4px; width:fit-content; font-size:11px; font-weight:650; color:var(--a2-obs-700); background:var(--a2-obs-100); border-radius:999px; padding:2px 8px; }
.a2-soc-reel-bdg .a2-ico{ width:12px; height:12px; }
@media (max-width:1000px){ .a2-soc-fc-g{ grid-template-columns:200px minmax(0,1fr); } .a2-soc-fc-g > .a2-soc-fc-i:last-child{ grid-column:2; } }
@media (max-width:640px){
  .a2-soc-cmbs, .a2-soc-pk-tpls, .a2-soc-fc-g{ grid-template-columns:minmax(0,1fr); }
  .a2-soc-fc-g > .a2-soc-fc-i:last-child{ grid-column:auto; }
  .a2-soc-fc-g > .a2-soc-foto{ max-width:320px; }
  .a2-soc-pk-tipo{ width:100%; }
}

/* =====================================================================
   Aree e sezioni
   Le quattro aree dell'azienda (Fatti, Brand e template, Contenuti, Social)
   e i due materiali caricati (Archivio, Media): colore, pillola, righe
   «c'e' / manca», fila dei passi di una sezione, i segni di «come nasce»
   (mockup 33 e 36). I colori stanno in Aree.Descrizione: qui le tinte.
   ===================================================================== */
:root{
  --a2-ar-fatti:#2F6B4F;     --a2-ar-fatti-50:#EAF4EE;     --a2-ar-fatti-100:#C8E3D2;
  --a2-ar-brand:#9A4A1E;     --a2-ar-brand-50:#FBEFE7;     --a2-ar-brand-100:#F1D2BE;
  --a2-ar-contenuti:#2F5D8F; --a2-ar-contenuti-50:#EAF1F8; --a2-ar-contenuti-100:#C9DAEC;
  --a2-ar-social:#8A3FA0;    --a2-ar-social-50:#F5ECF8;    --a2-ar-social-100:#E2CDEA;
  --a2-ar-archivio:#5C6B82;  --a2-ar-archivio-50:#EEF0F4;  --a2-ar-archivio-100:#D5DAE3;
  --a2-ar-media:#2F6F8F;     --a2-ar-media-50:#E9F2F6;     --a2-ar-media-100:#C6DDE8;
}

/* La pillola dell'area (partial _Area). ".a2-area" e' anche la classe dei
   campi di testo a piu' righe (riga 841): la pillola si applica solo con una
   delle varianti, con una specificita' piu' alta, e li azzera. */
.a2-area:is(.a2-area-fatti, .a2-area-brand, .a2-area-contenuti, .a2-area-social, .a2-area-archivio, .a2-area-media){
  display:inline-flex; align-items:center; gap:5px; box-sizing:border-box; height:22px; min-height:0; padding:0 9px 0 7px;
  border-radius:999px; font-size:11.5px; font-weight:600; line-height:1; white-space:nowrap; resize:none; vertical-align:middle;
}
.a2-area:is(.a2-area-fatti, .a2-area-brand, .a2-area-contenuti, .a2-area-social, .a2-area-archivio, .a2-area-media) .a2-ico{ width:13px; height:13px; flex:none; }
.a2-area-fatti{     color:var(--a2-ar-fatti);     background:var(--a2-ar-fatti-50);     box-shadow:inset 0 0 0 1px var(--a2-ar-fatti-100); }
.a2-area-brand{     color:var(--a2-ar-brand);     background:var(--a2-ar-brand-50);     box-shadow:inset 0 0 0 1px var(--a2-ar-brand-100); }
.a2-area-contenuti{ color:var(--a2-ar-contenuti); background:var(--a2-ar-contenuti-50); box-shadow:inset 0 0 0 1px var(--a2-ar-contenuti-100); }
.a2-area-social{    color:var(--a2-ar-social);    background:var(--a2-ar-social-50);    box-shadow:inset 0 0 0 1px var(--a2-ar-social-100); }
.a2-area-archivio{  color:var(--a2-ar-archivio);  background:var(--a2-ar-archivio-50);  box-shadow:inset 0 0 0 1px var(--a2-ar-archivio-100); }
.a2-area-media{     color:var(--a2-ar-media);     background:var(--a2-ar-media-50);     box-shadow:inset 0 0 0 1px var(--a2-ar-media-100); }

/* Le due righe «c'e'» e «manca» (partial _CeManca). */
.a2-cm{ display:grid; gap:4px; margin:6px 0 0; font-size:12.5px; color:var(--a2-t2); line-height:1.35; }
.a2-cm .c, .a2-cm .m{ display:flex; align-items:flex-start; gap:6px; }
.a2-cm .a2-ico{ width:14px; height:14px; flex:none; margin-top:1px; }
.a2-cm .c .a2-ico{ color:var(--a2-ar-fatti); }
.a2-cm .m .a2-ico{ color:#9A6B1E; }
.a2-cm b{ font-weight:700; color:var(--a2-t1); margin-right:2px; }
.a2-cm .m b{ color:#7A5418; }

/* La fila dei passi in testa a una sezione (partial _Procedura): il colore e'
   quello dell'area. */
.a2-proc{ list-style:none; margin:12px 0 14px; padding:0; display:flex; flex-wrap:wrap; align-items:stretch; gap:4px; --ac:var(--a2-ar-fatti); --ac-50:var(--a2-ar-fatti-50); --ac-100:var(--a2-ar-fatti-100); }
.a2-proc-brand{ --ac:var(--a2-ar-brand); --ac-50:var(--a2-ar-brand-50); --ac-100:var(--a2-ar-brand-100); }
.a2-proc-contenuti{ --ac:var(--a2-ar-contenuti); --ac-50:var(--a2-ar-contenuti-50); --ac-100:var(--a2-ar-contenuti-100); }
.a2-proc-social{ --ac:var(--a2-ar-social); --ac-50:var(--a2-ar-social-50); --ac-100:var(--a2-ar-social-100); }
.a2-proc li{ display:flex; align-items:center; gap:8px; flex:1 1 0; min-width:150px; background:var(--a2-surface); border:1px solid var(--a2-line); border-radius:9px; padding:8px 10px; font-size:12.5px; }
.a2-proc li > .a2-ico{ width:16px; height:16px; color:var(--ac); flex:none; }
.a2-proc li span{ display:flex; flex-direction:column; line-height:1.3; }
.a2-proc li i{ font-style:normal; font-size:11.5px; color:var(--a2-t3); }
.a2-proc li.fatto{ background:var(--ac-50); border-color:var(--ac-100); }
.a2-proc li.qui{ border:2px solid var(--ac); }
.a2-proc li.fr{ flex:0 0 18px; min-width:0; background:none; border:0; padding:0; justify-content:center; }
.a2-proc li.fr .a2-ico{ color:var(--a2-t3); width:15px; height:15px; }
/* Un passo che porta a una parte della pagina: il link riempie tutta la tessera. */
.a2-proc li .a2-proc-lk{ display:flex; align-items:center; gap:8px; flex:1 1 auto; min-width:0; margin:-8px -10px; padding:8px 10px; border-radius:8px; color:inherit; text-decoration:none; }
.a2-proc li .a2-proc-lk > .a2-ico{ width:16px; height:16px; color:var(--ac); flex:none; }
.a2-proc li .a2-proc-lk:hover{ background:var(--ac-50); }
.a2-proc li .a2-proc-lk:focus-visible{ outline:2px solid var(--ac); outline-offset:1px; }

/* Brand e template su una pagina sola: due parti distinte (#brand e #template), ognuna con la sua
   intestazione (titolo e una riga che dice a che cosa serve). Fra l'una e l'altra c'e' un filetto con il
   colore dell'area, oltre al margine. */
.a2-parte{ scroll-margin-top:16px; }
.a2-parte + .a2-parte{ margin-top:44px; padding-top:28px; border-top:3px solid var(--a2-ar-brand-100); }
.a2-parte-hd{ display:flex; align-items:center; flex-wrap:wrap; gap:8px 14px; margin:0 0 16px; padding:12px 16px; background:var(--a2-ar-brand-50); border:1px solid var(--a2-ar-brand-100); border-left:5px solid var(--a2-ar-brand); border-radius:10px; }
.a2-parte-ico{ display:grid; place-items:center; width:34px; height:34px; border-radius:9px; background:var(--a2-surface); color:var(--a2-ar-brand); box-shadow:inset 0 0 0 1px var(--a2-ar-brand-100); flex:none; }
.a2-parte-ico .a2-ico{ width:18px; height:18px; }
.a2-parte-t{ min-width:0; flex:1 1 320px; }
.a2-parte-h2{ margin:0 0 2px; font-size:19px; font-weight:650; letter-spacing:-.015em; line-height:1.25; color:var(--a2-t1); }
.a2-parte-s{ margin:0; font-size:13px; color:var(--a2-t2); line-height:1.45; }
.a2-parte-n{ margin-left:auto; font-size:12.5px; font-weight:600; color:var(--a2-ar-brand); }

/* Da fare: non c'e' ancora e ha tutto quello che serve. Prende il posto di
   «pronto» (.a2-st-pronto resta definito, per chi lo usa ancora). */
.a2-st-fare{ background:#E6F0FB; color:#1F4E8C; }

/* Come nasce un asset (Legenda.Chi): tre forme, non solo tre colori. A mano,
   la matita bruna; a mano con proposta, la stessa matita con la scintilla
   indaco nell'angolo; generato, la scintilla bianca su fondo indaco. */
.a2-chi-ico{ position:relative; display:inline-grid; place-items:center; width:18px; height:18px; border-radius:6px; flex:none; }
.a2-chi-ico .a2-ico{ width:12px; height:12px; }
.a2-chi-ico-mano, .a2-chi-ico-prop{ background:#F6F0E6; color:#6B4A22; box-shadow:inset 0 0 0 1.5px #C9A97E; }
.a2-chi-ico-prop::after{ content:""; position:absolute; right:-5px; top:-5px; width:11px; height:11px; border-radius:50%; background:#4338CA url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3 14.4 9.6 21 12 14.4 14.4 12 21 9.6 14.4 3 12 9.6 9.6z' fill='white'/%3E%3C/svg%3E") center/8px no-repeat; box-shadow:0 0 0 1.5px var(--a2-surface); }
.a2-chi-ico-gen{ background:#4338CA; color:#fff; }
.a2-chi .a2-chi-ico{ margin-right:1px; }

/* La pagina Legenda: tre colonne di segni, come la scena del mockup 33. */
.a2-leg{ display:grid; grid-template-columns:repeat(auto-fit, minmax(270px, 1fr)); gap:12px; }
.a2-leg-c{ border:1px solid var(--a2-line); border-radius:12px; background:var(--a2-surface); padding:12px 14px 14px; }
.a2-leg-c h2{ margin:0 0 2px; font-size:14px; color:var(--a2-t1); display:flex; align-items:center; gap:7px; }
.a2-leg-c h2 .q{ font-size:11px; font-weight:600; color:var(--a2-t3); }
.a2-leg-c > p{ margin:0 0 10px; font-size:12.5px; color:var(--a2-t3); line-height:1.45; }
.a2-leg-c ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px; }
.a2-leg-c li{ display:grid; grid-template-columns:auto minmax(0, 1fr); gap:10px; align-items:start; font-size:12.5px; color:var(--a2-t2); line-height:1.45; }
.a2-leg-c li b{ color:var(--a2-t1); }
.a2-leg-nota{ margin:14px 0 0; max-width:1040px; font-size:12.5px; color:var(--a2-t3); line-height:1.55; }

/* Il menu dell'azienda: la riga «Dossier» sotto il nome, e le voci con il
   pallino dell'area e il verbo (mockup 36). */
.a2-nav-az{ height:auto; min-height:34px; padding-top:3px; padding-bottom:3px; border-radius:8px; }
.a2-nav-sotto{ display:block; font-size:11px; font-weight:500; line-height:1.2; color:var(--a2-t3); }
.a2-nav-az[aria-current="true"]{ background:var(--a2-sunken); }
.a2-nav-az[aria-current="true"] .a2-nav-az-t{ color:var(--a2-acc-h); }
.a2-nav-area{ gap:8px; }
.a2-pt{ width:8px; height:8px; border-radius:50%; flex:none; background:var(--a2-t3); }
.a2-pt-fatti{ background:var(--a2-ar-fatti); }
.a2-pt-brand{ background:var(--a2-ar-brand); }
.a2-pt-contenuti{ background:var(--a2-ar-contenuti); }
.a2-pt-social{ background:var(--a2-ar-social); }
.a2-pt-archivio{ background:var(--a2-ar-archivio); }
.a2-pt-media{ background:var(--a2-ar-media); }
.a2-verbo{ margin-left:auto; font-size:11px; color:var(--a2-t3); font-style:italic; font-weight:400; }

/* La sezione Fatti (mockup 36): sopra il titolo la pillola dell'area con il verbo;
   le informazioni e, sotto, le domande per il cliente, ciascuna nel suo blocco. */
.a2-sez-sopra{ display:flex; align-items:center; gap:10px; margin-bottom:6px; }
.a2-fatti-info{ margin-bottom:22px; }
.a2-fatti-info .a2-card-hd{ flex-wrap:wrap; }
.a2-fatti-domande{ scroll-margin-top:16px; }
.a2-fatti-hd{ display:flex; align-items:flex-start; flex-wrap:wrap; gap:12px; margin-bottom:12px; }
.a2-fatti-hd-t{ min-width:0; flex:1 1 280px; }
.a2-fatti-h2{ font-size:18px; font-weight:600; letter-spacing:-.015em; line-height:1.25; margin:0 0 4px; }

/* Il Dossier, la casa dell'azienda (mockup 36): un blocco per sezione, in due
   colonne. Il filetto in alto ha il colore dell'area. */
.a2-db-griglia{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:12px; margin-top:12px; }
@media (max-width: 1000px){ .a2-db-griglia{ grid-template-columns:minmax(0,1fr); } }
.a2-db{ background:var(--a2-surface); border:1px solid var(--a2-line); border-top:4px solid var(--a2-t3); border-radius:10px; padding:12px 14px; display:flex; flex-direction:column; gap:8px; min-width:0; }
.a2-db-fatti{ border-top-color:var(--a2-ar-fatti); }
.a2-db-brand{ border-top-color:var(--a2-ar-brand); }
.a2-db-contenuti{ border-top-color:var(--a2-ar-contenuti); }
.a2-db-social{ border-top-color:var(--a2-ar-social); }
.a2-db-archivio{ border-top-color:var(--a2-ar-archivio); }
.a2-db-media{ border-top-color:var(--a2-ar-media); }
.a2-db-hd{ display:flex; align-items:center; gap:10px; }
.a2-db-verbo{ font-size:12px; color:var(--a2-t3); font-style:italic; }
.a2-db-segnale{ margin-left:auto; }
.a2-db .a2-cm{ margin:0; }
.a2-db-passo{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; border-top:1px solid var(--a2-line); padding-top:9px; margin-top:auto; }
.a2-db-passo .lab{ width:100%; font-size:10.5px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--a2-t3); }
.a2-db-azione{ display:inline-flex; margin:0; }
.a2-db-apri{ display:inline-flex; align-items:center; gap:4px; font-size:12.5px; }
.a2-db-apri .a2-ico{ width:12px; height:12px; }
.a2-db-nota{ display:flex; align-items:center; gap:8px; margin:14px 0 0; font-size:12.5px; color:var(--a2-t2); }
.a2-db-nota .a2-ico{ width:15px; height:15px; flex:none; }
.a2-db-vecchio{ margin-top:6px; color:var(--a2-t3); }

/* La sezione Contenuti (mockup 36, scena «cont»): le categorie come pillole con
   il numero, e una tabella di compiti raggruppata per categoria. «Viene letto
   da» dice se il risultato serve ad altri prompt o e' un punto d'arrivo. */
.a2-cont-cat{ display:flex; flex-wrap:wrap; gap:6px; margin:0 0 12px; }
.a2-cont-cat button{ font:inherit; font-size:12.5px; display:inline-flex; align-items:center; gap:6px; border:1px solid var(--a2-line-str); background:var(--a2-surface); color:var(--a2-t2); border-radius:999px; padding:5px 12px; cursor:pointer; }
.a2-cont-cat button:hover{ border-color:var(--a2-ar-contenuti); }
.a2-cont-cat button span{ font-size:11.5px; color:var(--a2-t3); }
.a2-cont-cat button[aria-pressed="true"]{ background:var(--a2-ar-contenuti); border-color:var(--a2-ar-contenuti); color:#fff; font-weight:600; }
.a2-cont-cat button[aria-pressed="true"] span{ color:#DCE7F4; }
.a2-cont td{ vertical-align:top; }
.a2-cont .a2-cont-gruppo td{ background:var(--a2-ar-contenuti-50); color:var(--a2-ar-contenuti); font-size:11.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; padding:7px 12px; }
.a2-cont .a2-cont-gruppo td span{ margin-left:10px; font-weight:500; letter-spacing:0; text-transform:none; color:var(--a2-t3); }
.a2-cont-desc{ margin-top:3px; font-size:12px; color:var(--a2-t3); line-height:1.4; max-width:340px; }
.a2-cont-legge, .a2-cont-template{ font-size:12.5px; color:var(--a2-t2); }
.a2-cont-legge .a2-st-why{ display:block; margin-top:3px; }
.a2-letto{ display:inline-flex; align-items:flex-start; gap:5px; font-size:12px; color:var(--a2-t2); max-width:240px; }
.a2-letto .a2-ico, .a2-arrivo .a2-ico{ width:13px; height:13px; flex:none; margin-top:2px; }
.a2-arrivo{ display:inline-flex; align-items:center; gap:5px; font-size:12px; font-weight:600; color:var(--a2-ar-contenuti); white-space:nowrap; }
.a2-arrivo .a2-ico{ margin-top:0; }

/* Da dove viene una copia, rispetto al catalogo (Libreria, mockup 33): un'etichetta con icona e parole, mai un colore da solo.
   E' il rapporto con il catalogo condiviso, non lo stato del lavoro: ha colori suoi, diversi dai verdi e dagli ambra degli stati. */
.a2-orig{ display:inline-flex; align-items:center; gap:5px; height:22px; padding:0 9px 0 7px; border-radius:6px; font-size:12px; font-weight:600; white-space:nowrap; border:1px solid; text-decoration:none; }
.a2-orig .a2-ico{ width:13px; height:13px; flex:none; }
.a2-o-uguale{ color:#41506A; background:#F1F4F9; border-color:#D3DAE6; }
.a2-o-novita{ color:#9A3412; background:#FFF4EC; border-color:#F2C9A8; }
.a2-o-pers{ color:#6B4A22; background:#F6F0E6; border-color:#C9A97E; }
.a2-o-tuo{ color:var(--a2-t2); background:var(--a2-surface); border-color:var(--a2-line-str); border-style:dashed; }
.a2-o-no{ color:var(--a2-t3); background:var(--a2-surface); border-color:var(--a2-line); }
.a2-card-hd-end .a2-orig{ margin-left:auto; }
.a2-orig-leg{ display:flex; flex-wrap:wrap; gap:8px 18px; margin:0 0 10px; font-size:12px; color:var(--a2-t2); }
.a2-orig-leg .v{ display:inline-flex; align-items:center; gap:7px; }

/* =====================================================================
   La pagina di generazione (Esegui, mockup 34)
   A sinistra «Che cosa legge» e il risultato (prima come si genera, poi
   che cosa ha prodotto, su un fondo suo); a destra «Viene letto da».
   Classi a2-ese-*: i campi del modulo e gli id che usano gli script
   (esecuzione*.js, da-chiedere.js, verifica-fatti.js) sono quelli di prima.
   ===================================================================== */
.a2-ese-griglia{ display:grid; grid-template-columns:minmax(0,1fr) 290px; gap:14px; align-items:start; }
.a2-ese-corpo{ display:flex; flex-direction:column; gap:14px; min-width:0; }
.a2-ese-lato{ position:sticky; top:12px; min-width:0; }
@media (max-width: 1180px){ .a2-ese-griglia{ grid-template-columns:minmax(0,1fr); } .a2-ese-lato{ position:static; } }

/* Che cosa legge: il filetto in alto nel colore dell'area del prompt. */
.a2-ese-legge{ --ac:var(--a2-ar-contenuti); border-top:3px solid var(--ac); }
.a2-ese-legge-fatti{ --ac:var(--a2-ar-fatti); }
.a2-ese-legge-brand{ --ac:var(--a2-ar-brand); }
.a2-ese-legge-social{ --ac:var(--a2-ar-social); }
.a2-ese-legge .a2-card-hd{ flex-wrap:wrap; row-gap:4px; }
.a2-ese-legge .a2-card-hd > .a2-ico{ width:16px; height:16px; color:var(--ac); }
.a2-ese-sintesi{ gap:12px; font-size:12.5px; font-weight:600; flex-wrap:wrap; }
.a2-ese-sintesi span{ display:inline-flex; align-items:center; gap:4px; }
.a2-ese-sintesi .a2-ico{ width:14px; height:14px; }
.a2-ese-s-ce, .a2-ese-st-ce{ color:var(--a2-ar-fatti); }
.a2-ese-s-rig, .a2-ese-st-rig{ color:#9A5B0B; }
.a2-ese-s-riv, .a2-ese-st-riv{ color:var(--a2-riv-700); }
.a2-ese-s-manca, .a2-ese-st-manca{ color:#7A5418; }
.a2-ese-legge-tab td{ vertical-align:top; }
.a2-ese-legge-tab th, .a2-ese-legge-tab td{ padding-left:10px; padding-right:10px; }
.a2-ese-st{ display:inline-flex; align-items:center; gap:5px; font-size:12px; font-weight:600; white-space:nowrap; }
.a2-ese-st .a2-ico{ width:15px; height:15px; flex:none; }
.a2-ese-nome{ min-width:200px; }
.a2-ese-nome-a{ color:var(--a2-t1); font-weight:600; text-decoration:none; }
.a2-ese-nome-a:hover{ text-decoration:underline; text-underline-offset:3px; }
.a2-ese-nome .a2-tag{ margin-left:6px; }
.a2-ese-uso{ display:block; margin-top:2px; font-size:12px; color:var(--a2-t3); line-height:1.4; max-width:420px; }
.a2-ese-r-manca td{ background:#FBF6EC; }
.a2-ese-r-manca .a2-ese-nome-a{ color:#5E4416; }
.a2-ese-ap{ display:inline-flex; align-items:center; gap:6px; font-size:12px; color:var(--a2-t2); white-space:nowrap; }
.a2-ese-legge-tab .a2-chi{ font-size:12px; white-space:nowrap; }
.a2-ese-az{ text-align:right; white-space:nowrap; width:1%; }
.a2-ese-piede{ display:flex; align-items:center; gap:6px; margin:0; padding:8px 14px; font-size:12px; color:#7A5418; border-top:1px dashed #D9BF8C; background:#FBF6EC; border-radius:0 0 var(--a2-r3) var(--a2-r3); }
.a2-ese-piede .a2-ico{ width:14px; height:14px; flex:none; }

/* Il risultato: prima come si genera (righe etichetta | scelta | nota), poi che cosa ha prodotto.
   Niente overflow nascosto: la barra del risultato (.a2-esito-barra) resta appiccicata in alto. */
.a2-ese-risultato{ background:var(--a2-surface); border:1px solid var(--a2-line); border-radius:var(--a2-r3); }
.a2-ese-ris-hd{ display:flex; align-items:center; flex-wrap:wrap; gap:8px 10px; padding:12px 16px; border-bottom:1px solid var(--a2-line); }
.a2-ese-ris-hd > .a2-ico{ width:16px; height:16px; color:var(--a2-t2); }
.a2-ese-come{ display:block; background:var(--a2-sunken); }
.a2-ese-sez{ display:flex; align-items:center; flex-wrap:wrap; gap:6px 8px; padding:12px 16px 0; font-size:13px; color:var(--a2-t1); }
.a2-ese-sez .a2-ico{ width:15px; height:15px; color:var(--a2-t2); }
.a2-ese-righe{ margin:10px 16px 0; background:var(--a2-surface); border:1px solid var(--a2-line); border-radius:8px; }
.a2-ese-riga{ display:grid; grid-template-columns:170px minmax(0,320px) minmax(0,1fr); gap:6px 14px; align-items:center; padding:9px 12px; font-size:13px; }
.a2-ese-riga + .a2-ese-riga{ border-top:1px solid var(--a2-line); }
.a2-ese-riga-larga{ grid-template-columns:170px minmax(0,1fr); align-items:start; }
.a2-ese-lab{ display:flex; flex-direction:column; gap:1px; font-size:12.5px; font-weight:600; color:var(--a2-t1); }
.a2-ese-lab > span{ display:inline-flex; align-items:center; gap:6px; }
.a2-ese-lab .a2-ico{ width:14px; height:14px; color:var(--a2-t2); flex:none; }
.a2-ese-lab i{ display:block; font-style:normal; font-weight:400; font-size:11.5px; color:var(--a2-t3); line-height:1.35; }
label.a2-ese-lab{ cursor:pointer; }
.a2-ese-ctl{ display:flex; flex-wrap:wrap; align-items:center; gap:6px; min-width:0; }
.a2-ese-ctl-largo{ grid-column:2 / -1; flex-direction:column; align-items:flex-start; }
.a2-ese-riga-larga .a2-ese-ctl{ flex-direction:column; align-items:stretch; gap:8px; }
.a2-ese-ctl .a2-sel, .a2-ese-ctl .a2-input:not(.a2-area){ max-width:100%; }
.a2-ese-nota{ display:flex; flex-direction:column; gap:3px; font-size:12px; color:var(--a2-t3); line-height:1.4; min-width:0; }
.a2-ese-come .a2-cs-inviato{ margin:10px 16px 0; background:var(--a2-surface); border:1px solid var(--a2-line); border-radius:8px; }
.a2-ese-come .a2-costruito-ft{ padding:12px 16px 14px; }
@media (max-width: 760px){
  .a2-ese-riga, .a2-ese-riga-larga{ grid-template-columns:minmax(0,1fr); }
  .a2-ese-ctl-largo{ grid-column:auto; }
}

/* Che cosa ha prodotto: su un fondo suo, sotto come si genera. */
.a2-ese-uscita{ background:var(--a2-sunken); border-top:2px solid var(--a2-line-str); padding:12px; border-radius:0 0 var(--a2-r3) var(--a2-r3); }
.a2-ese-uscita .a2-esito-barra .a2-fase .a2-ico{ width:13px; height:13px; }

/* In testa, com'e' adesso cio' in cui si salva. */
.a2-ese-ora{ display:inline-flex; align-items:center; gap:6px; }

/* Viene letto da, a lato. */
.a2-ese-letto .a2-card-hd > .a2-ico{ width:16px; height:16px; color:var(--a2-t2); }
.a2-ese-letto .a2-card-bd{ display:flex; flex-direction:column; gap:10px; font-size:13px; }
.a2-ese-letto-el{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; }
.a2-ese-letto-el b{ font-weight:600; }
.a2-ese-letto-nota{ margin:0; font-size:12px; color:var(--a2-t3); line-height:1.45; }
.a2-ese-arrivo{ margin:0; display:flex; gap:7px; color:var(--a2-t2); font-size:12.5px; line-height:1.45; }
.a2-ese-arrivo .a2-ico{ width:15px; height:15px; color:var(--a2-ar-fatti); flex:none; margin-top:2px; }

/* ---------- La finestra della galleria (mockup 38) ---------- */
/* La pagina del template nella finestra: senza menu, il contenuto e basta. */
body.a2-finestra{ background:var(--a2-bg); }
.a2-finestra-corpo{ height:auto; overflow:visible; padding:18px 22px 26px; }
/* La finestra sopra la galleria: una barra con il nome e le frecce, poi la pagina. */
.a2-fin{ border:0; padding:0; border-radius:14px; width:min(1180px, calc(100vw - 32px)); height:min(900px, calc(100vh - 48px)); box-shadow:0 18px 50px rgba(16,22,34,.32); display:none; flex-direction:column; overflow:hidden; background:var(--a2-bg); color:var(--a2-t1); }
.a2-fin[open]{ display:flex; }
.a2-fin::backdrop{ background:rgba(16,22,34,.42); }
.a2-fin-barra{ display:flex; align-items:center; gap:6px; padding:8px 10px 8px 18px; background:var(--a2-surface); border-bottom:1px solid var(--a2-line); flex:none; }
.a2-fin-tit{ flex:1 1 auto; min-width:0; font-size:13px; font-weight:600; color:var(--a2-t2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.a2-fin-conto{ font-size:12px; color:var(--a2-t3); margin:0 4px; white-space:nowrap; }
.a2-fin-tondo{ width:32px; height:32px; border-radius:50%; border:1px solid var(--a2-line-str); background:var(--a2-surface); display:inline-flex; align-items:center; justify-content:center; cursor:pointer; color:var(--a2-t2); flex:none; }
.a2-fin-tondo:hover{ background:var(--a2-sunken); }
.a2-fin-tondo:disabled{ opacity:.4; cursor:default; }
.a2-fin-tondo[hidden]{ display:none; }
.a2-fin-tondo .a2-ico{ width:16px; height:16px; }
.a2-fin-cornice{ flex:1 1 auto; width:100%; border:0; background:var(--a2-bg); }
/* La miniatura che apre la finestra (galleria, proposte di Esegui): si dice con il cursore. */
.a2-tpl-mini[data-finestra]{ cursor:zoom-in; }
/* «Guarda in grande» e «Scarica il file» sotto il nome di una proposta. */
.a2-tf-vedere{ display:flex; flex-wrap:wrap; gap:6px; }
/* «Usa per» con piu' prompt: sulla tessera la tendina si apre verso destra. */
.a2-tf-es .a2-gal-usa .a2-menu{ left:0; right:auto; }

/* La foto di una slide della proposta del reel (mockup 40, reel-foto-slide.js):
   la galleria dei Media con la parte che resta nello spazio, e «Inquadra». */
.a2-rp-foto-t{ font-size:12.5px; color:var(--a2-t2); max-width:220px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.a2-rp-gal{ width:min(980px, calc(100vw - 32px)); }
.a2-rp-gal-filtri{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; padding:12px 18px 0; }
.a2-rp-gal-filtri .a2-input{ flex:1 1 240px; max-width:360px; }
.a2-rp-seg{ display:inline-flex; border:1px solid var(--a2-line); border-radius:999px; overflow:hidden; }
.a2-rp-seg button{ font:inherit; font-size:12.5px; border:0; background:none; padding:4px 12px; cursor:pointer; color:var(--a2-t2); }
.a2-rp-seg button[aria-pressed="true"]{ background:var(--a2-t1); color:var(--a2-surface); }
.a2-rp-gal-griglia{ display:grid; grid-template-columns:repeat(auto-fill, minmax(170px, 1fr)); gap:14px; padding:14px 18px 6px; max-height:min(520px, 62vh); overflow:auto; }
.a2-rp-gal-vuota{ grid-column:1 / -1; margin:18px 0; }
.a2-rp-gal-t{ border:1px solid var(--a2-line); border-radius:10px; padding:8px; background:var(--a2-surface); cursor:pointer; text-align:left; font:inherit; display:flex; flex-direction:column; align-items:flex-start; gap:6px; }
.a2-rp-gal-t:hover{ border-color:var(--a2-t3); box-shadow:var(--a2-lift-1); }
.a2-rp-gal-t[aria-pressed="true"]{ border-color:var(--a2-acc); box-shadow:0 0 0 2px var(--a2-acc); }
.a2-rp-gal-t canvas{ width:100%; aspect-ratio:1; display:block; border-radius:6px; background:#1d2230; }
.a2-rp-gal-tt{ font-size:12px; color:var(--a2-t2); line-height:1.35; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.a2-rp-bdg{ display:inline-flex; align-items:center; gap:4px; font-size:11.5px; font-weight:600; padding:2px 8px; border-radius:999px; background:var(--a2-sunken); color:var(--a2-t2); }
.a2-rp-bdg-ok{ background:#e5f4ea; color:#1f6b3a; }
.a2-rp-bdg-taglio{ background:#fdf0d8; color:#8a5a00; }
.a2-rp-bdg-uso{ background:#e8ecf8; color:#2c3f86; }
.a2-rp-inq{ width:min(820px, calc(100vw - 32px)); }
.a2-rp-inq-corpo{ display:grid; grid-template-columns:auto 1fr; gap:22px; padding:16px 18px; }
.a2-rp-inq-tela{ width:min(330px, calc((100vh - 230px) * .5625)); height:auto; border-radius:10px; box-shadow:0 0 0 1px var(--a2-line); cursor:grab; touch-action:none; display:block; }
.a2-rp-inq-tela.a2-rp-inq-presa{ cursor:grabbing; }
.a2-rp-inq-tela:focus-visible{ outline:2px solid var(--a2-acc); outline-offset:3px; }
.a2-rp-inq-lato{ display:flex; flex-direction:column; align-items:flex-start; gap:12px; font-size:13px; min-width:0; }
.a2-rp-inq-zoom{ display:flex; flex-direction:column; gap:4px; font-weight:600; width:100%; }
.a2-rp-inq-zoom input[type=range]{ width:100%; }
.a2-rp-inq-az{ display:flex; flex-wrap:wrap; gap:8px; }
.a2-rp-inq-elenco{ margin:0; padding-left:18px; color:var(--a2-t2); line-height:1.55; }
.a2-rp-gal .a2-dialogo-piede{ justify-content:space-between; align-items:center; }
@media (max-width:760px){ .a2-rp-inq-corpo{ grid-template-columns:1fr; } .a2-rp-inq-tela{ width:min(330px, 100%); } }

/* ---------- Lo Studio dei reel (mockup 42) ---------- */
/* A tutta pagina, sul fondo scuro: i token ridefiniti fanno scuri anche i pannelli di oggi (proposta, scene, musica). */
body.a2-studio{
  --a2-bg:#0e121b; --a2-surface:#1a1f2d; --a2-sunken:#141926; --a2-field:#141926; --a2-field-h:#1b2234;
  --a2-line:#2a3144; --a2-line-str:#3a4259; --a2-t1:#eef1f7; --a2-t2:#c3c9d6; --a2-t3:#8d96ab; --a2-t-off:#6b7489;
  --a2-acc:#1f8a7d; --a2-acc-h:#239c8e; --a2-acc-p:#1a7569; --a2-acc-50:#16302d; --a2-acc-100:#1d3f3b; --a2-acc-t2:#8fcfc6;
  --a2-lift-1:0 4px 12px -2px rgba(0,0,0,.45); --a2-lift-2:0 16px 32px -12px rgba(0,0,0,.6);
  background:#0e121b; color:var(--a2-t1); min-height:100vh; font-size:13px;
}
.a2-studio .a2-btn-3{ background:transparent; color:var(--a2-t1); border-color:var(--a2-line-str); }
.a2-studio .a2-btn-2{ background:#16302d; color:#8fe0d3; border-color:#2b5a54; }
.a2-studio .a2-btn-2:hover:not(:disabled){ background:#1d3f3b; border-color:#2b5a54; }
.a2-studio .a2-btn-x{ background:transparent; color:#ff9b8f; border-color:#5a2b2b; }
.a2-studio .a2-btn-x:hover:not(:disabled){ background:#2a1616; color:#ff9b8f; border-color:#5a2b2b; }
.a2-studio .a2-btn-2:active:not(:disabled){ background:#234a45; }
.a2-studio .a2-btn-x:active:not(:disabled){ background:#3a1c1c; }
.a2-studio .a2-btn-3:hover:not(:disabled){ background:#171c2a; border-color:var(--a2-line-str); }
.a2-studio .a2-hint{ color:var(--a2-t3); }
.a2-studio .a2-lnk{ color:#7fd3c7; }
.a2-studio .a2-card{ background:var(--a2-surface); border-color:var(--a2-line); }
/* I pulsanti scelti: chiari sul fondo scuro, il testo scuro. */
.a2-studio .a2-soc-seg button[aria-pressed="true"], .a2-studio .a2-soc-chip[aria-pressed="true"], .a2-studio .a2-soc-filtro[aria-pressed="true"],
.a2-studio .a2-tf-chip[aria-pressed="true"], .a2-studio .a2-gal-seg button[aria-pressed="true"], .a2-studio .a2-soc-passo-n, .a2-studio .a2-fase{ color:#0e121b; }
/* I colori fissi dei pannelli del reel, letti sul fondo scuro. */
.a2-studio .a2-rv-sc-n{ background:#2a3144; }
.a2-studio .a2-rp-sl.a2-parlato-tg{ border-color:#2c5560; background:#15303a; }
/* Avvisi ed errori: i toni scuri del tema chiaro non si leggerebbero (i chip con il loro fondo chiaro restano come sono). */
.a2-studio .a2-soc-avv, .a2-studio .a2-testo-ambra, .a2-studio .a2-rv-nota-on, .a2-studio .a2-rv-bat-da{ color:#F3D46B; }
.a2-studio .a2-soc-avvisi{ background:#2a2412; }
.a2-studio .a2-soc-stato-err{ color:#ff9b8f; }

.a2-studio-torna:focus-visible, .a2-studio-passo:focus-visible, .a2-studio-altro:focus-visible{ outline:2px solid #fff; outline-offset:2px; }
.a2-studio-top{ display:flex; align-items:center; gap:14px; padding:10px 16px; border-bottom:1px solid var(--a2-line); background:#121725; position:sticky; top:0; z-index:20; }
.a2-studio-torna{ display:inline-flex; gap:6px; align-items:center; color:var(--a2-t2); font-size:12.5px; padding:5px 10px 5px 7px; border-radius:8px; box-shadow:inset 0 0 0 1px var(--a2-line-str); white-space:nowrap; text-decoration:none; }
.a2-studio-torna:hover{ color:#fff; }
.a2-studio-torna .a2-ico{ width:14px; height:14px; transform:rotate(90deg); }
.a2-studio-marca{ display:flex; align-items:center; gap:8px; font-weight:700; letter-spacing:-.01em; white-space:nowrap; }
.a2-studio-marca i{ width:24px; height:24px; border-radius:7px; background:linear-gradient(135deg,#F3D46B,#C9A227); display:grid; place-items:center; color:#0e121b; font-style:normal; }
.a2-studio-marca i .a2-ico{ width:14px; height:14px; }
.a2-studio-crumb{ color:var(--a2-t3); font-size:12.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; flex:1 1 auto; }
.a2-studio-crumb b{ color:var(--a2-t1); font-weight:600; }
.a2-studio-chip{ font-size:11.5px; padding:3px 10px; border-radius:99px; background:#3a3214; color:#F3D46B; white-space:nowrap; font-weight:600; margin-left:auto; }
.a2-studio-chip-ok{ background:#173a29; color:#7fe0a8; }
.a2-studio-corpo{ display:grid; grid-template-columns:220px minmax(0,1fr); min-height:calc(100vh - 49px); }
.a2-studio-rail{ border-right:1px solid var(--a2-line); padding:14px 10px; display:flex; flex-direction:column; gap:3px; background:#10141f; }
.a2-studio-rail-k{ font-size:10.5px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--a2-t3); padding:4px 10px 6px; }
.a2-studio-passo{ display:grid; grid-template-columns:24px minmax(0,1fr); gap:1px 10px; padding:8px 10px; border-radius:10px; color:var(--a2-t1); text-decoration:none; }
a.a2-studio-passo:hover{ background:#171c2a; }
span.a2-studio-passo{ opacity:.6; }
span.a2-studio-passo.fatto, span.a2-studio-passo[aria-current]{ opacity:1; }
.a2-studio-passo .n{ grid-row:1 / 3; width:24px; height:24px; border-radius:50%; display:grid; place-items:center; font-size:11px; font-weight:700; background:#20263a; color:var(--a2-t3); }
.a2-studio-passo .n .a2-ico{ width:12px; height:12px; }
.a2-studio-passo.fatto .n{ background:#173a29; color:#7fe0a8; }
.a2-studio-passo[aria-current="step"]{ background:#1b2234; box-shadow:inset 0 0 0 1px #3a4259; }
.a2-studio-passo[aria-current="step"] .n{ background:#F3D46B; color:#0e121b; }
.a2-studio-passo b{ font-size:13px; font-weight:600; }
.a2-studio-passo small{ color:var(--a2-t3); font-size:11.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.a2-studio-altri{ margin-top:auto; padding-top:14px; border-top:1px solid var(--a2-line); display:flex; flex-direction:column; gap:4px; }
.a2-studio-altri .a2-studio-rail-k{ padding:0 8px 4px; }
.a2-studio-altro{ display:grid; grid-template-columns:30px minmax(0,1fr); gap:0 9px; align-items:center; padding:6px 8px; border-radius:8px; font-size:12px; color:var(--a2-t1); text-decoration:none; }
.a2-studio-altro:hover{ background:#171c2a; }
.a2-studio-altro .mini{ grid-row:1 / 3; width:30px; aspect-ratio:9/16; border-radius:4px; background:#232a3b; display:grid; place-items:center; color:var(--a2-t3); }
.a2-studio-altro .mini .a2-ico{ width:12px; height:12px; }
.a2-studio-altro span:not(.mini){ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.a2-studio-altro small{ color:var(--a2-t3); font-size:11px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.a2-studio-palco{ min-width:0; padding:20px 22px 30px; background:radial-gradient(ellipse 70% 60% at 50% 22%, #1b2338 0%, #0e121b 75%) no-repeat, #0e121b; }
.a2-studio-reel{ display:flex; flex-direction:column; gap:16px; max-width:1240px; margin:0 auto; }
.a2-studio-t{ font-size:19px; font-weight:650; letter-spacing:-.01em; margin-bottom:14px; }
.a2-studio-k{ font-size:10.5px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--a2-t3); margin:4px 0 8px; }
.a2-studio-due{ display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:22px; align-items:start; }
.a2-studio-col{ display:flex; flex-direction:column; gap:10px; min-width:0; }
.a2-studio-col-reel{ align-items:center; }
.a2-studio-tpl{ display:flex; gap:14px; align-items:center; padding:12px; border-radius:12px; background:var(--a2-surface); box-shadow:inset 0 0 0 1px var(--a2-line); }
.a2-studio-tpl-reel{ width:90px; border-radius:8px; }
.a2-studio-tpl-t{ display:flex; flex-direction:column; gap:6px; min-width:0; }
.a2-studio-tpl-t .a2-sel{ max-width:100%; }
.a2-studio-sa{ display:flex; flex-direction:column; gap:8px; font-size:12.5px; }
.a2-studio-sa div{ padding:9px 11px; border-radius:9px; background:var(--a2-surface); box-shadow:inset 0 0 0 1px var(--a2-line); line-height:1.5; overflow-wrap:anywhere; }
.a2-studio-sa div small{ display:block; font-size:10.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--a2-t3); margin-bottom:2px; }
.a2-studio-riepilogo{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; padding:10px 12px; border-radius:10px; background:var(--a2-surface); box-shadow:inset 0 0 0 1px var(--a2-line); }
.a2-studio-piede{ display:flex; gap:12px; align-items:center; flex-wrap:wrap; padding-top:6px; }
.a2-studio-assente{ padding:60px 22px; text-align:center; color:var(--a2-t2); font-size:15px; }
.a2-studio-assente .a2-studio-piede{ justify-content:center; padding-top:14px; }
/* Il passo 4 con il video parlato: il reel a sinistra, il riquadro «Il montaggio» a destra (mockup 41). */
.a2-studio-montaggio{ display:grid; grid-template-columns:minmax(0,1fr) 360px; gap:22px; align-items:start; }
.a2-pause{ display:flex; flex-direction:column; gap:10px; }
.a2-pause .a2-studio-k{ margin:0; }
.a2-pause-strato{ display:grid; grid-template-columns:30px minmax(0,1fr); gap:6px 10px; align-items:center; padding:10px 12px; border-radius:10px; background:var(--a2-surface); box-shadow:inset 0 0 0 1px var(--a2-line); }
.a2-pause-ico{ width:30px; height:30px; border-radius:8px; display:grid; place-items:center; background:#fde8e8; color:#a12626; }
.a2-pause-spento .a2-pause-ico{ background:var(--a2-sunken); color:var(--a2-t3); }
.a2-pause-ico .a2-ico{ width:16px; height:16px; }
.a2-pause-dice b{ display:block; font-weight:650; }
.a2-pause-dice small{ display:block; color:var(--a2-t2); font-size:12px; line-height:1.4; }
.a2-pause-az{ grid-column:2; display:flex; gap:8px; flex-wrap:wrap; }
.a2-pause-pannello{ display:flex; flex-direction:column; gap:12px; padding:12px; border-radius:10px; background:var(--a2-surface); box-shadow:inset 0 0 0 1px var(--a2-line); }
.a2-pause-pannello[hidden]{ display:none; }
.a2-pause-somma{ margin:0; padding:8px 10px; border-radius:8px; background:var(--a2-sunken); font-size:12.5px; }
.a2-pause-scelte{ display:flex; flex-direction:column; gap:8px; font-size:12.5px; }
.a2-pause-scelte label{ display:flex; gap:6px; align-items:center; }
.a2-pause-seg{ display:inline-flex; border:1px solid var(--a2-line); border-radius:99px; overflow:hidden; margin-left:4px; vertical-align:middle; }
.a2-pause-seg button{ all:unset; cursor:pointer; font-size:12px; padding:3px 10px; color:var(--a2-t2); }
.a2-pause-seg button[aria-pressed="true"]{ background:#1d2230; color:#fff; }
.a2-pause-seg button:focus-visible{ outline:2px solid var(--a2-acc); outline-offset:-2px; }
.a2-pause-trasc{ max-height:360px; overflow:auto; font-size:13px; line-height:2.1; }
.a2-pause-trasc p{ margin:0; }
.a2-pause-taglio{ display:block; font-size:10.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--a2-t3); margin-top:6px; }
/* Una pausa in rosso con la durata, un intercalare in viola; barrati quando si tolgono, grigi quando restano. */
.a2-pause-p{ all:unset; cursor:pointer; display:inline-flex; align-items:center; font-size:11px; font-weight:650; font-family:var(--a2-f-mono); padding:0 6px; border-radius:99px; background:#fde8e8; color:#a12626; vertical-align:middle; line-height:1.7; }
.a2-pause-p.a2-pause-ehm{ background:#efe6fb; color:#5b3a9e; font-family:inherit; }
.a2-pause-p[aria-pressed="true"]{ text-decoration:line-through; }
.a2-pause-p[aria-pressed="false"]{ background:var(--a2-sunken); color:var(--a2-t3); }
.a2-pause-p:disabled{ cursor:default; }
.a2-pause-p:focus-visible{ outline:2px solid var(--a2-acc); outline-offset:1px; }
.a2-pause-piede{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; justify-content:flex-end; padding-top:10px; border-top:1px solid var(--a2-line); }
.a2-pause-piede .a2-hint{ flex:1 1 100%; }
/* Sul fondo scuro dello Studio. */
.a2-studio .a2-pause-ico, .a2-studio .a2-pause-p{ background:#3a1a1c; color:#ff9b8f; }
.a2-studio .a2-pause-p.a2-pause-ehm{ background:#2a2040; color:#c6b0f5; }
.a2-studio .a2-pause-spento .a2-pause-ico, .a2-studio .a2-pause-p[aria-pressed="false"]{ background:var(--a2-sunken); color:var(--a2-t3); }
.a2-studio .a2-pause-seg button[aria-pressed="true"]{ background:#e6e9f0; color:#0e121b; }
/* Il montaggio del video parlato (mockup 41, scena 3): zoom, segni, sottotitoli. */
.a2-montaggio-zoom:not(.a2-pause-spento) .a2-pause-ico{ background:#ece8fe; color:#5a3fd0; }
.a2-montaggio-segni:not(.a2-pause-spento) .a2-pause-ico{ background:#fff3d6; color:#8a6100; }
.a2-montaggio-sub:not(.a2-pause-spento) .a2-pause-ico{ background:#e3f1ff; color:#1f5fa8; }
.a2-montaggio-sub .a2-pause-seg{ margin-left:0; }
.a2-montaggio-w{ all:unset; cursor:pointer; border-radius:4px; padding:0 2px; }
.a2-montaggio-w:hover{ background:var(--a2-sunken); }
.a2-montaggio-w[aria-pressed="true"]{ background:#7a5af5; color:#fff; }
.a2-montaggio-w:focus-visible{ outline:2px solid var(--a2-acc); outline-offset:1px; }
.a2-studio .a2-montaggio-zoom:not(.a2-pause-spento) .a2-pause-ico{ background:#2a2148; color:#c3b4ff; }
.a2-studio .a2-montaggio-segni:not(.a2-pause-spento) .a2-pause-ico{ background:#3a2f12; color:#f3d46b; }
.a2-studio .a2-montaggio-sub:not(.a2-pause-spento) .a2-pause-ico{ background:#13283f; color:#9cc8f5; }
.a2-studio .a2-pause-spento .a2-pause-ico{ background:var(--a2-sunken); color:var(--a2-t3); }
@media (max-width:1180px){
  .a2-studio-corpo{ grid-template-columns:minmax(0,1fr); }
  .a2-studio-rail{ flex-direction:row; flex-wrap:wrap; border-right:0; border-bottom:1px solid var(--a2-line); }
  .a2-studio-rail-k, .a2-studio-altri{ display:none; }
  .a2-studio-passo{ grid-template-columns:22px auto; }
  .a2-studio-passo small{ display:none; }
  .a2-studio-montaggio{ grid-template-columns:minmax(0,1fr); }
}
@media (max-width:820px){
  .a2-studio-due{ grid-template-columns:minmax(0,1fr); }
  .a2-studio-crumb, .a2-studio-marca span{ display:none; }
  .a2-studio-palco{ padding:16px; }
  .a2-studio-top{ gap:8px 10px; padding:8px 12px; flex-wrap:wrap; }
  .a2-studio-chip{ min-width:0; max-width:100%; overflow:hidden; text-overflow:ellipsis; }
}
/* L'ingresso dallo Studio: «Apri nello Studio» con il quadratino d'oro, e la riga del piano che si accende al ritorno. */
.a2-studio-apri{ display:inline-flex; align-items:center; gap:6px; }
.a2-studio-apri i{ width:16px; height:16px; border-radius:5px; background:linear-gradient(135deg,#F3D46B,#C9A227); display:inline-grid; place-items:center; font-style:normal; color:#0e121b; }
.a2-studio-apri i .a2-ico{ width:10px; height:10px; }
tr.a2-studio-appena td{ animation:a2-studio-lampo 2.4s ease-out 1; }
@keyframes a2-studio-lampo{ 0%, 30%{ background:#fff6d6; } 100%{ background:transparent; } }
@media (prefers-reduced-motion:reduce){ tr.a2-studio-appena td{ animation:none; background:#fff6d6; } }

/* Nome di sistema: il lucchetto accanto al nome negli elenchi (NomiDiSistema). */
.a2-nome-sistema { display:inline-flex; vertical-align:middle; margin-left:4px; color:var(--a2-t3); }

/* La scheda della direzione creativa di un template reel (mockup 56): nella pagina del template e nella tessera del Brand. */
.a2-dir{ display:flex; flex-direction:column; gap:9px; margin:0 0 12px; min-width:0; }
.a2-dir-nome{ font-size:11px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--a2-ar-contenuti); }
.a2-dir-frase{ font-size:13.5px; line-height:1.5; color:var(--a2-t1); margin:0; }
.a2-dir dl{ display:grid; grid-template-columns:96px minmax(0,1fr); gap:5px 10px; margin:0; font-size:12.5px; line-height:1.45; }
.a2-dir dt{ color:var(--a2-t3); }
.a2-dir dd{ margin:0; color:var(--a2-t2); overflow-wrap:anywhere; }
.a2-energia{ display:inline-flex; gap:3px; vertical-align:-1px; margin-right:6px; }
.a2-energia i{ width:9px; height:9px; border-radius:50%; background:var(--a2-line-str); }
.a2-energia i.on{ background:var(--a2-ar-contenuti); }
.a2-perche{ background:var(--a2-ar-contenuti-50); border-radius:8px; padding:8px 10px; font-size:12.5px; line-height:1.5; color:var(--a2-t2); overflow-wrap:anywhere; }
/* La lettura dell'azienda e «Come si muove»: la partitura della direzione (mockup 57). */
.a2-lettura{ background:var(--a2-surface); border:1px solid var(--a2-line); border-radius:12px; padding:12px 16px 14px; margin:0 0 14px; }
.a2-lettura-hd{ display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; font-size:13.5px; margin-bottom:10px; }
.a2-lettura-hd .a2-ico{ width:16px; height:16px; color:var(--a2-ar-contenuti); }
.a2-lettura-hd span{ font-size:12px; color:var(--a2-t3); }
.a2-lettura dl{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px 16px; margin:0; }
.a2-lettura dt{ font-size:10.5px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--a2-t3); margin-bottom:3px; }
.a2-lettura dd{ margin:0; font-size:12.5px; line-height:1.5; color:var(--a2-t2); overflow-wrap:anywhere; }
.a2-partitura{ border-top:1px solid var(--a2-line); padding:10px 0 2px; }
.a2-partitura summary{ display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 10px; cursor:pointer; list-style:none; padding:2px 0 8px; }
.a2-partitura summary::-webkit-details-marker{ display:none; }
.a2-partitura summary::before{ content:"›"; display:inline-block; width:10px; color:var(--a2-t3); transition:transform .15s; }
.a2-partitura[open] summary::before{ transform:rotate(90deg); }
.a2-partitura summary b{ font-size:13.5px; }
.a2-partitura summary span{ font-size:12px; color:var(--a2-t3); }
.a2-tessere{ display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px; padding-bottom:10px; }
.a2-tess{ margin:0; border:1px solid var(--a2-line); border-radius:10px; overflow:hidden; background:var(--a2-surface); display:flex; flex-direction:column; }
.a2-tess canvas{ display:block; width:100%; aspect-ratio:1; background:var(--a2-sunken); }
.a2-tess figcaption{ padding:7px 9px 9px; display:flex; flex-direction:column; gap:2px; font-size:11.5px; line-height:1.45; color:var(--a2-t2); overflow-wrap:anywhere; }
.a2-tess figcaption b{ font-size:12.5px; color:var(--a2-t1); }
.a2-tess-ruoli{ color:var(--a2-ar-contenuti); font-weight:600; font-size:11px; }
.a2-tess-perche{ color:var(--a2-t3); }
.a2-firma{ border-color:var(--a2-acc); box-shadow:0 0 0 1px var(--a2-acc); }
.a2-firma-k{ align-self:flex-start; font-size:10px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--a2-surface); background:var(--a2-acc); border-radius:999px; padding:1px 7px; }
.a2-perche b{ color:var(--a2-t1); font-weight:600; }

/* Le slide di una proposta reel si approvano accanto al reel (mockup 57, tavola 2): il reel fermo a sinistra, l'elenco a destra. */
.a2-rcp-nota{ margin:0 0 12px; }
.a2-rcp-corpo{ display:grid; grid-template-columns:minmax(0,290px) minmax(0,1fr); gap:20px; align-items:start; }
.a2-rcp-reel{ position:sticky; top:96px; display:flex; flex-direction:column; align-items:center; gap:6px; padding:16px 16px 10px; border-radius:12px; background:var(--a2-sunken); }
.a2-rcp-palco{ width:250px; }
.a2-rcp-scena{ margin:0; min-height:1.4em; font-size:12px; font-weight:600; color:var(--a2-t2); font-variant-numeric:tabular-nums; text-align:center; overflow-wrap:anywhere; }
.a2-rcp-stato:empty{ display:none; }
.a2-rcp-stato, .a2-rcp-vuoto, .a2-rcp-reel-nota{ margin:0; font-size:11.5px; line-height:1.5; }
.a2-rcp-elenco{ min-width:0; }
.a2-rcp-lista{ display:flex; flex-direction:column; gap:10px; }
.a2-rcp-lista .a2-rc-sl{ grid-template-columns:96px minmax(0,1fr); cursor:pointer; transition:box-shadow .15s, border-color .15s; }
.a2-rcp-lista .a2-rc-sl.a2-rcp-scartata{ cursor:default; }
.a2-rcp-lista .a2-rc-cornice{ padding:6px 0; }
.a2-rcp-lista .a2-reel-gal{ width:76px; }
.a2-rcp-lista .a2-rc-agg-t{ min-height:0; }
.a2-rc-sl.a2-rcp-approvata{ border-color:var(--a2-acc); box-shadow:0 0 0 1px var(--a2-acc); }
.a2-rc-sl.a2-rcp-in-onda{ border-color:var(--a2-ar-contenuti); box-shadow:0 0 0 2px var(--a2-ar-contenuti); }
.a2-rcp-scartata .a2-rc-cornice, .a2-rcp-scartata .a2-rc-hd, .a2-rcp-scartata .a2-rc-tags, .a2-rcp-scartata .a2-rc-quando, .a2-rcp-scartata .a2-rcp-muove{ opacity:.4; }
.a2-rcp-num{ display:inline-grid; place-items:center; min-width:20px; height:20px; padding:0 5px; border-radius:999px; background:var(--a2-sunken); color:var(--a2-t2); font-size:11px; font-weight:700; font-variant-numeric:tabular-nums; margin-right:2px; }
.a2-rcp-in-onda .a2-rcp-num{ background:var(--a2-ar-contenuti); color:var(--a2-surface); }
.a2-rcp-nuova{ font-size:10.5px; font-weight:700; border-radius:999px; padding:1px 7px; background:var(--a2-acc-50); color:var(--a2-acc-h); }
.a2-rcp-muove{ display:flex; flex-wrap:wrap; align-items:center; gap:4px; font-size:11.5px; color:var(--a2-t3); }
.a2-rcp-muove[hidden]{ display:none; }
.a2-rcp-muove i{ font-style:normal; margin-right:2px; }
.a2-rcp-chip{ font-size:11px; padding:1px 8px; border-radius:999px; background:var(--a2-sunken); color:var(--a2-t2); }
.a2-rcp-esito{ display:inline-flex; align-items:center; gap:4px; font-size:12px; font-weight:600; color:var(--a2-acc-h); }
.a2-rcp-esito-no{ color:var(--a2-t3); }
/* «Correggi» su una slide: il riquadro con che cosa correggere e il costo, poi la slide «corretta» con «Torna a com'era». */
.a2-rcp-corretta{ font-size:10.5px; font-weight:700; border-radius:999px; padding:1px 7px; background:var(--a2-obs-100); color:var(--a2-obs-700); }
.a2-rcp-corr{ display:flex; flex-direction:column; gap:6px; padding:10px 12px; border-radius:8px; background:var(--a2-sunken); cursor:default; }
.a2-rcp-corr .a2-area{ min-height:52px; }
.a2-rcp-corr-spiega{ font-size:11.5px; line-height:1.5; }
.a2-rcp-corr-az{ display:flex; flex-wrap:wrap; gap:6px; }
.a2-rcp-corr-stato:empty{ display:none; }
.a2-rcp-corr-stato{ margin:0; font-size:11.5px; }
.a2-rcp-corr-nota{ font-size:11.5px; line-height:1.5; color:var(--a2-t2); overflow-wrap:anywhere; }
.a2-rcp-corr-nota .a2-lnk{ font-size:11.5px; }
.a2-rcp-ft{ display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px; margin-top:16px; }
.a2-rcp-conta{ font-size:13px; font-weight:600; color:var(--a2-t2); font-variant-numeric:tabular-nums; }
@media (max-width:820px){
  .a2-rcp-corpo{ grid-template-columns:minmax(0,1fr); }
  .a2-rcp-reel{ position:static; }
}

/* Il prompt d'aiuto di un asset di setup (mockup 52): l'avviso se il suggerito genera anche un asset suo, e il link per crearne uno. */
.a2-avviso-aiuto{ display:flex; gap:8px; align-items:flex-start; background:#fff7ed; border:1px solid #f5d9b8; color:#7a4a17; border-radius:8px; padding:9px 11px; font-size:13px; margin-top:12px; max-width:560px; }
.a2-avviso-aiuto .a2-ico{ flex:none; width:15px; height:15px; margin-top:2px; }
.a2-lnk-crea{ display:inline-flex; align-items:center; gap:6px; margin-top:12px; font-size:13.5px; }
.a2-lnk-crea .a2-ico{ width:15px; height:15px; }