/* Pagine come il CRM Futura (js/pagine.js, richiesta di Giuseppe del 26/10). Misure da crm.css: testata .top (.tile 48 px,
   titolo 28 px, sottotitolo 13-14 px, a destra .tr), card .card (raggio 18, bordo --g-line, ombra leggera, 20 px), righe .row
   con 14 px fra le card. Fondo grigio chiaro (--g-bg), card bianche (--g-solid), un solo accento (--acc).
   Le regole forti usano #sotto davanti: i fogli delle sezioni arrivano dopo questo e hanno classi uguali. */
:root{--pc-gap:14px;--pc-pad:20px;--pc-ombra:0 1px 2px rgba(14,20,17,.06),0 6px 18px rgba(14,20,17,.05)}
[data-tema=scuro]{--pc-ombra:none}

/* ---------- la pagina: niente colonna stretta in mezzo ---------- */
html.guscio #sotto>section.pc{max-width:none;margin:0;padding:12px clamp(16px,1.8vw,28px) 56px 0;--pc-solido:var(--g-solid)}
html.guscio[data-pagine-larghezza=centrata] #sotto>section.pc{max-width:1360px;margin:0 auto}
/* Le sezioni con un contenitore unico (.energia, .appalti…) non stringono più la pagina. */
#sotto>section.pc>:not(.pc-testa):not(.pc-griglia):not(.pc-resto){max-width:none}

/* ---------- testata comune (crm.css .top .pg .tile .tr) ---------- */
#sotto .pc-testa{position:relative;display:flex;align-items:center;justify-content:space-between;gap:16px;margin:6px 4px 18px;max-width:none}
.pc-pg{display:flex;align-items:flex-start;gap:14px;min-width:0}
.pc-tile{width:48px;height:48px;flex:none;display:grid;place-items:center;border:1px solid var(--g-line);border-radius:14px;background:var(--g-fill2);color:var(--acc)}
.pc-tile svg.i{width:24px;height:24px}
.pc-pg-t{min-width:0}
#sotto .pc-testa .pc-occhiello{margin:0 0 2px;max-width:none;font-size:calc(12.5px * var(--kt));font-weight:600;letter-spacing:.02em;text-transform:none;line-height:1.3;color:var(--mu)}
#sotto .pc-testa .pc-h{margin:0;max-width:none;font-size:calc(clamp(22px,1.1vw + 10px,28px) * var(--kt));line-height:1.18;font-weight:600;letter-spacing:-.01em;text-wrap:balance;color:var(--tx)}
#sotto .pc-testa .pc-sotto{margin:3px 0 0;max-width:110ch;font-size:var(--t1);line-height:1.45;color:var(--mu);text-wrap:pretty}
#sotto .pc-testa .pc-extra{display:flex;flex-wrap:wrap;align-items:center;gap:4px 14px;margin-top:6px}
#sotto .pc-testa .pc-comandi{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:10px}
#sotto .pc-testa .pc-comandi>*{margin:0}
#sotto .pc-testa .pc-extra>*{margin:0;max-width:110ch;font-size:calc(12.5px * var(--kt));line-height:1.4;color:var(--mu)}
.pc-tr{display:flex;align-items:center;gap:10px;flex:none;color:var(--mu);font-size:var(--t1);white-space:nowrap}
.pc-ancora{position:relative}
.pc-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:36px;padding:0 14px;border:1px solid var(--g-line);border-radius:var(--r-pill);background:var(--g-solid);color:var(--tx);font:inherit;font-size:var(--t1);font-weight:600;white-space:nowrap;cursor:pointer;transition:border-color .15s,background-color .15s}
.pc-btn svg.i{width:17px;height:17px;flex:none}
@media (hover:hover) and (pointer:fine){.pc-btn:hover{border-color:var(--g-ctl)}}
.pc-btn[aria-expanded="true"]{border-color:var(--acc);background:var(--pill);color:var(--on-pill)}
.pc-btn:focus-visible,.pc-link:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
.pc-data{font-weight:600}
.pc-link{padding:0;border:0;background:none;color:var(--acc);font:inherit;font-weight:600;text-decoration:underline;text-underline-offset:3px;cursor:pointer}

/* Riquadri sotto i pulsanti: Personalizza della pagina e lingua. */
.pc-pop{position:absolute;right:0;top:calc(100% + 8px);z-index:30;min-width:220px;max-width:min(360px,calc(100vw - 24px));padding:14px;border:1px solid var(--g-line);border-radius:16px;background:var(--g-solid);box-shadow:var(--ombra-pop);color:var(--tx);white-space:normal;text-align:left}
.pc-pop-pers{width:340px;max-height:min(70vh,560px);overflow-y:auto;overscroll-behavior:contain}
#sotto .pc-pop-t{font-size:var(--t2);font-weight:600;margin:0 0 4px}
#sotto .pc-pop-s{margin:14px 0 6px;font-size:calc(12.5px * var(--kt));font-weight:600;color:var(--mu)}
.pc-seg{display:flex;gap:6px}
.pc-seg .pers-sc{flex:1 1 0;justify-content:center}
.pc-pop-lista{list-style:none;margin:0;padding:0;display:grid}
.pc-pop-lista li{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:44px;border-top:1px solid var(--g-line);font-size:var(--t1)}
.pc-pop-lista li:first-child{border-top:0}
.pc-pop-lista li>span{min-width:0;overflow-wrap:anywhere}
.pc-pop-az{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.pc-pop-az .pc-btn{white-space:normal;text-align:center;line-height:1.2;min-height:40px}
.pc-pop-lingua{display:grid;gap:2px;min-width:200px;padding:6px}
.pc-pop-lingua button{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:40px;padding:0 12px;border:0;border-radius:10px;background:none;color:var(--tx);font:inherit;font-size:var(--t1);text-align:left;cursor:pointer}
.pc-pop-lingua button span{color:var(--mu);font-weight:600}
.pc-pop-lingua button[aria-checked="true"]{background:var(--pill);color:var(--on-pill)}
.pc-pop-lingua button[aria-checked="true"] span{color:inherit}
@media (hover:hover) and (pointer:fine){.pc-pop-lingua button:not([aria-checked="true"]):hover{background:var(--g-fill2)}}

/* ---------- griglia di card (crm.css .row .two .card) ---------- */
/* Se il contenitore della sezione è una griglia (es. .num-gruppi) la griglia delle card prende tutte le sue colonne. */
#sotto .pc-griglia{display:flex;flex-direction:column;gap:var(--pc-gap);max-width:none;margin:0;grid-column:1/-1;width:100%;min-width:0}
.pc-riga{display:flex;flex-direction:column;gap:var(--pc-gap);min-width:0}
.pc-riga[hidden],.pc-col[hidden]{display:none}
.pc-col{display:flex;flex-direction:column;gap:var(--pc-gap);min-width:0}
@media (min-width:1100px){
  .pc-riga{display:grid;align-items:start}
  .pc-r-8-4{grid-template-columns:minmax(0,8fr) minmax(0,4fr)}
  .pc-r-4-8{grid-template-columns:minmax(0,4fr) minmax(0,8fr)}
  .pc-r-7-5{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
  .pc-r-5-7{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
  .pc-r-6-6{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pc-r-12,.pc-riga.pc-solo{grid-template-columns:minmax(0,1fr)}
}
#sotto .pc-card{position:relative;min-width:0;max-width:none;margin:0;padding:var(--pc-pad);border:1px solid var(--g-line);border-radius:18px;background:var(--g-solid);box-shadow:var(--pc-ombra);--sotto-margine:var(--pc-pad);--pc-carta:var(--g-solid)}
.pc-card[hidden],.pc-card.pc-vuota{display:none}
.pc-card.pc-avviso{border-color:color-mix(in srgb,var(--warn) 55%,var(--g-line));background:color-mix(in srgb,var(--warn) 5%,var(--g-solid))}
.pc-card.pc-forte{border-color:color-mix(in srgb,var(--err) 50%,var(--g-line))}
.pc-card.pc-tenue{background:var(--sink);box-shadow:none}
.pc-ct{margin:0 0 12px}
/* Titolo della card: quello del blocco, più piccolo (crm.css .ch), con il contatore come «Da fare 3». */
#sotto .pc-card .pc-titolo{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:0 0 12px;padding:0;border:0;max-width:none;font-size:calc(clamp(17px,.35vw + 12px,19px) * var(--kt));line-height:1.3;font-weight:600;letter-spacing:-.005em;text-transform:none;text-wrap:balance;color:var(--tx)}
#sotto .pc-card .pc-titolo.pc-nuovo{margin:0}
#sotto .pc-card .pc-titolo.pc-visibile{position:static;width:auto;height:auto;clip:auto;clip-path:none;overflow:visible;white-space:normal;grid-column:1/-1}
/* Card «nuda»: i blocchi hanno già la loro cornice (es. le card dei progetti), la card tiene solo il posto nella griglia. */
#sotto .pc-card.pc-nuda{padding:0;border:0;background:none;box-shadow:none;--pc-carta:var(--g-bg)}
#sotto .pc-card.pc-nuda>.pc-cb{--g-solid:var(--pc-solido)}
.pc-n{display:inline-grid;place-items:center;min-width:24px;height:24px;padding:0 8px;border:1px solid var(--g-line);border-radius:var(--r-pill);background:var(--g-solid);color:var(--mu);font-size:calc(12.5px * var(--kt));font-weight:600;letter-spacing:0;font-variant-numeric:tabular-nums;line-height:1}
/* Dentro la card i riquadri delle sezioni (fondo --g-solid) diventano grigi chiari, come i .kpi del CRM; la card è un
   contenitore per le @container delle sezioni (nessuna sezione usa position:fixed, che la card terrebbe dentro di sé). */
#sotto .pc-cb{min-width:0;container-type:inline-size;--g-solid:color-mix(in srgb,var(--tx) 3%,var(--pc-carta))}
/* I blocchi dentro la card: niente margini, linee e larghezze massime pensate per la pagina lunga. */
#sotto .pc-cb>*{margin-top:0;margin-bottom:0;max-width:none;border-top-width:0;padding-top:0}
#sotto .pc-cb>*+*:not([hidden]){margin-top:16px}
#sotto .pc-cb>.pc-piatto{border:0;border-radius:0;background:none;box-shadow:none;padding:0}
#sotto .pc-cb>[hidden]{display:none}

/* Quello che nessuna card prende (avvisi legali, fonti, note finali): riga piccola sotto la griglia. */
#sotto>section.pc>.pc-resto:not([hidden]),#sotto>section.pc>*>.pc-resto:not([hidden]){margin-top:16px;margin-left:4px;max-width:120ch}
.pc-spente{margin:16px 4px 0;font-size:var(--t1);color:var(--mu)}

/* ---------- da 760 a 1100: una colonna di card ---------- */
@media (max-width:1099px){
  html.guscio #sotto>section.pc{padding-right:clamp(12px,2vw,24px)}
}
/* ---------- telefono: una colonna, testata compatta ---------- */
@media (max-width:820px){
  html.guscio #sotto>section.pc{padding:10px 10px 24px}
  #sotto .pc-testa{flex-direction:column;align-items:stretch;gap:10px;margin:2px 2px 12px}
  .pc-pg{gap:12px;align-items:flex-start}
  .pc-tile{width:40px;height:40px;border-radius:12px}
  .pc-tile svg.i{width:21px;height:21px}
  #sotto .pc-testa .pc-h{font-size:calc(21px * var(--kt))}
  #sotto .pc-testa .pc-sotto{font-size:calc(14px * var(--kt))}
  .pc-tr{flex-wrap:wrap;gap:8px;white-space:normal}
  .pc-btn{min-height:44px}
  .pc-data{order:3;flex-basis:100%;font-size:calc(13px * var(--kt))}
  .pc-tr>.pc-ancora:first-child .pc-pop{left:0;right:auto}
  :root{--pc-pad:16px;--pc-gap:12px}
  #sotto .pc-card{border-radius:16px}
  .pc-pop-pers{width:min(340px,calc(100vw - 24px))}
  /* Da telefono la pagina è sempre una colonna: la larghezza non serve. */
  .pc-pop-pers .pc-larg{display:none}
}
@media (prefers-reduced-motion:reduce){.pc-btn{transition:none}}