/* ══════════════════════════════════════════════════════════════════════════
   Flipping Club — BASE (nuovo design, PR 1, 17-set-2026)
   ══════════════════════════════════════════════════════════════════════════
   Reset, tipografia e componenti base sul linguaggio del prototipo
   (OUTPUTS/FC-Mockup-iOS). Spec: docs/superpowers/specs/2026-09-17-nuovo-design-design.md §4.5.

   Regole (tests/base-css.test.js le difende):
   - Solo var(--…) per i colori: nessun hex scritto a mano.
   - Nessun !important salvo [hidden] e i campi a 16 px da telefono (in coda: il
     commento lì spiega perché servono).
   - font-family dichiarato su body, .addr e codice, e basta.
   - I nomi di classe esistenti (.btn, .fg, .card, .modal-*) si CONSERVANO.
     Nomi nuovi solo per .chip, .scala, .semaforo.
   - Fino alla PR 15 questo file si caricava PRIMA di style.css, che a parità di
     specificità vinceva: qui non entravano, su selettori vecchi, proprietà che
     style.css non aveva già (si sarebbero sommate: es. un padding su .card a
     .card-b). Card e tabelle, dalla 13a, sono definite qui per intero (la loro
     regola era stata cancellata da style.css). Le regole comuni di style.css, tolto nel
     Task 2 della PR 15, stanno in coda a questo file.
   - Le misure di .modal stanno sotto @media screen: @media print in stampa.css
     stampa la Decisione dal modale e un max-height la troncherebbe.
   - Mobile-first: le @media stanno accanto al componente.
   - design-02: gli avvisi e le sovrapposizioni di sistema hanno qui anche la
     forma, perché le regole vecchie sono state cancellate da style.css.
   - design-13a: lo stesso per card, tabelle, tag, riquadri numerici e spinner
     (CARDS, TABLE, STATS ROW, i due blocchi RESPONSIVE e lo spinner di LEARNING
     cancellati da style.css). In stampa comanda ancora @media print, da css/stampa.css (13b).
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Reset e tipografia ─────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size:15px;line-height:20px;
  color:var(--fc-label);background:var(--fc-bg);
  -webkit-font-smoothing:antialiased;
}
code,kbd,pre{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.92em}
a{color:var(--fc-accent)}
/* indirizzi: l'unico posto dove resta un font di brand */
.addr{font-family:"Playfair Display",Georgia,serif;font-style:italic;font-weight:500;font-size:22px;line-height:28px}
[hidden]{display:none !important} /* !important ammesso (l'altro è sui campi a 16 px da telefono, in coda): hidden vince sempre, anche sui display inline scritti nel JS */
:focus-visible{outline:2px solid var(--fc-accent);outline-offset:2px}
::placeholder{color:var(--fc-label3)}

/* Regola dei componenti (tests/base-css.test.js): su un selettore che ha una regola anche
   nel blocco in coda (le regole che stavano in style.css, PR 15), qui entra solo una proprietà
   che quella ha già (anche con valore diverso) o colore/font/altezza minima: il resto si somma
   invece di sostituire. */

/* ── Bottoni ────────────────────────────────────────────────────────────── */
.btn,.hdr-btn{
  min-height:36px;border-radius:var(--rs);
  background:var(--fc-card);color:var(--fc-label);
  font:inherit;font-weight:600;cursor:pointer;
  transition:background .15s,opacity .15s;
}
.btn-green,.hdr-btn-primary{background:var(--fc-accent-fill);color:var(--fc-on-accent)}
/* Hover solo col puntatore: da telefono un bottone toccato non resta grigio (lo :hover sticky di iOS). */
@media (hover:hover){
  .btn:hover,.hdr-btn:hover{background:var(--fc-fill)}
  .btn-green:hover,.hdr-btn-primary:hover{background:var(--fc-accent-fill)}
}
.btn-sm{min-height:28px}
@media (hover:none){.btn,.hdr-btn{min-height:44px}.btn-sm{min-height:36px}}

/* ── Campi ──────────────────────────────────────────────────────────────── */
.fg label{color:var(--fc-label2)}
.fg input,.fg select,.fg textarea{font:inherit;color:var(--fc-label);background:var(--fc-card);min-height:36px}
.fg input:focus,.fg select:focus,.fg textarea:focus{border-color:var(--fc-accent);outline:none;box-shadow:0 0 0 3px var(--fc-accent-soft)}
/* `screen and`: senza, il blocco entra anche in stampa (la pagina A4 è larga
   741px, sotto la soglia) e la Decisione si stampa dal modale. */
@media screen and (max-width:768px){
  /* .fr/.fr3 a colonna singola stanno in coda a questo file (erano in style.css):
     qui sarebbero morte, le batterebbe per ordine la loro regola senza @media,
     anche lei in coda (stessa specificità). */
  /* 16px: sotto, iOS zooma il campo al focus. Specificità (0,4,1) batte le
     regole dei campi .fg in coda (erano in style.css), senza !important. */
  .fg input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  .fg select,.fg textarea{font-size:16px;min-height:44px}
}

/* ── Card (design-13a: la forma intera sta qui, CARDS di style.css è cancellata) ──
   Testata chiara come la card Riunione della scheda e le card della Home (decisione 1): fondo --fc-bg,
   filetto --fc-sep, titolo in maiuscoletto --fc-label, la parola in corsivo --fc-label2 senza Playfair
   (in questo file il font sta solo su body, .addr e codice). Era nera (#1a1a1a) col verde chiaro, che su
   fondo chiaro fa 2,1:1. Niente ombra a riposo (spec 4.5); overflow e position restano: tabelle e figli
   assoluti ci contano. .op-riu-card (area-opmodal.css) ridichiara la sua testata e vince per specificità. */
.card{position:relative;overflow:hidden;background:var(--fc-card);color:var(--fc-label);border:1px solid var(--fc-sep);border-radius:var(--r)}
.card-h{display:flex;align-items:center;gap:var(--sp-2);padding:var(--sp-3) var(--sp-4);border-bottom:1px solid var(--fc-sep);background:var(--fc-bg);color:var(--fc-label)}
.card-h h2{margin:0;font-size:13px;line-height:18px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--fc-label)}
.card-h h2 em{font-style:italic;font-weight:600;letter-spacing:0;text-transform:none;color:var(--fc-label2)}
.card-icon{display:flex;flex:none;align-items:center;justify-content:center;width:28px;height:28px;border-radius:var(--rs);background:var(--fc-accent-soft);color:var(--fc-accent);font-size:14px}
.card-b{padding:var(--sp-4)}

/* ── Tabelle e tag (design-13a: la forma intera sta qui, TABLE di style.css è cancellata) ──
   Testata senza fondo (era nera, #1a1a1a), etichette 11 px in maiuscoletto (erano .58rem, 9,3 px) nel
   colore --fc-label2 dato al thead: la cella lo eredita, così una riga di testata col suo colore scritto nel
   JS (stato operazioni e planimetrie avevano fondo scuro e testo bianco) resta leggibile. Su th niente bordo né
   interlinea: la presentazione del deck in app (.dp-table th, area-deck.css dalla 13b) non li ridichiara,
   e dentro .deck-present queste regole generiche le toglie il revert in testa al cruscotto. Righe col
   separatore; hover solo col puntatore e senza transizione. Le tabelle con una classe loro (.op-tab,
   #listaTable, .cn-tabella, .occ-table, .op-sto-table, .dp-table) ridichiarano quello che serve e vincono per
   specificità. In stampa comanda ancora il blocco @media print di css/stampa.css (testata verde, 6-8 pt). */
table{width:100%;border-collapse:collapse}
thead{background:transparent;color:var(--fc-label2)}
th{padding:var(--sp-2) var(--sp-3);font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;text-align:left;white-space:nowrap}
tbody tr{border-bottom:1px solid var(--fc-sep)}
@media (hover:hover){tbody tr:hover{background:var(--fc-bg)}}
td{padding:var(--sp-2) var(--sp-3);font-size:13px}
td.price{font-size:14px;font-weight:700;color:var(--fc-label)}
/* Note <small> nelle celle (Confronto «richiesto», Ditte «(disattivata)», Utenti «(tu)»): con la cella a 13 px
   fissi scendevano a 10,83 px da telefono (prima 12,98); una regola sola le tiene a 11. */
td small{font-size:11px}
/* Tag (tipologia, città: Libro Mastro, comparabili della scheda): 11 px, la città su --fc-fill (era nera col
   verde chiaro), la tipologia sull'accento leggero come i chip. */
.tag{display:inline-block;padding:1px var(--sp-2);border-radius:var(--rs);font-size:11px;line-height:16px;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.tag-city{background:var(--fc-fill);color:var(--fc-label)}
.tag-tipo{background:var(--fc-accent-soft);color:var(--fc-accent)}

/* ── Riquadri numerici (design-13a: STATS ROW e i due blocchi RESPONSIVE di style.css sono cancellati) ──
   Libro Mastro, Cassa, Calendario, Cantieri, Analytics, Mappa, Deck, scheda. Senza ombra col filetto
   --fc-sep (decisione 4), valore 24 px --fc-accent (era 1.6rem: 25,6 px da computer, 30,4 da telefono),
   etichetta 11 px --fc-label2 (4b). Due colonne sotto i 768, una sotto i 480, come prima ma solo a schermo:
   in stampa decide il blocco @media print di css/stampa.css (!important). Le regole con ambito (.op-storico,
   #casafariResults, .cn-stat, .stat-val.op-stat-*) vincono per specificità, come prima. */
.stats-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:var(--sp-2);margin-bottom:var(--sp-4)}
.stat-card{padding:var(--sp-3);border:1px solid var(--fc-sep);border-radius:var(--rs);background:var(--fc-card);color:var(--fc-label);text-align:center}
.stat-val{font-size:24px;line-height:1;font-weight:800;color:var(--fc-accent);font-variant-numeric:tabular-nums}
.stat-lbl{margin-top:var(--sp-1);font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--fc-label2)}
@media screen and (max-width:768px){.stats-row{grid-template-columns:1fr 1fr}}
@media screen and (max-width:480px){
  .stats-row{grid-template-columns:1fr}
  .stat-card{padding:var(--sp-2)}
  .stat-val{font-size:19px}
}

/* ── Indicatore di caricamento (design-13a, era in LEARNING di style.css) ──
   Lo usano nav.js (moduli e mappa), gmail.js, email-suggestions.js, opmodal.js, learning.js. I keyframes
   (lnSpin) stanno in area-shell.css con gli altri. Col movimento ridotto continua a girare: è un indicatore
   di attività, non una decorazione, e fermo sembrerebbe bloccato (decisione 7). */
.ln-spinner{width:24px;height:24px;margin:0 auto;border:3px solid var(--fc-rail);border-top-color:var(--fc-accent);border-radius:50%;animation:lnSpin .6s linear infinite}

/* ── Chip, pallino di stato ─────────────────────────────────────────────── */
.chip{display:inline-flex;align-items:center;gap:var(--sp-1);min-height:24px;padding:0 var(--sp-2);border-radius:var(--r-pill);background:var(--fc-fill);color:var(--fc-label);font-size:13px;line-height:18px;font-weight:500;white-space:nowrap}
.chip-accent{background:var(--fc-accent-soft);color:var(--fc-accent)}
.status-dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:4.8px;background:var(--fc-rail)}
.st-segnalazione{background:var(--st-segnalazione)}
.st-analisi{background:var(--st-analisi)}
.st-proposta{background:var(--st-proposta)}
.st-in_attesa_docs{background:var(--st-in_attesa_docs)}
.st-due_diligence{background:var(--st-due_diligence)}
.st-due_diligence_conclusa{background:var(--st-due_diligence_conclusa)}
.st-preliminare{background:var(--st-preliminare)}
.st-rogito{background:var(--st-rogito)}
.st-cantiere{background:var(--st-cantiere)}
.st-in_vendita{background:var(--st-in_vendita)}
.st-completata{background:var(--st-completata)}
.st-scartata{background:var(--st-scartata)}

/* ── Semaforo: sempre pallino PIÙ parola (HIG, inclusive color) ─────────── */
.semaforo{display:inline-flex;align-items:center;gap:var(--sp-2);font-size:13px;line-height:18px;font-weight:600}
.semaforo::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--fc-rail);flex:none}
.semaforo[data-level="ok"]{color:var(--fc-ok)}.semaforo[data-level="ok"]::before{background:var(--fc-ok)}
.semaforo[data-level="warn"]{color:var(--fc-warn)}.semaforo[data-level="warn"]::before{background:var(--fc-warn)}
.semaforo[data-level="danger"]{color:var(--fc-danger)}.semaforo[data-level="danger"]::before{background:var(--fc-danger)}

/* ── Scala degli 11 stati: la firma del design ──────────────────────────── */
/* markup da window.scalaHtml(status): <span class="scala" data-n="K"><i></i></span>
   K = indice dello stato (0 Segnalazione … 10 Completata): i primi K+1 segmenti
   sono pieni. Scartata: data-n="-1" e .scala-scartata. Sconosciuto: .scala-na. */
.scala{display:inline-flex;gap:2px;height:6px;width:100%;max-width:220px;vertical-align:middle}
.scala i{flex:1 1 0;min-width:4px;border-radius:2px;background:var(--fc-rail)}
.scala[data-n="0"] i:nth-child(-n+1),
.scala[data-n="1"] i:nth-child(-n+2),
.scala[data-n="2"] i:nth-child(-n+3),
.scala[data-n="3"] i:nth-child(-n+4),
.scala[data-n="4"] i:nth-child(-n+5),
.scala[data-n="5"] i:nth-child(-n+6),
.scala[data-n="6"] i:nth-child(-n+7),
.scala[data-n="7"] i:nth-child(-n+8),
.scala[data-n="8"] i:nth-child(-n+9),
.scala[data-n="9"] i:nth-child(-n+10),
.scala[data-n="10"] i:nth-child(-n+11){background:var(--fc-accent-fill)}
.scala-scartata i{background:var(--fc-danger);opacity:.3}
.scala-na i{background:var(--fc-rail);opacity:.5}

/* ── Modale e fogli (si aprono con .open, come fa opmodal.js) ───────────── */
.modal-overlay{position:fixed;background:var(--fc-scrim);display:none;align-items:center;justify-content:center;z-index:1000}
.modal-overlay.open{display:flex}
.modal{background:var(--fc-card);color:var(--fc-label);border-radius:var(--r);box-shadow:var(--fc-shadow)}
.modal-top{display:flex;align-items:center;justify-content:space-between}
.modal-title{font-weight:600}
.modal-close{border:0;background:var(--fc-fill);color:var(--fc-label);cursor:pointer}
/* Bottone-icona 44×44 (hamburger, chiudi pannello, chiudi scorciatoie, esci):
   una forma sola; chi lo usa aggiunge solo colore o dimensione del glifo. */
.btn-icon{display:inline-flex;align-items:center;justify-content:center;flex:none;width:44px;height:44px;padding:0;border:0;border-radius:var(--rs);background:none;color:var(--fc-label2);font-size:18px;cursor:pointer}
.btn-icon:focus-visible{color:var(--fc-label);background:var(--fc-fill)}
.btn-icon:focus-visible{outline:2px solid var(--fc-accent);outline-offset:-2px}
/* L'hover solo col puntatore: da telefono il tocco lasciava l'hamburger grigio
   (lo :hover sticky di iOS) finché non si toccava altrove. */
@media (hover:hover){.btn-icon:hover{color:var(--fc-label);background:var(--fc-fill)}}
/* Campanella del sollecito task (#294): bottone attivo, oppure span spento se
   la task è già stata sollecitata oggi. --sm è la misura della lista task. */
.task-remind{padding:0 2px;border:0;background:none;color:var(--fc-label2);font-size:11.52px;cursor:pointer}
.task-remind--sm{font-size:9.92px}
.task-remind.is-wait{opacity:.4;cursor:default}
@media screen{
  .modal{max-height:calc(100vh - 2 * var(--sp-4));overflow:hidden}
  .modal-body{overflow:auto}
}
/* Forma e misure dei tre modali, foglio a tutto schermo da telefono compreso,
   stanno in css/area-opmodal.css (design-05): qui resta il componente base. */
@media (prefers-reduced-transparency: reduce){
  .modal-top{background:var(--fc-card);-webkit-backdrop-filter:none;backdrop-filter:none}
}

/* ── Avvisi: toast, confirm, banner offline (design-02) ──
   Coppie di colore verificate dal test del contrasto: accent/accent-soft, danger/danger-soft,
   warn/warn-soft, info/info-soft in chiaro e in scuro. I fondi pieni con testo bianco non
   reggono in scuro (--fc-danger #FF6B6B con bianco: 2,6:1). Keyframes in area-shell.css.
   Da telefono il contenitore sta in basso (design-02c, scelta di Fede del 21-set-2026: in alto
   copriva hamburger e ricerca finché non si chiudeva con la X), sopra il bottone bug di
   index.html (position:fixed;bottom:24px, 44 px da telefono); da desktop resta in alto al centro. */
.fc-toast-container{position:fixed;bottom:calc(var(--fc-safe-bottom) + 24px + 44px + var(--sp-3));left:var(--sp-4);right:var(--sp-4);z-index:99999;display:flex;flex-direction:column;align-items:center;gap:var(--sp-2);pointer-events:none}
/* Col foglio di conferma aperto (misurato a 390x844: toast 718-764 sul messaggio 720-760) o col
   banner PWA visibile, i toast tornano in alto: il velo del confirm copre già la testata.
   Senza :has() (Safari sotto 15.4) la regola cade e il toast resta in basso: per i secondi in
   cui è visibile copre il messaggio del confirm o il banner, poi sparisce da solo e non si perde
   niente. Degrado accettato (design-04b): il confirm nasce in tre moduli (utils, tools,
   occ-conflict) e il banner in un quarto, una classe dal JS costerebbe più del caso che copre. */
body:has(.fc-confirm-overlay) .fc-toast-container,body:has(.fc-pwa-banner.visible) .fc-toast-container{top:calc(var(--fc-safe-top) + var(--sp-3));bottom:auto}
.fc-toast{--fc-toast-dy:8px;pointer-events:auto;display:flex;align-items:center;gap:var(--sp-2);width:100%;max-width:420px;padding:var(--sp-3) var(--sp-4);border:1px solid var(--fc-sep);border-radius:14px;background:var(--fc-toast-bg);color:var(--fc-toast-fg);font-size:15px;line-height:20px;font-weight:600;box-shadow:var(--fc-shadow);animation:fcToastIn .25s ease}
.fc-toast.success{background:var(--fc-accent-soft);color:var(--fc-accent)}
.fc-toast.error{background:var(--fc-danger-soft);color:var(--fc-danger)}
.fc-toast.warn{background:var(--fc-warn-soft);color:var(--fc-warn)}
.fc-toast.info{background:var(--fc-info-soft);color:var(--fc-info)}
.fc-toast.hiding{animation:fcToastOut .25s ease forwards}
.fc-toast-close{margin-left:auto;padding:0 0 0 var(--sp-2);border:0;background:none;color:inherit;font:inherit;font-size:18px;line-height:1;cursor:pointer;opacity:.7}
.fc-toast-close:focus-visible{opacity:1}
@media (hover:hover){.fc-toast-close:hover{opacity:1}}
.fc-toast-undo{margin-left:auto;padding:4px 10px;border:1px solid currentColor;border-radius:var(--rs);background:none;color:inherit;font:inherit;font-size:13px;font-weight:700;white-space:nowrap;cursor:pointer}
.fc-confirm-overlay{position:fixed;inset:0;z-index:99998;display:flex;align-items:flex-end;justify-content:center;background:var(--fc-scrim);animation:fcFadeIn .2s ease}
/* Un elenco lungo (es. 30 requisiti mancanti in "Transizione bloccata") faceva il riquadro piu' alto
   dello schermo: titolo e pulsanti finivano fuori e non si potevano raggiungere. Il riquadro resta
   dentro lo schermo, titolo e pulsanti fermi, scorre solo il messaggio. */
.fc-confirm-box{display:flex;flex-direction:column;width:100%;max-width:420px;max-height:calc(100vh - var(--sp-4) - var(--fc-safe-top));max-height:calc(100dvh - var(--sp-4) - var(--fc-safe-top));padding:var(--sp-5) var(--sp-4) calc(var(--sp-4) + var(--fc-safe-bottom));border-radius:20px 20px 0 0;background:var(--fc-card);box-shadow:var(--fc-shadow)}
/* Il messaggio che scorre taglia quello che esce dai suoi bordi: l'anello di focus dei campi a tutta
   larghezza (es. "Motivo" di Cantiere chiuso fuori app) va disegnato dentro, non 2px fuori. */
.fc-confirm-msg :focus-visible{outline-offset:-2px}
/* Lo stesso per i campi .fg (Motivo e Nota di Scarta operazione): fuori dai dialoghi hanno al focus
   outline:none e un alone di 3px fuori dal bordo (:66 qui e la regola in coda, era style.css:25), che il messaggio taglia ai
   lati. Qui l'indicatore e' l'anello dentro il campo, come per Cantiere chiuso fuori app e Richiedi
   eliminazione. .fc-confirm-box davanti porta la specificita' a (0,3,1): batte le .fg …:focus (0,2,1)
   anche di quella in coda (era in style.css). Su :focus come l'alone, cosi' si vede anche col mouse. */
.fc-confirm-box .fc-confirm-msg input:not([type="checkbox"]):not([type="radio"]):focus,
.fc-confirm-box .fc-confirm-msg select:focus,
.fc-confirm-box .fc-confirm-msg textarea:focus{outline:2px solid var(--fc-accent);outline-offset:-2px;box-shadow:none}
.fc-confirm-title{flex-shrink:0;margin-bottom:var(--sp-2);font-size:17px;line-height:22px;font-weight:600;color:var(--fc-label)}
.fc-confirm-msg{min-height:0;overflow-y:auto;margin-bottom:var(--sp-5);font-size:15px;line-height:20px;color:var(--fc-label2)}
/* Paragrafi del messaggio composto in JS (finestra «Modifiche offline da ricontrollare», data.js). */
.fc-confirm-par{margin:0 0 9.6px}
.fc-confirm-par:last-child{margin-bottom:0}
.fc-confirm-btns{display:flex;flex-shrink:0;gap:var(--sp-2);justify-content:flex-end}
.fc-confirm-btns button{min-height:44px;padding:0 var(--sp-4);border:0;border-radius:var(--rs);font:inherit;font-size:15px;font-weight:600;cursor:pointer}
.fc-confirm-cancel{background:var(--fc-fill);color:var(--fc-label)}
.fc-confirm-ok{background:var(--fc-accent-fill);color:var(--fc-on-accent)}
.fc-confirm-danger{background:var(--fc-danger-soft);color:var(--fc-danger)}
.fc-confirm-warn{background:var(--fc-warn-soft);color:var(--fc-warn)}
.fc-offline-banner{position:fixed;bottom:0;left:0;right:0;z-index:99999;display:none;padding:var(--sp-2) var(--sp-4);padding-bottom:calc(var(--fc-safe-bottom) + var(--sp-2));background:var(--fc-danger-soft);color:var(--fc-danger);border-top:1px solid var(--fc-danger);text-align:center;font-size:13px;font-weight:700}
.fc-offline-banner.visible{display:block;animation:fcFadeIn .3s ease}
/* Banner in cima (design-13e): aggiornamento dell'app (ui-misc.js _showUpdateBanner, sopra tutto: z 999999
   come prima) e invito alle notifiche (notifications.js _showPushPromptBanner). Una forma sola, fondo info
   chiaro e testo info (coppia del test di contrasto), bottone sul verde pieno; la safe-area del notch in
   una regola normale: prima il padding stava nel cssText, la regola di style.css per #fcUpdateBanner era
   morta (banner sotto il notch in PWA) e quella di mobile.css per #fcPushBanner aveva bisogno di !important.
   Entra con fcSlideDown (area-shell.css), fermo col movimento ridotto (blocco in coda ad area-shell.css). */
.fc-banner{position:fixed;top:0;left:0;right:0;z-index:99999;display:flex;align-items:center;gap:var(--sp-3);padding:calc(var(--sp-2) + var(--fc-safe-top)) var(--sp-4) var(--sp-2);background:var(--fc-info-soft);color:var(--fc-info);border-bottom:1px solid var(--fc-info);box-shadow:var(--fc-shadow);animation:fcSlideDown .3s ease}
.fc-banner.is-agg{z-index:999999}
.fc-banner-ico{flex:none}
.fc-banner-testo{flex:1;min-width:0}
.fc-banner-titolo{font-size:15px;line-height:20px;font-weight:700}
.fc-banner-sotto{font-size:13px;line-height:18px}
.fc-banner-conto{font-weight:700;font-variant-numeric:tabular-nums}
.fc-banner-btn{flex:none;min-height:44px;padding:0 var(--sp-4);border:0;border-radius:var(--rs);background:var(--fc-accent-fill);color:var(--fc-on-accent);font:inherit;font-size:13px;font-weight:700;white-space:nowrap;cursor:pointer}
.fc-banner-btn:focus-visible{outline:2px solid var(--fc-info);outline-offset:2px}
.fc-banner-x{color:var(--fc-info)}
.fc-update-waiting{margin-top:2px;font-size:13px;line-height:18px;font-weight:700}
@media screen and (min-width:769px){
  .fc-toast-container{top:calc(var(--fc-safe-top) + var(--sp-3));bottom:auto;left:50%;right:auto;width:min(420px,calc(100vw - 48px));transform:translateX(-50%)}
  .fc-toast{--fc-toast-dy:-8px}
  .fc-confirm-overlay{align-items:center}
  .fc-confirm-box{width:92vw;max-width:420px;max-height:calc(100vh - 2 * var(--sp-5));max-height:calc(100dvh - 2 * var(--sp-5));padding:var(--sp-5);border-radius:20px}
}

/* ── Scheletro: errori e indicatori (design-13h) ──
   Schermate a tutta pagina di boot.js (moduli critici mancanti, errore di avvio, account in
   attesa di attivazione: .fc-schermo*), veli di caricamento ed errore sopra un pannello
   (nav.js, .fc-velo*), bollino "✓ Salvato" (data.js, .fc-salvato) ed errore critico della
   libreria del database (api.js, .fc-errore-critico). Prima erano stili scritti nel codice,
   col fondo bianco anche nel tema scuro. Coppie di colore del test del contrasto: label2 e
   danger su card e su bg, label su fill, on-accent su accent-fill, toast-fg su toast-bg.
   La transition di .fc-salvato si spegne nel blocco del movimento ridotto di area-shell.css. */
.fc-schermo{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:32px;background:var(--fc-bg)}
.fc-schermo-scheda{max-width:480px;padding:32px;border-radius:14px;background:var(--fc-card);color:var(--fc-label);box-shadow:var(--fc-shadow);text-align:center}
.fc-schermo-icona{margin-bottom:16px;font-size:40px;line-height:1}
.fc-schermo-scheda h2{margin:0 0 10px;color:var(--fc-accent);font-size:18px}
.fc-schermo--errore .fc-schermo-scheda h2{color:var(--fc-danger)}
.fc-schermo-scheda p{margin:0 0 19px;color:var(--fc-label2);font-size:14px;line-height:1.5}
.fc-schermo-scheda .fc-schermo-nota{font-size:13px}
.fc-schermo-scheda code{padding:3px 8px;border-radius:4px;background:var(--fc-fill);color:var(--fc-label);font-size:13px}
.fc-schermo-btn{min-height:44px;padding:0 24px;border:0;border-radius:var(--rs);background:var(--fc-accent-fill);color:var(--fc-on-accent);font-size:14px;font-weight:600;cursor:pointer}
.fc-schermo-btn:disabled{opacity:.6;cursor:default}
.fc-velo-host{position:relative}
.fc-velo{position:absolute;inset:0;z-index:10;display:flex;align-items:center;justify-content:center;background:var(--fc-bg)}
.fc-velo-corpo{text-align:center;color:var(--fc-label2)}
.fc-velo--errore .fc-velo-corpo{max-width:400px;padding:32px;color:var(--fc-danger)}
.fc-velo-testo{margin-top:8px;font-size:12px}
.fc-velo-icona{margin-bottom:8px;font-size:24px}
.fc-velo-titolo{margin-bottom:5px;font-weight:700}
.fc-velo-dettaglio{color:var(--fc-label2);font-size:12px}
.fc-velo-riprova{margin-top:13px}
.fc-salvato{position:fixed;right:12px;bottom:calc(12px + var(--fc-safe-bottom));z-index:9999;padding:4px 10px;border-radius:var(--r-pill);background:var(--fc-toast-bg);color:var(--fc-toast-fg);font-size:11px;font-weight:600;opacity:0;transition:opacity .3s;pointer-events:none}
.fc-salvato.is-on{opacity:1}
.fc-errore-critico{margin:16px;padding:16px;border:1px solid var(--fc-danger);border-radius:var(--rs);background:var(--fc-danger-soft);color:var(--fc-danger);text-align:center;pointer-events:auto}

/* ── Sovrapposizioni di sistema: palette comandi, aiuto scorciatoie, banner PWA, riga focalizzata bulk (design-02) ──
   Prima erano <style> iniettati a runtime da command-palette.js, shortcuts.js, pwa-install.js, bulk-keyboard.js. */
.fc-pal-overlay{position:fixed;inset:0;z-index:99999;display:none;align-items:flex-start;justify-content:center;padding:calc(12vh + var(--fc-safe-top)) var(--sp-4) 0;background:var(--fc-scrim)}
.fc-pal-overlay.open{display:flex}
.fc-pal-box{display:flex;flex-direction:column;width:min(640px,100%);overflow:hidden;border-radius:var(--r);background:var(--fc-card);box-shadow:var(--fc-shadow)}
.fc-pal-input{width:100%;min-height:52px;padding:0 18px;border:0;border-bottom:1px solid var(--fc-sep);border-radius:0;background:transparent;color:var(--fc-label);font-size:16px;outline:none}
.fc-pal-list{max-height:52vh;overflow-y:auto}
.fc-pal-item{display:flex;align-items:center;gap:10px;min-height:44px;padding:0 var(--sp-4);font-size:15px;cursor:pointer}
.fc-pal-item.selected{background:var(--fc-fill)}
@media (hover:hover){.fc-pal-item:hover{background:var(--fc-fill)}}
.fc-pal-icon{width:20px;text-align:center;color:var(--fc-label2)}
.fc-pal-label{flex:1}
.fc-pal-hint{font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--fc-label2)}
.fc-pal-empty,.fc-shortcuts-empty{padding:var(--sp-5);text-align:center;font-size:13px;color:var(--fc-label2)}
.fc-pal-foot,.fc-shortcuts-foot{display:flex;flex-wrap:wrap;gap:14px;padding:var(--sp-2) var(--sp-4);border-top:1px solid var(--fc-sep);background:var(--fc-bg);font-size:11px;color:var(--fc-label2)}
.fc-shortcuts-foot{display:block}
.fc-pal-foot kbd+kbd{margin-left:4px}
.fc-pal-foot kbd,.fc-shortcuts-foot kbd,.fc-shortcut-keys kbd{display:inline-block;padding:1px 6px;border:1px solid var(--fc-sep);border-radius:4px;background:var(--fc-fill);color:var(--fc-label);font-size:11px;line-height:16px}
.fc-shortcuts-overlay{position:fixed;inset:0;z-index:99998;display:none;align-items:center;justify-content:center;padding:var(--sp-4);background:var(--fc-scrim)}
.fc-shortcuts-overlay.open{display:flex}
.fc-shortcuts-box{display:flex;flex-direction:column;width:min(520px,100%);max-height:80vh;border-radius:var(--r);background:var(--fc-card);color:var(--fc-label);box-shadow:var(--fc-shadow)}
.fc-shortcuts-head{display:flex;align-items:center;justify-content:space-between;padding:var(--sp-2) var(--sp-2) var(--sp-2) var(--sp-4);border-bottom:1px solid var(--fc-sep)}
.fc-shortcuts-head h3{margin:0;font-size:17px;font-weight:600}
.fc-shortcuts-close{font-size:20px}
.fc-shortcuts-list{flex:1;padding:var(--sp-2) 0;overflow-y:auto}
.fc-shortcut-row{display:flex;align-items:center;gap:var(--sp-4);min-height:40px;padding:var(--sp-1) var(--sp-4)}
.fc-shortcut-row:nth-child(odd){background:var(--fc-bg)}
.fc-shortcut-keys{display:flex;flex-wrap:wrap;align-items:center;gap:4px;min-width:140px;font-size:12px}
.fc-shortcut-desc{flex:1;font-size:13px}
.fc-pwa-banner{position:fixed;bottom:calc(var(--sp-4) + var(--fc-safe-bottom));left:50%;z-index:99997;width:min(440px,calc(100vw - 32px));padding:var(--sp-3) var(--sp-4);border:1px solid var(--fc-sep);border-radius:14px;background:var(--fc-card);color:var(--fc-label);box-shadow:var(--fc-shadow);transform:translateX(-50%) translateY(120%);transition:transform .3s ease}
.fc-pwa-banner.visible{transform:translateX(-50%) translateY(0)}
.fc-pwa-body{display:flex;align-items:center;gap:var(--sp-3)}
.fc-pwa-icon{font-size:28px}
.fc-pwa-text{flex:1;min-width:0}
.fc-pwa-title{font-size:15px;font-weight:600}
.fc-pwa-desc{font-size:13px;line-height:18px;color:var(--fc-label2)}
.fc-pwa-desc strong{font-weight:700;color:var(--fc-label)}
.fc-pwa-btn{min-height:36px;padding:0 var(--sp-4);border:0;border-radius:var(--rs);background:var(--fc-accent-fill);color:var(--fc-on-accent);font:inherit;font-size:13px;font-weight:600;cursor:pointer}
.fc-pwa-btn.fc-pwa-later{padding:0 var(--sp-2);background:none;color:var(--fc-label2);font-size:18px}
@media (hover:hover){
  .fc-pwa-btn.fc-pwa-later:hover{color:var(--fc-label)}
}
#pan-lista tbody tr.fc-bulk-focus{outline:2px solid var(--fc-accent);outline-offset:-2px;background:var(--fc-accent-soft)}
#pan-lista tbody tr.fc-bulk-focus td:first-child{box-shadow:inset 3px 0 0 var(--fc-accent)}
/* Banner "Installa app" (PR 4): da telefono sopra il bottone bug (css/area-minori.css #bugReportBtn:
   bottom 24 + safe-area, alto 44 da telefono, più 4 di respiro) e bottoni a 44 px su touch. In coda perché le regole .fc-pwa-* sopra
   (238-250) le batterebbero per ordine. */
@media screen and (max-width:768px){
  .fc-pwa-banner{bottom:calc(72px + var(--fc-safe-bottom))}
}
@media (hover:none){
  .fc-pwa-btn{min-height:44px}
  /* la ✕ non ha testo: senza min-width resta a 30 px di larghezza (smoke 22-set). */
  .fc-pwa-btn.fc-pwa-later{min-width:44px}
}

/* ── Campo cambiato da un collega (date e numeri in tempo reale, 26-set-2026) ──
   Sotto il campo che l'utente sta modificando quando la riga arriva dal canale:
   il valore del collega non entra nel campo, lo si dice qui (realtime-collegate.js). */
.fg-collega{margin-top:var(--sp-1);padding:var(--sp-1) var(--sp-2);border-radius:var(--rs);background:var(--fc-warn-soft);color:var(--fc-warn);font-size:12px;line-height:16px;font-weight:600}

/* ── Investitori > scheda > Investimenti: "+ Collega operazione" ──
   Le misure che il modulo aveva scritte nel JavaScript prima del giro 7 della
   review (js/modules/investitori-modal.js, _renderInvestimenti), qui e non in
   style.css, che era da svuotare (ottavo giro, rilievo 2; cancellato nella PR 15). Design-13c, strada
   (b) del coordinatore (adattamenti §A3): la sezione resta in base.css e si
   corregge sul posto, senza una seconda casa in area-minori.css. Misure in px
   (in rem da telefono crescevano con la radice a 19 px che aveva mobile.css e al
   computer le etichette facevano 8 px), testo mai sotto gli 11 px, colori solo
   dai token, campi e bottoni con fondo e testo dichiarati; il primario usa la
   coppia di .an-btn-primary (--fc-on-accent su --fc-accent-fill: su
   --fc-accent in scuro dava 2,01:1). I campi portano anche .fg: .fg input di
   style.css (0,1,1) batteva .inv-op-input (0,1,0); .fg .inv-op-input (0,2,0)
   vince, ma per lo stesso motivo da telefono vince anche su .fg select di
   questo file (16 px, 44 di altezza): il blocco in fondo rimette i 16 px
   (sotto, iOS ingrandisce la pagina al tocco) e mette i campi su una colonna.
   Aperto e chiuso con l'attributo hidden ([hidden] qui sopra). .fg label
   mette maiuscole: le etichette qui hanno solo misura, peso e colore. */
.inv-op-vuoto{padding:var(--sp-6);color:var(--fc-label2);font-size:13px;text-align:center}
.inv-op-caricamento{padding:var(--sp-5);color:var(--fc-label2);font-size:13px;text-align:center}
.inv-op-testata{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--sp-2);margin-bottom:var(--sp-3)}
.inv-op-titolo{font-size:15px;font-weight:600;color:var(--fc-label)}
.inv-op-btn{min-height:32px;padding:0 var(--sp-3);border:1px solid var(--fc-sep);border-radius:var(--rs);background:var(--fc-card);color:var(--fc-label);font:inherit;font-size:13px;font-weight:600;cursor:pointer}
.inv-op-btn--primario{border-color:var(--fc-accent-fill);background:var(--fc-accent-fill);color:var(--fc-on-accent);font-weight:700}
.inv-op-testata .inv-op-btn{min-height:36px}
.inv-op-btn--riga{min-height:36px}
.inv-op-form{margin-bottom:var(--sp-3);padding:var(--sp-3);border-radius:var(--rs);background:var(--fc-bg);color:var(--fc-label)}
.inv-op-campi{display:flex;flex-wrap:wrap;align-items:end;gap:var(--sp-2)}
.inv-op-campo--operazione{flex:1;min-width:120px}
.inv-op-campo--quota{min-width:80px}
.inv-op-campo--importo,.inv-op-campo--data{min-width:100px}
.inv-op-campo--tipo{min-width:150px}
.fg .inv-op-etichetta{font-size:11px;font-weight:600;color:var(--fc-label2)}
.fg .inv-op-input{width:100%;min-height:36px;padding:0 var(--sp-2);border:1px solid var(--fc-sep);border-radius:var(--rs);background:var(--fc-card);color:var(--fc-label);font-size:13px}
.fg .inv-op-cerca{margin-bottom:var(--sp-1)}
/* in scrittura: .fg input:focus e .fg select:focus (0,2,1, erano in style.css) facevano il fondo
   #fff e in tema scuro il testo bianco spariva; qui (0,3,0) vince. La data del
   rimborso non sta in un .fg e quella regola non la tocca. */
.fg .inv-op-input:focus{background:var(--fc-card);border-color:var(--fc-accent);box-shadow:0 0 0 3px var(--fc-accent-soft)}
/* Rimborso del socio sotto la riga dell'investimento (16-ott-2026) */
.inv-op-rimborso{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2);margin:calc(-1 * var(--sp-1)) 0 var(--sp-2) var(--sp-3);color:var(--fc-label2);font-size:12px}
.inv-op-rimborso-data{font-weight:700;color:var(--fc-accent)}
.inv-op-rimborso-input{min-height:32px;padding:0 var(--sp-2);border:1px solid var(--fc-sep);border-radius:var(--rs);background:var(--fc-card);color:var(--fc-label);font:inherit;font-size:13px}
.inv-op-btn--link{padding:0 var(--sp-1);border:0;background:none;color:var(--fc-accent);text-decoration:underline}
@media screen and (max-width:768px){
  .fg .inv-op-input,.inv-op-rimborso-input{min-height:44px;font-size:16px}
  /* .inv-op-testata .inv-op-btn (0,2,0) qui sopra batte .inv-op-btn da solo */
  .inv-op-btn,.inv-op-testata .inv-op-btn{min-height:44px}
  .inv-op-campi{display:grid;grid-template-columns:minmax(0,1fr)}
}

/* ── Investitori: grafici del capitale (js/modules/investitori-capitale.js) ──
   Barre HTML: la lunghezza arriva dai dati come variabile CSS (--w in
   orizzontale, --h in verticale). Colori sui token: verde = intestazione
   diretta e occupato, blu = CAP; il disponibile e il prima-del-rogito sono le
   tinte chiare, cosi' si leggono anche in scuro. Design-13c, Task 8b: corretta
   sul posto come la sezione .inv-op-* qui sopra (strada (b), adattamenti §A4).
   Misure in px (in rem al computer 22 testi stavano fra 8,96 e 10,88 px e da
   telefono crescevano con la radice a 19 px che aveva mobile.css), testo mai sotto
   gli 11 px, colori solo dai token, il riquadro dichiara fondo e testo. */
.inv-cap{margin-bottom:13px}
/* Le tre caselle degli stati sopra i grafici: casella vera dentro la sua
   label, stesso verde delle altre caselle della app. */
.inv-cap-stati{display:flex;flex-wrap:wrap;align-items:center;gap:5px 14px;margin-bottom:8px}
.inv-cap-stati-tit{font-size:11px;text-transform:uppercase;letter-spacing:.06em;font-weight:700;color:var(--fc-label2)}
.inv-cap-stato{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--fc-label);cursor:pointer}
.inv-cap-stato input{flex:none;width:16px;height:16px;margin:0;accent-color:var(--fc-accent-fill);cursor:pointer}
.inv-cap-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:10px}
.inv-cap-card{background:var(--fc-card);color:var(--fc-label);border:1px solid var(--fc-sep);border-radius:10px;padding:11px 13px;min-width:0}
.inv-cap-titolo{font-size:11px;text-transform:uppercase;letter-spacing:.06em;font-weight:700;color:var(--fc-accent);margin-bottom:5px}
.inv-cap-sintesi{font-size:13px;color:var(--fc-label2);margin-bottom:10px}
.inv-cap-sintesi b{color:var(--fc-label)}
.inv-cap-riga{display:grid;grid-template-columns:136px 1fr;gap:2px 8px;align-items:center;margin-bottom:8px}
.inv-cap-etichetta{font-size:13px;font-weight:600;color:var(--fc-label)}
.inv-cap-barra{display:flex;height:18px;background:var(--fc-fill);border-radius:4px;overflow:hidden}
.inv-cap-barra .inv-cap-seg{width:var(--w);flex:none}
.inv-cap-cifre{grid-column:2;font-size:11px;color:var(--fc-label2)}
.inv-cap-seg--occupato,.inv-cap-seg--intestazione{background:var(--fc-accent)}
.inv-cap-seg--prima{background:var(--fc-ok);opacity:.55}
.inv-cap-seg--disponibile{background:var(--fc-accent-soft);box-shadow:inset 0 0 0 1px var(--fc-ok)}
.inv-cap-seg--cap{background:var(--fc-info)}
.inv-cap-seg--nd{background:var(--fc-label3)}
.inv-cap-legenda{display:flex;flex-wrap:wrap;gap:5px 13px;font-size:11px;color:var(--fc-label2);margin-top:6px}
.inv-cap-legenda i{display:inline-block;width:11px;height:11px;border-radius:2px;margin-right:5px;vertical-align:-1px}
.inv-cap-avviso{margin-top:8px;font-size:12px;color:var(--fc-warn);background:var(--fc-warn-soft);border-radius:6px;padding:6px 8px}
/* Le colonne si stringono (min-width:0): a 11 px sei colonne con cifre come
   "12,35 M" stanno dentro anche a 320 px (38 px l'una, misura headless). */
.inv-cap-colonne{display:flex;gap:6px;align-items:flex-end}
.inv-cap-col{flex:1;min-width:0;text-align:center}
.inv-cap-col-val{font-size:11px;font-weight:700;color:var(--fc-label);margin-bottom:2px}
.inv-cap-col-area{height:112px;display:flex;align-items:flex-end;justify-content:center;border-bottom:1px solid var(--fc-sep)}
.inv-cap-col-pila{width:70%;max-width:48px;height:var(--h);display:flex;flex-direction:column;border-radius:4px 4px 0 0;overflow:hidden}
.inv-cap-col-pila .inv-cap-seg{height:var(--h);flex:none}
.inv-cap-col-lbl{font-size:11px;color:var(--fc-label2);margin-top:4px;line-height:1.25}
.inv-cap-col-lbl--ritardo{color:var(--fc-danger);font-weight:600}
.inv-cap-nota,.inv-cap-fonte{font-size:11px;color:var(--fc-label2);margin-top:7px;line-height:1.4}
.inv-cap-fonte{margin-top:5px}
.inv-cap-ops{font-size:12px;margin-top:6px}
.inv-cap-ops summary{cursor:pointer;color:var(--fc-label)}
.inv-cap-ops ul{margin:4px 0 0 16px;padding:0;color:var(--fc-label2)}
.inv-cap-ops li{margin-bottom:2px}
.inv-cap-vuoto{font-size:13px;color:var(--fc-label2);padding:10px 0}
@media screen and (max-width:600px){
  .inv-cap-stato{min-height:44px}
  .inv-cap-grid{grid-template-columns:1fr}
  .inv-cap-riga{grid-template-columns:1fr}
  .inv-cap-cifre{grid-column:1}
}

/* ── Regole comuni che stavano in style.css (PR 15, Task 2) ───────────────
   In coda e nello stesso ordine: style.css si caricava subito dopo questo file, la
   cascata è la stessa. Su un selettore che qui c'era già la regola vecchia resta
   (proprietà diverse) o, se questa la batteva in tutto, è tolta (.btn-outline,
   .btn-danger e i loro :hover, .fr, .fr3). I gruppi (.btn,.hdr-btn) non si uniscono:
   darebbero proprietà nuove a .hdr-btn.
   Le pagine di accesso (login, reimposta password, portale lender, 404) caricano
   anche base.css: le regole che le cambierebbero (margini azzerati, corpo a 14 px,
   etichette dei campi maiuscole, transizione dei campi, standalone) valgono solo
   nella app, con la classe fc-app sul <body> di index.html e il prefisso
   :where(.fc-app), che pesa zero (specificità uguale a prima).
   Le misure sono in px al valore che avevano da computer in rem (PR 15, Task 3: è caduta la
   radice a 19 px da telefono). I :hover dei bottoni solo col mouse. */
:where(.fc-app,.fc-app *){margin:0;padding:0}
body:where(.fc-app){background:var(--fc-bg);color:var(--fc-label);min-height:100vh;font-size:14px;line-height:1.5}
/* a11y (batch 2): focus visibile da tastiera su cliccabili div/role=button */
[role="button"]:focus-visible{outline:2px solid var(--fc-accent);outline-offset:2px}
.panel{display:none}.panel.active{display:block}
:where(.fc-app) .fg{margin-bottom:12.8px}
:where(.fc-app) .fg label{display:block;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--fc-label2);margin-bottom:4px}
:where(.fc-app) .fg input,:where(.fc-app) .fg select,:where(.fc-app) .fg textarea{width:100%;padding:8px 11.2px;border:1.5px solid var(--fc-sep);border-radius:var(--rs);font-size:13.12px;color:var(--fc-label);background:var(--fc-fill);transition:all .15s;outline:none}
:where(.fc-app) .fg input:focus,:where(.fc-app) .fg select:focus,:where(.fc-app) .fg textarea:focus{border-color:var(--fc-accent);box-shadow:0 0 0 3px var(--fc-accent-soft);background:var(--fc-card)}
.fr{display:grid;grid-template-columns:1fr 1fr;gap:9.6px}
.fr3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:9.6px}
.fg-hint{margin-top:4px;font-size:9.92px;font-weight:400;color:var(--fc-label2)}
.btn{padding:11.2px 16px;border-radius:var(--rs);font-size:11.52px;font-weight:700;letter-spacing:2px;text-transform:uppercase;cursor:pointer;transition:all .2s;border:none}
.btn-green{background:var(--fc-accent-fill);color:var(--fc-on-accent);width:100%}
.btn-outline{background:transparent;color:var(--fc-accent);border:1.5px solid var(--fc-accent)}
.btn-danger{background:transparent;color:var(--fc-danger);border:1.5px solid var(--fc-danger)}
.btn-sm{padding:6.4px 11.2px;font-size:9.92px;letter-spacing:1px}
@media (hover:hover){
  .btn-green:hover{background:var(--fc-accent-fill);transform:translateY(-1px)}
  .btn-outline:hover{background:var(--fc-accent-fill);color:var(--fc-on-accent)}
  .btn-danger:hover{background:var(--fc-danger-fill);color:var(--fc-on-accent)}
}
/* PWA installata: niente tira-per-aggiornare che disturba lo scorrimento */
@media (display-mode:standalone){body:where(.fc-app){overscroll-behavior-y:contain}}
/* Senza "screen": in stampa (A4, 741 px) le righe dei campi restano a una colonna come prima. */
@media (max-width:1024px){.fr{grid-template-columns:1fr}.fr3{grid-template-columns:1fr 1fr}}
@media (max-width:768px){.fr3{grid-template-columns:1fr}}
/* ── Da telefono: le regole che erano in css/mobile.css (cancellato nella PR 15, Task 3) ──
   In coda a base.css: mobile.css si caricava subito dopo (in mezzo solo stampa.css, che vale
   in stampa), quindi la cascata resta quella di prima. Le regole della scheda operazione sono
   in testa ad area-opmodal.css. Sempre `screen and`: una media di sola larghezza vale anche in
   stampa, dove la pagina A4 è larga 741 px, e cambierebbe ogni PDF.
   - Campi a 16 px contro lo zoom automatico di iOS al focus, con !important: è strutturale,
     non una scorciatoia, ed è l'unico di questo file oltre [hidden]. Molte regole dei campi
     pesano più di input/select/textarea (.fg input (0,1,1), i select dei filtri di Pipeline e
     Lista, #opStatoSel, .op-campo, .riu-wf-sel, quelle di Ditte, Mercato e Gantt) e da telefono
     danno 12-14,4 px: senza !important, a 390 px, 162 campi fra le viste della app scendevano
     sotto i 16 (misurato nella PR 15). Ripetere i 16 px in ogni foglio d'area vorrebbe dire
     inseguirle una per una, e il primo campo nuovo li perderebbe. [contenteditable="true"]
     compreso (l'editor delle email). Esclusi checkbox, radio e range: iOS non zooma e lì il
     font-size cambierebbe il disegno del controllo.
   - Testi che erano in rem: da telefono valevano il 18,75% in più (radice a 19 px). Restano
     uguali solo quelli che altrimenti andrebbero sotto 11 px (.62rem: 11,78 px); gli altri
     prendono la misura da computer, come le aree già in px (D-15.2).
   - Bersagli toccabili 44×44 (Apple HIG, WCAG 2.5.5), in tutte e due le dimensioni.
     `display` esplicito: .btn non lo dichiara e su <label class="btn"> min-height non vale
     su un elemento inline; `justify-content:center` perché un <button> diventato flex
     allineerebbe il testo a sinistra.
   - Niente ritardo di 300 ms sul tocco; evidenza del tocco nel verde dell'accento. */
@media screen and (max-width:768px){
  input:not([type=checkbox]):not([type=radio]):not([type=range]),select,textarea,[contenteditable="true"]{font-size:16px!important}
  .fg-hint,.btn-sm,.task-remind--sm{font-size:11.78px}
  .btn,label.btn,.modal-close{min-height:44px;min-width:44px;display:inline-flex;align-items:center;justify-content:center}
  a,button,label,select,summary,[data-action],[onclick]{touch-action:manipulation}
  *{-webkit-tap-highlight-color:color-mix(in srgb,var(--fc-accent) 12%,transparent)}
}