/* Washi — strato della sezione «piattaforma» (16 ott 2026). Un file per ogni giro di pagine, così tre mani non si pestano su app.css. Si legge DOPO app.css. */

/* ============================================================================
   Il giro Washi delle pagine di PIATTAFORMA (/admin) e delle pagine PUBBLICHE (16 ott 2026,
   ramo web-nuovo-piattaforma). Qui stanno SOLO le regole di queste pagine: la materia comune
   (campi, pulsanti, carte, foglio, sigillo) è in coda ad app.css e vale già per tutti.
   ============================================================================ */

/* --- il chip con le iniziali dell'ente dentro una Riga e nella Testata compatta ------------- */
.riga-av .ric-logo { width: 100%; height: 100%; border: 0; border-radius: 0; box-shadow: none; }
.testata-av .ric-logo.grande { width: 44px; height: 44px; border-radius: 12px; font-size: 1.2rem; }
.ric-chips { display: flex; flex-wrap: wrap; gap: .3rem; margin: 2px 0; }
.ric-chips .badge { margin: 0; }

/* --- «Enti» della piattaforma: la pagina si chiama `.ep` come la vetrina pubblica del seminar
   (15 ott), che la stringeva a 680 px e mandava la tabella fuori dal bordo. Qui, dove c'è il
   titolo di pagina, torna larga quanto la colonna. ------------------------------------------- */
.pagina .ep:has(> .pagina-titolo) { max-width: none; margin: 0; padding: 0; }

/* --- le carte delle statistiche (KPI, grafici, totali, sommario, stati): la stessa materia
   delle carte — senza bordo, tre strati d'ombra, raggio 14; il bordo torna solo al buio -------- */
.st-kpi, .st-card, .st-tot, .ep .sommario, .upf .stato, .upf .ort, .upf .una {
  border-color: transparent; border-radius: 14px; box-shadow: var(--ombra);
}
html[data-theme="dark"] :is(.st-kpi, .st-card, .st-tot, .ep .sommario, .upf .stato, .upf .ort, .upf .una) { border-color: var(--border); }
@media (prefers-color-scheme: dark) {
  html[data-theme="system"] :is(.st-kpi, .st-card, .st-tot, .ep .sommario, .upf .stato, .upf .ort, .upf .una),
  html:not([data-theme]) :is(.st-kpi, .st-card, .st-tot, .ep .sommario, .upf .stato, .upf .ort, .upf .una) { border-color: var(--border); }
}
.st-kpi .v, .st-tot .it b, .ep .sommario .it b, .upf .stato .v, .upf .una .it b { font-variant-numeric: tabular-nums; }
.st-kpi .lb, .st-ct span, .st-tot .it span, .ep .sommario .it span { font-size: 12px; font-weight: 600; letter-spacing: .01em; }
.st-kpis { gap: 14px; margin: 1rem 0; }
.st-grid2 { gap: 14px; }
.st-card { padding: 16px 18px; }
.st-tot { margin-top: 14px; }
.st-head { margin-bottom: .4rem; }

/* --- il segmentato del periodo (30 gg · trimestre · anno): una pillola piena, il tratto attivo
   in accento con l'ombra del suo colore — come i filtri a pastiglia ---------------------------- */
.seg { border: 0; border-radius: 11px; background: var(--fill); padding: 3px; gap: 2px; }
.seg button { border-right: 0; border-radius: 9px; padding: .4rem .75rem; font-weight: 600; min-height: 32px; transition: background var(--t-corta), color var(--t-corta); }
.seg button:hover { color: var(--text); }
.seg button.attivo { box-shadow: var(--ombra-colore); }
.seg.sopra { margin-bottom: .9rem; }

/* --- le tabelle piccole della demo e del questionario: sotto gli 820 px le righe si impilano,
   ogni cella con la sua etichetta (data-etichetta) ------------------------------------------- */
.st-demo-tab th:first-child, .st-demo-tab td:first-child { font-weight: 500; }
@media (max-width: 820px) {
  .st-demo-tab.impila, .st-demo-tab.impila tbody, .st-demo-tab.impila tr, .st-demo-tab.impila td { display: block; }
  .st-demo-tab.impila thead { display: none; }
  .st-demo-tab.impila tr { padding: .5rem 0; border-bottom: 1px solid var(--border); }
  .st-demo-tab.impila tr:last-child { border-bottom: 0; }
  .st-demo-tab.impila td { border: 0; padding: .15rem 0; text-align: left; display: flex; justify-content: space-between; gap: .8rem; }
  .st-demo-tab.impila td:first-child { font-weight: 600; font-size: .9rem; padding-bottom: .3rem; display: block; }
  .st-demo-tab.impila td[data-etichetta]::before { content: attr(data-etichetta); color: var(--muted); font-weight: 500; }
}

/* --- i commenti della demo e le risposte del questionario: ogni voce respira un po' di più --- */
.st-cm { padding: .75rem 0; }
.st-cm-testo { font-size: .92rem; }

/* --- «Utenti» della piattaforma ------------------------------------------------------------- */
.upf .sez { font-size: 11.5px; letter-spacing: .06em; }
.upf .stati { gap: 14px; }
.upf .griglia2 { gap: 14px; }
.upf .dietro { display: inline-flex; align-items: center; gap: .3rem; min-height: 32px; }
@media (max-width: 820px) { .upf .stati { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .upf .stati, .upf .griglia2 { grid-template-columns: 1fr; } }

/* --- «Enti» della piattaforma: la tabella tiene la materia; le intestazioni ordinabili sono
   comandi e si vedono come tali ------------------------------------------------------------- */
/* Seconda collisione con la vetrina del seminar (15 ott): `.ep-riga` lì è una riga flex, e sul
   <tr> mandava le celle a spasso (la tabella usciva a 1537 px). Da PC la riga torna una riga di
   tabella; sotto gli 820 px vale la conversione a card di app.css. */
@media (min-width: 821px) {
  .ep table.enti tr.ep-riga { display: table-row; gap: 0; padding: 0; border-bottom: 0; font-size: inherit; align-items: initial; }
}
.ep table.enti tr.ep-riga { border-radius: 0; }
.ep table.enti tr.ep-riga b { display: inline; font-weight: inherit; }
.ep table.enti tr.ep-riga small { display: inline; font-size: inherit; color: inherit; }
.ep table.enti th { font-size: 11.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.ep table.enti th.sortable { cursor: pointer; transition: color var(--t-corta); }
.ep table.enti th.sortable:hover, .ep table.enti th.sortable.on { color: var(--accent-text); }
.ep table.enti tbody tr.ep-riga { transition: background var(--t-corta); }
.ep table.enti tbody tr.ep-riga:hover { background: var(--riga-hover); }
.ep .dett-griglia .blocco h4 { font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); font-weight: 600; margin: 0 0 .35rem; }
.ep .legenda { font-size: .8rem; color: var(--muted); line-height: 1.5; margin: 1rem 0 0; }

/* --- Moderazione: l'elenco è una carta di righe, la scheda a lato come nella scheda socio ---- */
.media-split { gap: 16px; }
.media-lista .riga-av { background: var(--fill); }
.media-lista .riga-av .media-thumb { width: 100%; height: 100%; border: 0; border-radius: 0; object-fit: cover; }
.media-lista .riga-av .media-thumb.vuota { display: block; }
.media-lista .riga-meta .badge { margin: 0 .3rem 0 0; vertical-align: 1px; }
.media-dettaglio > .carta { animation: entra-su var(--t-media) var(--curva) backwards; }
.media-requisiti { margin: .3rem 0 0; padding-left: 1.2rem; font-size: .9rem; line-height: 1.5; color: var(--muted); }
.storico-barra { display: flex; align-items: center; gap: .8rem; margin-bottom: .9rem; flex-wrap: wrap; }
/* `.pagina input` perché la regola globale `input:not(...)` pesa più di una classe sola. */
.pagina input.storico-cerca {
  flex: 1 1 220px; max-width: 420px; min-height: var(--h-campo); border-radius: var(--raggio-campo);
  background: var(--fill); border: 1px solid transparent; padding: .6rem .9rem; font: inherit; font-size: .95rem; color: var(--text);
  transition: border-color var(--t-corta), box-shadow var(--t-corta), background var(--t-corta);
}
.pagina input.storico-cerca:hover { border-color: var(--border); }
.pagina input.storico-cerca:focus { outline: none; background: var(--card); border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-tenue); }

/* --- Comunicazioni: la pagina è l'elenco delle inviate, la nuova si scrive nel foglio dal ＋ --- */
.com-seg { margin-top: .2rem; }
.com-so { border-radius: 11px; background: var(--fill); border-color: transparent; min-height: 52px; transition: background var(--t-corta), border-color var(--t-corta); }
.com-so:hover { border-color: var(--border); }
.com-so.on { background: var(--accent-tenue); border-color: var(--accent); }
.foglio .com-ente input {
  width: 100%; min-height: var(--h-campo); border-radius: var(--raggio-campo); background: var(--fill); border: 1px solid transparent;
  padding: .6rem .9rem; font: inherit; font-size: .95rem; color: var(--text);
}
.foglio .com-ente input:focus { outline: none; background: var(--card); border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-tenue); }
.com-ente-lista { border-radius: 11px; }
.com-ente-scelto { border-radius: 11px; min-height: 44px; }
.com-ente-scelto .link-rimuovi { border: 0; background: transparent; color: var(--muted); cursor: pointer; font: inherit; padding: .2rem .4rem; border-radius: 8px; }
.com-ente-scelto .link-rimuovi:hover { background: var(--riga-hover); color: var(--text); }
.com-ente-scelto .link-rimuovi svg { width: 16px; height: 16px; display: block; }
.com-dest { margin: .6rem 0 0; }
.com-prev { padding: .5rem .6rem; border-radius: 11px; background: var(--fill); margin-top: .2rem; }
.com-anteprima-et { font-size: 12px; font-weight: 600; color: var(--muted); margin: 1rem 0 .35rem; }
.com-riepilogo { display: flex; flex-direction: column; gap: 0; }
.com-riepilogo .cv.blocco > b { font-weight: 400; line-height: 1.5; }
.foglio-piede .com-detto { flex-basis: 100%; font-size: .88rem; line-height: 1.4; color: var(--muted); }
.foglio-piede .com-detto.errore { color: var(--err-text); }
.com-lettura { white-space: pre-wrap; line-height: 1.55; font-size: .95rem; }
.com-lettura-meta { display: flex; flex-wrap: wrap; gap: .3rem .5rem; margin-bottom: .9rem; font-size: 13px; color: var(--muted); }

/* --- FAQ: il ＋ di ogni argomento è la stessa «matita» delle carte di lettura ---------------- */
.faq-gruppi { display: flex; flex-direction: column; gap: 16px; }
.faq-segni { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: 2px; }
.faq-segni .badge { margin: 0; }
.faq-freccia {
  width: 30px; height: 30px; border-radius: 9px; border: 1px solid var(--border); background: var(--card); color: var(--muted);
  cursor: pointer; font: inherit; padding: 0; display: inline-flex; align-items: center; justify-content: center;
  transition: background var(--t-corta), color var(--t-corta);
}
.faq-freccia:hover:not(:disabled) { background: var(--accent-tenue); color: var(--accent-text); border-color: transparent; }
.faq-freccia:disabled { opacity: .35; cursor: default; }
.faq-frecce { display: inline-flex; gap: .3rem; }
.faq-lingua { margin-top: 1rem; padding-top: .9rem; border-top: 1px solid var(--border); }
.faq-lingua-nome { display: flex; align-items: center; gap: .5rem; font-weight: 600; margin-bottom: .5rem; }
.faq-lingue-testa { font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); font-weight: 600; margin-top: 1.1rem; }
.faq-azioni { display: flex; gap: .5rem; flex-wrap: wrap; }

/* ============================================================================
   PAGINE PUBBLICHE: solo i materiali (campi, pulsanti, carte, spaziature); la struttura non
   cambia. Le pagine d'accesso sono sempre scure e restano scure.
   ============================================================================ */

/* --- i campi scritti a mano delle pagine auth (InputText nudo): pieni, 44 px, raggio 12 ------ */
.auth .campo label { font-size: 12px; font-weight: 600; margin-bottom: .35rem; }
.auth .campo input {
  min-height: var(--h-campo); border-radius: var(--raggio-campo); border-color: transparent; padding: .6rem .9rem; font-size: .95rem;
  transition: border-color var(--t-corta), box-shadow var(--t-corta), background var(--t-corta);
}
.auth .campo input:hover { border-color: var(--border); }
.auth .campo input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-tenue); }
.auth .campo .pw .campo-occhio { border-radius: 0 var(--raggio-campo) var(--raggio-campo) 0; }
.auth .campo-box { background: var(--auth-campo); }
.auth .bottone.accento { min-height: 44px; border-radius: 12px; padding: .65rem 1rem; box-shadow: var(--ombra-colore); }
.auth .bottone.accento.compatto { width: auto; min-height: 36px; padding: .4rem .9rem; border-radius: 10px; margin-top: 0; }
.auth .bottone.demo { min-height: 44px; border-radius: 12px; }
.auth-registra { border-radius: 12px; }
.auth .avviso { border-radius: 11px; }
.auth .pilota-banner { border-radius: 12px; }

/* --- il check-in dal web: la carta con i tre strati d'ombra, il codice in un campo pieno ------ */
.ck-web > .carta { border-radius: 18px; }
.ck-web .campo-box { border-radius: 14px; min-height: 56px; }
.ck-web .ck-web-codice { padding: .5rem .9rem; }
.ck-web .carta.porta { border-radius: 12px; }
.ck-web .ck-web-invito { border-radius: 16px; }

/* --- la vetrina pubblica del seminar e la registrazione dell'ospite ------------------------- */
.ep .ep-carta { border-radius: 14px; }
.ep .ep-blocco h4 { font-size: 11.5px; letter-spacing: .06em; }
.ep .ep-modulo .azioni-carta { margin-top: 1rem; }

/* --- la demo e la proposta d'incarico ------------------------------------------------------ */
.dm-chips .chip { min-height: 36px; border-radius: 10px; }
.pr-impegno, .impegno { border-radius: 11px; }

/* --- la privacy: un documento su una carta ------------------------------------------------- */
.privacy-doc { border-radius: 14px; }