/* ============================================================
PAIDEAXIS — Foglio di stile unico
------------------------------------------------------------
Questo file sostituisce gli stili che prima erano ripetuti
dentro ogni singola pagina. Modificando qui, il cambiamento
vale per tutto il gestionale.
Impostazione grafica: leggera e sobria.
Testo di peso normale, bordi sottili, poche ombre, molto
spazio bianco. Le grandezze e i colori sono tutti definiti
nella sezione 1: cambiando li', cambia tutto il gestionale.
============================================================ */
/* --- 1. VARIABILI ----------------------------------------- */
:root {
/* Superfici */
--background: #f7f8fa;
--surface: #ffffff;
--surface-soft: #fbfcfd;
/* Testo */
--text: #1f2733;
--text-soft: #4a5563;
--muted: #8590a0;
/* Linee */
--border: #e8ebf0;
--border-strong: #dde1e8;
/* Colore principale */
--accent: #2f6bc4;
--accent-soft: #eff4fb;
--accent-text: #2159a8;
/*
* Vecchi nomi degli stessi colori, ancora usati dalle pagine che
* avevano un foglio di stile proprio. Tenerli qui evita di
* riscrivere quelle pagine solo per rinominare una variabile.
*/
--blue: var(--accent);
--navy: #1f2733;
--danger: var(--red);
--danger-background: var(--red-background);
--warning: var(--orange);
--warning-background: var(--orange-background);
/* Colori di stato, tenui */
--green: #1a7a58;
--green-background: #edf7f3;
--red: #b03a2e;
--red-background: #fdf1ef;
--orange: #96601a;
--orange-background: #fdf5e9;
--purple: #6246b8;
--purple-text: #4a3596;
--purple-soft: #ddd7f5;
--purple-background: #f4f2fc;
--grey-background: #f1f3f6;
/* La riga pari di un elenco: si deve vedere a colpo d'occhio senza
diventare una banda. Fra il bianco e il grigio dei comandi. */
--riga-alterna: #f6f8fa;
/* Barra laterale.
Per tornare alla versione scura basta sostituire questi
cinque valori con:
--sidebar-bg: #17243b;
--sidebar-text: rgba(255,255,255,.78);
--sidebar-text-strong: #ffffff;
--sidebar-hover: rgba(255,255,255,.08);
--sidebar-border: transparent; */
/* Bianca contro il grigio della pagina: e' quel salto a far
leggere la barra come un pannello a se'. Averla schiarita di
poco, come avevo provato, la faceva sparire nel fondo. */
--sidebar-bg: #ffffff;
--sidebar-text: #4b5565;
--sidebar-text-strong: #16202e;
--sidebar-hover: #eef1f6;
--sidebar-border: var(--border);
--sidebar-width: 252px;
--radius: 10px;
--radius-lg: 14px;
}
/* --- 2. BASE ---------------------------------------------- */
* { box-sizing: border-box; }
body {
min-height: 100vh;
margin: 0;
color: var(--text);
background: var(--background);
font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
font-size: 14px;
font-weight: 400;
line-height: 1.55;
letter-spacing: -0.005em;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
button, input, select, textarea { font: inherit; letter-spacing: inherit; }
h1, h2, h3, h4 {
font-weight: 500;
letter-spacing: -0.018em;
line-height: 1.3;
}
a { color: var(--accent-text); }
.muted { color: var(--muted); }
.small { font-size: 12px; }
.list-clean { margin: 0; padding-left: 18px; }
.list-clean li { margin-bottom: 5px; }
/* --- 3. STRUTTURA ----------------------------------------- */
.app-shell {
display: grid;
grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
min-height: 100vh;
}
/* Barra laterale */
.sidebar {
position: sticky;
top: 0;
height: 100vh;
display: flex;
flex-direction: column;
padding: 20px 14px;
overflow-y: auto;
color: var(--sidebar-text);
background: var(--sidebar-bg);
border-right: 1px solid var(--sidebar-border);
}
.brand {
display: flex;
align-items: center;
gap: 11px;
padding: 4px 10px 26px;
}
.brand-mark {
width: 34px;
height: 34px;
display: grid;
place-items: center;
flex: 0 0 34px;
color: var(--surface);
background: var(--text);
border-radius: 9px;
font-size: 12px;
font-weight: 600;
letter-spacing: .02em;
}
.brand strong {
display: block;
color: var(--sidebar-text-strong);
font-size: 14px;
font-weight: 500;
}
.brand span {
display: block;
margin-top: 1px;
color: var(--muted);
font-size: 11px;
font-weight: 400;
}
/*
* Le voci erano tutte uguali e tutte sullo stesso fondo: si leggeva una
* colonna di parole, non dei gruppi. Ogni gruppo ora e' staccato da una
* linea, l'etichetta e' piu' scura di prima e la voce aperta ha una
* barretta a sinistra che si vede senza doverla cercare.
*/
.sidebar-group + .sidebar-group {
margin-top: 14px;
padding-top: 12px;
border-top: 1px solid var(--border);
}
.sidebar-label {
margin: 0 12px 6px;
color: var(--muted);
font-size: 10px;
font-weight: 600;
letter-spacing: .1em;
text-transform: uppercase;
}
.sidebar-link {
min-height: 38px;
display: flex;
align-items: center;
gap: 11px;
margin-bottom: 1px;
padding: 0 12px;
color: var(--sidebar-text);
border-radius: 8px;
text-decoration: none;
font-size: 13.5px;
font-weight: 400;
transition: background-color .12s ease, color .12s ease;
}
.sidebar-link:hover { color: var(--sidebar-text-strong); background: var(--sidebar-hover); }
.sidebar-link.active {
position: relative;
color: var(--accent-text);
background: var(--accent-soft);
font-weight: 600;
}
/* La barretta: dice dove sei anche a colpo d'occhio, e resta visibile
quando il menu e' ridotto alle sole icone. */
.sidebar-link.active::before {
content: '';
position: absolute;
top: 8px;
bottom: 8px;
left: 0;
width: 3px;
background: var(--accent);
border-radius: 0 3px 3px 0;
}
.sidebar-link i { width: 18px; font-size: 17px; text-align: center; color: var(--muted); }
.sidebar-link:hover i { color: var(--sidebar-text-strong); }
.sidebar-link.active i { color: var(--accent); }
.sidebar-footer {
margin-top: auto;
padding: 18px 12px 2px;
color: var(--muted);
font-size: 11px;
line-height: 1.5;
}
.sidebar-toggle { display: none; }
.sidebar-backdrop { display: none; }
/* Pulsante che riduce il menu alle sole icone */
.sidebar-compact-toggle {
min-height: 34px;
display: flex;
align-items: center;
gap: 11px;
margin-top: 10px;
padding: 0 12px;
color: var(--muted);
background: none;
border: 0;
border-radius: 8px;
font-size: 12.5px;
text-align: left;
cursor: pointer;
}
.sidebar-compact-toggle:hover { color: var(--text); background: var(--sidebar-hover); }
.sidebar-compact-toggle i { width: 18px; font-size: 17px; text-align: center; }
@media (min-width: 901px) {
/*
* Menu compatto: restano solo le icone, il contenuto guadagna
* quasi 190 pixel. La scelta viene ricordata dal browser.
*/
body.nav-compact { --sidebar-width: 64px; }
body.nav-compact .sidebar { padding: 20px 10px; align-items: center; }
body.nav-compact .brand { gap: 0; padding: 4px 0 22px; }
body.nav-compact .brand > div:last-child { display: none; }
body.nav-compact .sidebar-label { display: none; }
body.nav-compact .sidebar-footer { display: none; }
body.nav-compact .sidebar-link {
justify-content: center;
padding: 0;
width: 44px;
}
body.nav-compact .sidebar-link span { display: none; }
body.nav-compact .sidebar-compact-toggle { justify-content: center; padding: 0; width: 44px; }
body.nav-compact .sidebar-compact-toggle span { display: none; }
/* Ridotto alle icone le etichette spariscono, ma la linea che
separa i gruppi resta: e' l'unica cosa che dice dove finisce
una famiglia di voci e dove comincia l'altra. */
body.nav-compact .sidebar-group + .sidebar-group {
margin-top: 10px;
padding-top: 10px;
}
body.nav-compact .sidebar-link.active::before { left: -10px; }
}
@media (max-width: 900px) {
.sidebar-compact-toggle { display: none; }
}
/* Intestazione */
.main { min-width: 0; }
.header {
position: sticky;
top: 0;
z-index: 30;
min-height: 64px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
padding: 0 30px;
background: rgba(255, 255, 255, .88);
border-bottom: 1px solid var(--border);
backdrop-filter: blur(10px);
}
.header h1 { margin: 0; font-size: 18px; font-weight: 500; }
.header p { margin: 2px 0 0; color: var(--muted); font-size: 12.5px; }
.header-titles { min-width: 0; }
.header-titles h1 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-area { display: flex; align-items: center; gap: 10px; }
.user-badge {
padding: 0 2px;
color: var(--text-soft);
font-size: 13px;
font-weight: 400;
white-space: nowrap;
}
.container {
width: 100%;
max-width: 1440px;
margin: 0 auto;
padding: 30px;
}
/* --- 4. COMPONENTI ---------------------------------------- */
/* Pulsanti */
.logout-button, .button {
min-height: 36px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 7px;
padding: 0 13px;
border: 1px solid var(--border-strong);
border-radius: 8px;
font-size: 13px;
font-weight: 400;
text-decoration: none;
white-space: nowrap;
cursor: pointer;
transition: background-color .12s ease, border-color .12s ease;
}
.logout-button, .button-secondary { color: var(--text-soft); background: var(--surface); }
.logout-button:hover, .button-secondary:hover { background: var(--surface-soft); border-color: var(--muted); }
.button-primary {
color: var(--surface);
background: var(--accent);
border-color: var(--accent);
font-weight: 500;
}
.button-primary:hover { background: var(--accent-text); border-color: var(--accent-text); }
.button-danger { color: var(--surface); background: var(--red); border-color: var(--red); }
.button:disabled, .button[disabled] { opacity: .5; cursor: not-allowed; }
.button i { font-size: 16px; }
/* Riquadri statistiche */
.statistics-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 14px;
margin-bottom: 22px;
}
.stat-card {
display: flex;
align-items: center;
gap: 13px;
padding: 18px 20px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
}
.stat-icon {
width: 36px;
height: 36px;
display: grid;
place-items: center;
flex: 0 0 36px;
color: var(--accent);
background: var(--accent-soft);
border-radius: 9px;
font-size: 18px;
}
.stat-card strong {
display: block;
font-size: 22px;
font-weight: 500;
letter-spacing: -0.02em;
}
.stat-card span { display: block; margin-top: 1px; color: var(--muted); font-size: 12.5px; }
/* Schede contenuto */
.content-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
overflow: hidden;
}
.card-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
padding: 22px 26px;
border-bottom: 1px solid var(--border);
}
.card-header h2 { margin: 0; font-size: 17px; font-weight: 500; }
.card-header p { margin: 4px 0 0; color: var(--muted); font-size: 12.5px; }
.header-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
/* Intestazione con icona: serve a distinguere una scheda dall'altra
quando una pagina ne impila diverse, tutte con lo stesso bordo. */
.card-title {
display: flex;
align-items: center;
gap: 13px;
min-width: 0;
}
.card-icon {
display: flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
flex: 0 0 auto;
background: var(--surface-soft);
border: 1px solid var(--border);
border-radius: 10px;
color: var(--muted);
font-size: 17px;
}
.is-primary .card-icon {
background: var(--accent-soft);
border-color: transparent;
color: var(--accent-text);
}
.content-card.is-primary { border-color: color-mix(in srgb, var(--accent) 26%, var(--border)); }
.content-card.is-primary > .card-header {
background: linear-gradient(
to bottom,
color-mix(in srgb, var(--accent) 5%, var(--surface)),
var(--surface)
);
}
.detail-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 18px; }
.detail-card {
padding: 24px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
}
.detail-card h2 { margin: 0 0 18px; font-size: 15px; font-weight: 500; }
.definition-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.definition dt {
color: var(--muted);
font-size: 10.5px;
font-weight: 500;
letter-spacing: .05em;
text-transform: uppercase;
}
.definition dd { margin: 5px 0 0; font-size: 13.5px; line-height: 1.55; white-space: pre-line; }
/* Filtri e moduli */
.filters {
display: grid;
grid-template-columns: minmax(240px, 2fr) repeat(3, minmax(150px, 1fr)) auto;
gap: 10px;
padding: 16px 26px;
background: var(--surface-soft);
border-bottom: 1px solid var(--border);
}
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { color: var(--text-soft); font-size: 12px; font-weight: 500; }
.input, .select, .textarea {
width: 100%;
color: var(--text);
background: var(--surface);
border: 1px solid var(--border-strong);
border-radius: 8px;
outline: none;
transition: border-color .12s ease, box-shadow .12s ease;
}
.input, .select { min-height: 38px; padding: 0 11px; }
.textarea { min-height: 104px; padding: 10px 11px; resize: vertical; }
.input::placeholder, .textarea::placeholder { color: var(--muted); }
.input:focus, .select:focus, .textarea:focus {
border-color: var(--accent);
box-shadow: 0 0 0 3px rgba(47, 107, 196, .1);
}
.help { color: var(--muted); font-size: 11.5px; }
.error { color: var(--red); font-size: 11.5px; font-weight: 500; }
.form-card { padding: 26px; }
.form-section { padding: 0 0 26px; margin-bottom: 26px; border-bottom: 1px solid var(--border); }
.form-section:last-child { margin: 0; padding: 0; border: 0; }
.form-section h2 { margin: 0 0 4px; font-size: 16px; font-weight: 500; }
.form-section > p { margin: 0 0 20px; color: var(--muted); font-size: 12.5px; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 40px; }
.form-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.field-full { grid-column: 1 / -1; }
.checkbox-row { display: flex; align-items: center; gap: 9px; min-height: 38px; }
.checkbox-row input { width: 16px; height: 16px; accent-color: var(--accent); }
/* Sostituita dalla versione condivisa in fondo al file. */
/* Avvisi */
.alert {
margin-bottom: 18px;
padding: 13px 16px;
border-radius: var(--radius);
font-size: 13px;
}
.alert-success { color: var(--green); background: var(--green-background); border: 1px solid var(--green-background); }
.alert-error { color: var(--red); background: var(--red-background); border: 1px solid var(--red-background); }
.alert-info { color: var(--accent-text); background: var(--accent-soft); border: 1px solid var(--accent-soft); }
.alert strong { font-weight: 500; }
/*
«hidden» deve nascondere.
Il browser da' a [hidden] un «display: none», ma e' una regola
dell'agente utente: qualunque nostra regola con un display la batte.
Cosi' «.button», «.field» e «.scheda-riepilogo» — che un display ce
l'hanno — restavano visibili anche con l'attributo addosso. Il
pulsante «avanti» non spariva sull'ultima tappa e, premuto, faceva
ripartire il percorso da capo; i campi che dovevano sparire
restavano.
Vale per tutta l'applicazione, non solo per la pagina dove si e'
visto.
*/
[hidden] { display: none !important; }
/* Tabelle */
.table-wrap { width: 100%; overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th, td {
padding: 14px 16px;
border-bottom: 1px solid var(--border);
text-align: left;
vertical-align: top;
}
th {
color: var(--muted);
background: var(--surface-soft);
font-size: 10.5px;
font-weight: 500;
letter-spacing: .06em;
text-transform: uppercase;
white-space: nowrap;
}
td { font-size: 13px; color: var(--text-soft); }
tbody tr:last-child td { border-bottom: 0; }
/*
* Righe alternate.
*
* Venticinque righe tutte bianche si leggono tenendo il dito sullo
* schermo: a meta' tabella non si sa piu' se «5 giorni fa» e' di questa
* riga o di quella sopra. Il grigio e' quello piu' chiaro che abbiamo,
* e il passaggio del mouse usa quello dopo — se fossero lo stesso, su
* una riga pari il passaggio non si vedrebbe.
*/
tbody tr:nth-child(even) { background: var(--riga-alterna); }
tbody tr:hover { background: var(--grey-background); }
.teacher-name { color: var(--text); font-weight: 500; text-decoration: none; }
.teacher-name:hover { color: var(--accent-text); }
.row-actions { display: flex; gap: 6px; flex-wrap: wrap; }
/* Etichette di stato */
.badge {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 3px 9px;
border-radius: 6px;
font-size: 11.5px;
font-weight: 400;
white-space: nowrap;
}
.badge-blue { color: var(--accent-text); background: var(--accent-soft); }
.badge-green { color: var(--green); background: var(--green-background); }
.badge-orange { color: var(--orange); background: var(--orange-background); }
.badge-red { color: var(--red); background: var(--red-background); }
.badge-grey { color: var(--text-soft); background: var(--grey-background); }
.badge-purple { color: var(--purple); background: var(--purple-background); }
.chips { display: flex; flex-wrap: wrap; gap: 4px; max-width: 360px; }
.chip {
padding: 3px 8px;
color: var(--text-soft);
background: var(--grey-background);
border-radius: 6px;
font-size: 11px;
}
/* Stato vuoto */
.empty-state { padding: 58px 24px; text-align: center; }
.empty-state i { color: var(--border-strong); font-size: 34px; }
/* Il marchio al posto del simbolo, dove il saluto e' la prima cosa che
si legge: un'icona generica da libreria diceva «una pagina vuota», il
marchio dice di chi e' la pagina. */
.empty-logo {
display: block;
margin: 0 auto 14px;
border-radius: 14px;
}
.empty-state h3 { margin: 14px 0 5px; font-size: 15px; font-weight: 500; }
.empty-state p { margin: 0; color: var(--muted); font-size: 13px; }
/* Menu azioni a tendina */
/* Un contenitore che scorre in orizzontale ritaglia anche in verticale
— la specifica dice che l'altro asse diventa «auto» — e la tendina
spariva dentro il bordo della tabella. Mentre un menu e' aperto il
ritaglio si toglie: se ne apre uno per volta. */
.table-wrap:has(.action-menu[open]) { overflow: visible; }
.action-menu { position: relative; display: inline-block; }
.action-menu > summary {
width: 34px;
height: 34px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid transparent;
border-radius: 8px;
background: none;
color: var(--muted);
cursor: pointer;
list-style: none;
}
.action-menu > summary::-webkit-details-marker { display: none; }
.action-menu > summary:hover,
.action-menu[open] > summary {
border-color: var(--border-strong);
background: var(--surface);
color: var(--text);
}
.action-menu > summary i { font-size: 19px; }
.action-menu-dropdown {
position: absolute;
z-index: 40;
top: calc(100% + 6px);
right: 0;
min-width: 156px;
padding: 5px;
border: 1px solid var(--border);
border-radius: var(--radius);
background: var(--surface);
box-shadow: 0 10px 30px rgba(22, 30, 44, .1);
text-align: left;
/* Qui dentro si va a capo. La cella dei comandi dice «non andare a
capo» — serve ai pulsanti in fila — e la regola si eredita: le
note del menu restavano su una riga sola e uscivano dal riquadro. */
white-space: normal;
}
.action-menu-dropdown a,
.action-menu-dropdown button {
width: 100%;
display: flex;
align-items: center;
gap: 9px;
padding: 8px 10px;
border: 0;
border-radius: 7px;
background: none;
color: var(--text-soft);
font-size: 13px;
font-weight: 400;
text-align: left;
text-decoration: none;
white-space: nowrap;
cursor: pointer;
}
.action-menu-dropdown a:hover,
.action-menu-dropdown button:hover:not(:disabled) {
background: var(--surface-soft);
color: var(--text);
}
.action-menu-dropdown i { width: 17px; font-size: 17px; }
/* In colonna, il «details» si allarga a tutta la riga mentre i puntini
restano a sinistra: la tendina finiva all'altro capo dello schermo. */
.page-action-buttons .action-menu { align-self: flex-start; }
/* Quello che non si disfa, in fondo e staccato: si legge come una cosa
diversa dalle altre voci, non come la prossima della fila. */
.action-menu-dropdown .is-danger {
margin-top: 4px;
padding-top: 9px;
border-top: 1px solid var(--border);
color: var(--red);
}
.action-menu-dropdown .is-danger:hover:not(:disabled) { background: rgba(176, 58, 46, .07); color: var(--red); }
.action-menu-dropdown .is-danger:disabled { opacity: .45; cursor: not-allowed; }
.actions-cell { width: 56px; text-align: right; }
/*
* Verso l'alto solo quando sotto non ci sta.
*
* Qui il menu saliva sulle ultime due righe della tabella, per non
* farsi tagliare in fondo. Ma «ultima riga» non vuol dire «in fondo
* allo schermo»: con un risultato solo — una ricerca — quell'unica riga
* e' anche l'ultima, e il menu si apriva sopra, finendo addosso ai
* filtri. La decisione la prende chi puo' misurare lo spazio, cioe' la
* pagina: vedi «apre-in-alto» nel layout.
*/
.action-menu-dropdown.apre-in-alto {
top: auto;
bottom: calc(100% + 6px);
}
/* Curriculum */
.cv-item {
display: grid;
grid-template-columns: auto 1fr auto;
gap: 12px;
align-items: center;
padding: 14px 0;
border-bottom: 1px solid var(--border);
}
.cv-item:last-child { border-bottom: 0; }
.cv-icon {
width: 34px;
height: 34px;
display: grid;
place-items: center;
color: var(--accent);
background: var(--accent-soft);
border-radius: 8px;
font-size: 17px;
}
.cv-name { font-size: 12.5px; font-weight: 500; word-break: break-word; }
.cv-meta { margin-top: 3px; color: var(--muted); font-size: 11px; }
.cv-version-link { display: inline-flex; align-items: center; text-decoration: none; }
.cv-version-link:hover .badge { background: var(--accent-soft); color: var(--accent-text); }
/* --- 5. SCHERMI PICCOLI ----------------------------------- */
@media (max-width: 1080px) {
.statistics-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.detail-grid { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
/*
* Su tablet e telefono la barra laterale non occupa piu' la
* parte alta della pagina: si apre con il pulsante nella barra
* in alto e scorre sopra il contenuto.
*/
.app-shell { display: block; }
.sidebar {
position: fixed;
z-index: 60;
top: 0;
left: 0;
width: min(280px, 84vw);
height: 100vh;
transform: translateX(-100%);
transition: transform .22s ease;
box-shadow: 0 0 40px rgba(22, 30, 44, .1);
}
.sidebar-backdrop {
display: block;
position: fixed;
z-index: 50;
inset: 0;
background: rgba(22, 30, 44, .3);
opacity: 0;
pointer-events: none;
transition: opacity .22s ease;
}
body.nav-open .sidebar { transform: translateX(0); }
body.nav-open .sidebar-backdrop { opacity: 1; pointer-events: auto; }
body.nav-open { overflow: hidden; }
.sidebar-toggle {
width: 38px;
height: 38px;
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 38px;
border: 1px solid var(--border-strong);
border-radius: 8px;
background: var(--surface);
color: var(--text-soft);
font-size: 20px;
cursor: pointer;
}
.header { gap: 12px; padding: 11px 18px; }
.header h1 { font-size: 16px; }
/* Il sottotitolo non sparisce: su un corso individuale è lì che
c'è scritto di chi è, e senza quello due corsi omonimi
diventano lo stesso corso. Si stringe, non si nasconde. */
.header p { font-size: 11.5px; }
.user-badge { display: none; }
.container { padding: 18px; }
}
@media (max-width: 680px) {
.statistics-grid,
.filters,
.form-grid,
.form-grid-3,
.definition-grid { grid-template-columns: 1fr; }
.field-full { grid-column: auto; }
.card-header { align-items: flex-start; flex-direction: column; }
.form-actions { position: static; margin-top: 24px; }
.pagination { align-items: flex-start; flex-direction: column; }
.chips { max-width: none; }
}
/* --- SCORCIATOIE DELLA DASHBOARD --------------------------- */
.dashboard-links { padding: 6px 0; }
.dashboard-link {
display: grid;
grid-template-columns: 40px minmax(0, 1fr) 20px;
gap: 14px;
align-items: center;
padding: 16px 26px;
border-bottom: 1px solid var(--border);
color: var(--text);
text-decoration: none;
}
.dashboard-link:last-child { border-bottom: 0; }
.dashboard-link:hover { background: var(--surface-soft); }
.dashboard-link-icon {
width: 40px;
height: 40px;
display: grid;
place-items: center;
color: var(--accent);
background: var(--accent-soft);
border-radius: 10px;
font-size: 20px;
}
.dashboard-link strong { display: block; font-size: 14px; font-weight: 500; }
.dashboard-link span span { display: block; margin-top: 2px; color: var(--muted); font-size: 12.5px; }
.dashboard-link-arrow { color: var(--muted); font-size: 18px; }
/* --- CONFERMA DELLE AZIONI IRREVERSIBILI ------------------- */
.confirm-modal {
position: fixed;
z-index: 100;
inset: 0;
display: none;
align-items: center;
justify-content: center;
padding: 20px;
}
.confirm-modal.is-visible { display: flex; }
/* Accesso e cambio password: nessuna barra laterale, quindi la
scheda si centra nella finestra invece di appoggiarsi in alto a
sinistra. Il body condiviso non puo' centrare per conto suo: le
pagine interne hanno la propria impalcatura. */
.auth-body {
display: grid;
place-items: center;
padding: 24px;
box-sizing: border-box;
}
@media (max-height: 640px) {
/* Su finestre basse la scheda parte dall'alto e si scorre,
invece di essere tagliata sopra e sotto. */
.auth-body { align-items: start; }
}
body.modal-open { overflow: hidden; }
.confirm-backdrop {
position: absolute;
inset: 0;
background: rgba(22, 30, 44, .42);
backdrop-filter: blur(2px);
}
.confirm-card {
position: relative;
width: min(440px, 100%);
padding: 28px;
background: var(--surface);
border-radius: var(--radius-lg);
box-shadow: 0 24px 70px rgba(22, 30, 44, .22);
text-align: center;
}
.confirm-close {
position: absolute;
top: 14px;
right: 14px;
width: 32px;
height: 32px;
display: grid;
place-items: center;
border: 0;
border-radius: 8px;
background: none;
color: var(--muted);
font-size: 18px;
cursor: pointer;
}
.confirm-close:hover { background: var(--surface-soft); color: var(--text); }
.confirm-icon {
width: 48px;
height: 48px;
display: grid;
place-items: center;
margin: 0 auto 16px;
color: var(--red);
background: var(--red-background);
border-radius: 14px;
font-size: 24px;
}
.confirm-card h2 { margin: 0 0 8px; font-size: 18px; }
.confirm-message {
margin: 0;
color: var(--text-soft);
font-size: 13px;
line-height: 1.6;
}
.confirm-subject {
margin-top: 16px;
padding: 12px 14px;
background: var(--surface-soft);
border: 1px solid var(--border);
border-radius: var(--radius);
}
.confirm-subject span {
display: block;
color: var(--muted);
font-size: 10.5px;
font-weight: 500;
letter-spacing: .05em;
text-transform: uppercase;
}
.confirm-subject strong { display: block; margin-top: 3px; font-size: 13px; font-weight: 500; }
.confirm-form { margin-top: 20px; text-align: left; }
.confirm-form > label {
display: block;
margin-bottom: 6px;
color: var(--text-soft);
font-size: 12.5px;
}
.confirm-form > label strong {
padding: 1px 6px;
color: var(--red);
background: var(--red-background);
border-radius: 5px;
font-weight: 500;
letter-spacing: .04em;
}
.confirm-input { text-align: center; letter-spacing: .08em; }
.confirm-input:focus { border-color: var(--red); box-shadow: 0 0 0 3px rgba(176, 58, 46, .1); }
.confirm-actions {
display: flex;
justify-content: flex-end;
gap: 9px;
margin-top: 18px;
}
.confirm-actions .button { min-height: 38px; }
@media (max-width: 520px) {
.confirm-actions { flex-direction: column-reverse; }
.confirm-actions .button { width: 100%; }
}
/* --- COMPONENTI CONDIVISI FRA LE SEZIONI ------------------- */
/*
Nati per il Recruiting, ora usati anche da Calendario e Allievi:
il posto giusto e' il foglio comune, altrimenti una sezione li
mostra senza stile.
*/
.form-card-body {
padding: 24px 26px;
}
/*
* Barra agganciata in basso: su un corso multi-modulo il modulo
* di modifica e' lungo, e senza aggancio bisognava scendere fino
* in fondo solo per salvare.
*/
.form-actions {
position: sticky;
bottom: 0;
z-index: 20;
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
flex-wrap: wrap;
padding: 14px 26px;
background: rgba(255, 255, 255, .94);
border-top: 1px solid var(--border);
backdrop-filter: blur(10px);
}
/* Riepilogo di cio' che si sta per salvare. */
.form-actions-summary {
display: flex;
align-items: center;
gap: 10px;
color: var(--muted);
font-size: 12.5px;
}
.form-actions-summary strong { color: var(--text); font-weight: 500; }
.form-actions-buttons { display: flex; gap: 9px; margin-left: auto; }
.page-action-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 16px;
}
/* ------------------------------------------------------------
Lista di lavoro: i moduli da coprire
------------------------------------------------------------ */
.worklist-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
flex-wrap: wrap;
margin-bottom: 18px;
}
.worklist-tabs {
display: inline-flex;
gap: 2px;
padding: 3px;
background: var(--grey-background);
border-radius: 10px;
}
.worklist-tab {
padding: 7px 15px;
border-radius: 8px;
color: var(--text-soft);
font-size: 13px;
text-decoration: none;
}
.worklist-tab:hover { color: var(--text); }
/* Dove sei. Stava solo in recruiting.css, che non tutte le pagine
caricano: le schede si accendevano o no a seconda del foglio, ed e'
l'unica cosa che tiene insieme una sezione a schede. */
/* Il totale accanto a un'intestazione. Stava solo in recruiting.css, e
nelle pagine che non lo caricano usciva senza stile. */
.lavagna-totale { color: var(--muted); font-size: 13px; }
/* Un avviso che conta, ma non e' un allarme: la nota da 12px grigia
diceva «sei sotto la frequenza minima per l'attestato» con la grafica
di una postilla. */
.avviso-conta {
display: flex;
gap: 10px;
align-items: flex-start;
margin: 0 24px 20px;
padding: 12px 14px;
background: var(--surface-soft);
border-left: 3px solid var(--orange);
border-radius: 8px;
color: var(--text);
font-size: 13.5px;
line-height: 1.6;
}
.avviso-conta > i { margin-top: 2px; color: var(--orange); font-size: 18px; }
/* La lezione di oggi, isolata in cima: chi apre questa pagina cinque
minuti prima non deve scorrere due mesi di lezioni passate. */
.prossima-lezione {
display: flex;
flex-wrap: wrap;
gap: 14px;
align-items: center;
justify-content: space-between;
padding: 18px 24px;
}
.prossima-lezione .quando { font-size: 15px; font-weight: 600; }
.prossima-lezione .dettagli { color: var(--text-soft); font-size: 13px; margin-top: 3px; }
.prossima-lezione .button { white-space: nowrap; }
.worklist-tab.is-active {
background: var(--surface);
color: var(--text);
font-weight: 500;
}
/* Barra di copertura: quanti moduli hanno gia' un docente */
.coverage-bar {
height: 5px;
margin-bottom: 5px;
background: var(--grey-background);
border-radius: 999px;
overflow: hidden;
}
.coverage-bar span {
display: block;
height: 100%;
background: var(--green);
border-radius: 999px;
}
.page-action-buttons { display: flex; gap: 8px; flex-wrap: wrap; }
.form-actions-summary .is-warning { color: var(--orange); }
/* Adattamenti dei componenti condivisi agli schermi piccoli. */
@media (max-width: 620px) {
.form-actions { padding: 12px 18px; }
.form-actions-summary { width: 100%; }
.form-actions-buttons { width: 100%; }
}
@media (max-width: 760px) {
.page-action-row,
.page-action-buttons {
width: 100%;
align-items: stretch;
flex-direction: column;
}
}
@media (max-width: 560px) {
.worklist-head { align-items: stretch; flex-direction: column; }
}
/* Su schermo stretto l'icona lascia il posto al testo. */
@media (max-width: 620px) {
.card-icon { display: none; }
}
/* --- Campanella degli avvisi ------------------------------- */
.bell {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
flex: 0 0 auto;
border: 1px solid var(--border);
border-radius: 10px;
color: var(--muted);
font-size: 18px;
text-decoration: none;
}
.bell:hover { background: var(--surface-soft); color: var(--text); }
/* Con avvisi da leggere la campanella cambia colore: il pallino da
solo passa inosservato in una barra piena di elementi grigi. */
.bell.has-unread { border-color: var(--accent); color: var(--accent-text); }
.bell-count {
position: absolute;
top: -6px;
right: -6px;
min-width: 18px;
height: 18px;
display: flex;
align-items: center;
justify-content: center;
padding: 0 4px;
background: var(--red);
border-radius: 9px;
color: var(--surface);
font-size: 10.5px;
font-weight: 600;
line-height: 1;
}
/* --- Elenco degli avvisi ----------------------------------- */
.notice-row {
display: grid;
grid-template-columns: 36px minmax(0, 1fr) auto;
gap: 13px;
align-items: start;
padding: 15px 22px;
border-bottom: 1px solid var(--border);
color: inherit;
text-decoration: none;
}
.notice-row:last-child { border-bottom: 0; }
.notice-row:hover { background: var(--surface-soft); }
/* Il non letto si distingue da una barra a sinistra: un colore di
sfondo diverso su molte righe diventa rumore. */
.notice-row.is-unread { box-shadow: inset 3px 0 0 var(--accent); }
.notice-icon {
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
background: var(--surface-soft);
border-radius: 10px;
color: var(--muted);
font-size: 18px;
}
.notice-row.is-unread .notice-icon { background: var(--accent-soft); color: var(--accent-text); }
.notice-main strong { display: block; font-size: 13.5px; font-weight: 500; }
.notice-row.is-unread .notice-main strong { font-weight: 600; }
.notice-main p {
margin: 3px 0 0;
color: var(--muted);
font-size: 12.5px;
line-height: 1.5;
}
.notice-when { color: var(--muted); font-size: 11.5px; white-space: nowrap; }
@media (max-width: 700px) {
.notice-row { grid-template-columns: 36px minmax(0, 1fr); }
.notice-when { grid-column: 2; }
}
/* --- Modelli email ----------------------------------------- */
.template-body {
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: 12.5px;
line-height: 1.65;
resize: vertical;
}
.placeholder-list {
display: flex;
gap: 8px;
flex-wrap: wrap;
margin-top: 12px;
}
.placeholder {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 5px 10px;
background: var(--surface-soft);
border: 1px solid var(--border);
border-radius: 8px;
color: var(--muted);
font-size: 11.5px;
}
.placeholder code {
color: var(--accent-text);
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: 11.5px;
}
.template-test {
display: flex;
gap: 14px;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
padding: 14px 22px;
background: var(--surface-soft);
border-top: 1px solid var(--border);
}
.template-test > span {
display: inline-flex;
align-items: center;
gap: 7px;
color: var(--muted);
font-size: 12px;
}
/* Il campo del destinatario prende lo spazio che avanza, e il pulsante
resta della sua misura: su una riga sola si legge «manda una prova a
… [invia]», che è l'ordine in cui la si pensa. */
.template-test .input { flex: 1 1 240px; min-width: 0; max-width: 24rem; }
/* Spiega a chi guarda perché la pagina degli avvisi è come è. */
/*
* La nota col simbolo davanti.
*
* Era una fila flessibile, e in una fila flessibile ogni pezzo di testo
* sciolto diventa una colonna a se': con un indirizzo email in mezzo —
* lungo e non spezzabile — su telefono le colonne si stringevano a due
* caratteri e la frase finiva fuori dallo schermo. Il simbolo resta
* fuori dal testo senza dover mettere a capo la riga.
*/
.notice-who {
display: block;
margin: 14px 2px 0;
padding-left: 22px;
color: var(--muted);
font-size: 12px;
line-height: 1.6;
overflow-wrap: anywhere;
}
.notice-who > i:first-child {
float: left;
margin-left: -22px;
line-height: inherit;
}
.notice-who strong { color: var(--text); font-weight: 500; }
/* --- Stato dei controlli automatici ------------------------ */
.alerts-health {
display: flex;
gap: 10px;
align-items: flex-start;
margin-top: 16px;
padding: 13px 16px;
border: 1px solid var(--border);
border-radius: 10px;
font-size: 12.5px;
line-height: 1.55;
}
.alerts-health > i { margin-top: 1px; font-size: 17px; }
.alerts-health strong { font-weight: 600; }
.alerts-health.is-regolare { background: var(--green-background, var(--green-background)); border-color: transparent; }
.alerts-health.is-regolare > i { color: var(--green); }
/* Il ripiego funziona, ma non basta: si vede che è una situazione
provvisoria, non un via libera. */
.alerts-health.is-solo_web,
.alerts-health.is-a_mano,
.alerts-health.is-fermo,
.alerts-health.is-mai { background: var(--orange-background, var(--orange-background)); border-color: transparent; }
.alerts-health.is-solo_web > i,
.alerts-health.is-a_mano > i,
.alerts-health.is-fermo > i,
.alerts-health.is-mai > i { color: var(--orange); }
/* --- Configurazione della posta ---------------------------- */
/* Dice sempre cosa sta usando davvero il gestionale: si puo' salvare
una configurazione perfetta e non accorgersi che non e' attiva. */
.mail-state {
display: flex;
gap: 11px;
align-items: flex-start;
margin-bottom: 18px;
padding: 15px 18px;
border-radius: 10px;
font-size: 13px;
line-height: 1.6;
}
.mail-state > i { margin-top: 1px; font-size: 19px; }
.mail-state strong { font-weight: 600; }
.mail-state code { font-size: 12px; }
.mail-state.is-ok { background: var(--green-background, var(--green-background)); }
.mail-state.is-ok > i { color: var(--green); }
.mail-state.is-warning { background: var(--orange-background, var(--orange-background)); }
.mail-state.is-warning > i { color: var(--orange); }
/* Il messaggio del server di posta e' tecnico ma va letto per intero:
e' quasi sempre li' dentro che si capisce cosa manca. */
.mail-error {
display: block;
margin-top: 4px;
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: 11.5px;
line-height: 1.5;
overflow-wrap: anywhere;
}
.mail-test-controls { display: flex; gap: 8px; align-items: center; }
.mail-test-controls .input { width: 240px; }
@media (max-width: 700px) {
.mail-test-controls { width: 100%; }
.mail-test-controls .input { flex: 1; width: auto; }
}
/* --- Guida ai parametri di posta --------------------------- */
.mail-help {
margin-bottom: 18px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
}
.mail-help > summary {
display: flex;
gap: 11px;
align-items: center;
padding: 14px 20px;
cursor: pointer;
list-style: none;
user-select: none;
font-size: 13px;
}
.mail-help > summary::-webkit-details-marker { display: none; }
.mail-help > summary:hover { background: var(--surface-soft); border-radius: var(--radius-lg); }
.mail-help > summary > span { flex: 1; font-weight: 500; }
.mail-help > summary > i:first-child { color: var(--muted); font-size: 18px; }
.mail-help > summary > i:last-child { color: var(--muted); font-size: 16px; transition: transform .15s ease; }
.mail-help[open] > summary > i:last-child { transform: rotate(180deg); }
.mail-help-body { padding: 4px 20px 18px; border-top: 1px solid var(--border); }
.mail-preset {
padding: 14px 0;
border-bottom: 1px solid var(--border);
}
.mail-preset:last-of-type { border-bottom: 0; }
.mail-preset > strong { display: block; margin-bottom: 8px; font-size: 13px; font-weight: 600; }
.mail-preset dl {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
gap: 6px 18px;
margin: 0 0 10px;
}
.mail-preset dl > div { display: flex; gap: 7px; align-items: baseline; }
.mail-preset dt { color: var(--muted); font-size: 11.5px; min-width: 62px; }
.mail-preset dd { margin: 0; font-size: 12.5px; }
.mail-preset p {
margin: 0 0 8px;
color: var(--muted);
font-size: 12.5px;
line-height: 1.6;
}
.mail-preset p:last-child { margin-bottom: 0; }
.mail-help-note {
display: flex;
gap: 8px;
align-items: flex-start;
margin: 14px 0 0;
padding: 12px 14px;
background: var(--surface-soft);
border-radius: 8px;
color: var(--muted);
font-size: 12.5px;
line-height: 1.6;
}
.mail-help-note > i { margin-top: 1px; font-size: 16px; }
/* --- Regole degli avvisi automatici ------------------------ */
.rule { padding: 18px 22px; border-bottom: 1px solid var(--border); }
.rule:last-child { border-bottom: 0; }
/* Una regola spenta resta leggibile ma si vede che non lavora. */
.rule.is-off { background: var(--surface-soft); }
.rule.is-off .rule-grid { opacity: .5; }
.rule-head { margin-bottom: 14px; }
.rule-toggle {
display: inline-flex;
gap: 9px;
align-items: center;
cursor: pointer;
}
.rule-toggle strong { font-size: 14px; font-weight: 600; }
.rule-note {
display: block;
margin: 3px 0 0 25px;
color: var(--muted);
font-size: 12px;
}
.rule-grid {
display: grid;
grid-template-columns: 150px minmax(0, 1fr) minmax(0, 1.2fr);
gap: 18px;
align-items: start;
padding-left: 25px;
}
.rule-threshold { display: flex; gap: 8px; align-items: center; }
.rule-threshold .input { width: 80px; }
.rule-threshold > span { color: var(--muted); font-size: 12.5px; }
.rule-channels > label:first-child { margin-bottom: 6px; }
.rule-channel {
display: flex;
gap: 8px;
align-items: center;
padding: 5px 0;
cursor: pointer;
font-size: 12.5px;
}
.rule-channel i { color: var(--muted); font-size: 15px; }
@media (max-width: 900px) {
.rule-grid { grid-template-columns: minmax(0, 1fr); gap: 14px; padding-left: 0; }
.rule-note { margin-left: 0; }
}
/* --- Creazione di un modello ------------------------------- */
.new-template {
margin-bottom: 18px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
}
.new-template > summary {
display: flex;
gap: 11px;
align-items: center;
padding: 14px 20px;
cursor: pointer;
list-style: none;
font-size: 13px;
}
.new-template > summary::-webkit-details-marker { display: none; }
.new-template > summary:hover { background: var(--surface-soft); border-radius: var(--radius-lg); }
.new-template > summary > span { flex: 1; font-weight: 500; }
.new-template > summary > i:first-child { color: var(--accent-text); font-size: 17px; }
.new-template > summary > i:last-child { color: var(--muted); font-size: 16px; transition: transform .15s ease; }
.new-template[open] > summary > i:last-child { transform: rotate(180deg); }
.new-template > form { padding: 4px 20px 18px; border-top: 1px solid var(--border); }
.new-template-grid {
display: grid;
grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1.2fr) auto;
gap: 14px;
align-items: end;
margin-top: 14px;
}
.template-badges { display: flex; gap: 8px; align-items: center; }
@media (max-width: 900px) {
.new-template-grid { grid-template-columns: minmax(0, 1fr); }
.new-template-action .button { width: 100%; justify-content: center; }
}
/* Aggiunta di un avviso, in coda alla famiglia. */
.rule-add {
display: flex;
gap: 16px;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
padding: 14px 22px;
background: var(--surface-soft);
border-top: 1px solid var(--border);
}
.rule-add > span {
display: inline-flex;
align-items: center;
gap: 7px;
color: var(--muted);
font-size: 12px;
}
/* Sta a destra e non compete con l'interruttore. */
.rule-head { display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; }
.rule-head .rule-toggle { flex: 1; }
.rule-remove { flex: 0 0 auto; }
.rule-head .rule-note { flex-basis: 100%; margin-left: 25px; }
@media (max-width: 700px) {
.rule-add { flex-direction: column; align-items: stretch; }
.rule-add .button { justify-content: center; }
}
/* --- Attestati --------------------------------------------- */
.cert-row {
display: grid;
grid-template-columns: 108px minmax(0, 1fr) auto auto;
gap: 16px;
align-items: center;
padding: 15px 22px;
border-bottom: 1px solid var(--border);
}
.cert-row:last-child { border-bottom: 0; }
.cert-row:hover { background: var(--surface-soft); }
.cert-number strong {
display: block;
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: 13px;
font-weight: 600;
}
.cert-number span { color: var(--muted); font-size: 11px; }
.cert-main > strong { display: block; font-size: 14px; font-weight: 600; }
.cert-meta {
display: flex;
gap: 12px;
flex-wrap: wrap;
margin-top: 3px;
color: var(--muted);
font-size: 12px;
}
.cert-meta .is-missing { color: var(--orange); }
.cert-note {
margin-top: 5px;
color: var(--orange);
font-size: 11.5px;
}
/* Un dato che manca e va scritto adesso: si legge, e da lì ci si arriva. */
.cert-note.is-manca {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 5px;
margin-top: 7px;
padding: 6px 9px;
border-radius: 7px;
background: var(--orange-background);
font-size: 12.5px;
}
.cert-note.is-manca a { color: var(--orange); font-weight: 550; text-decoration: underline; }
.cert-actions { display: flex; gap: 7px; align-items: center; }
.cert-upload {
display: flex;
gap: 14px;
align-items: flex-end;
padding: 18px 22px;
background: var(--surface-soft);
border-bottom: 1px solid var(--border);
}
.cert-upload .field { flex: 1; max-width: 520px; }
.cert-help {
display: flex;
gap: 8px;
align-items: flex-start;
margin: 16px 0 0;
color: var(--muted);
font-size: 12px;
line-height: 1.6;
}
@media (max-width: 900px) {
.cert-row { grid-template-columns: minmax(0, 1fr); gap: 10px; }
.cert-upload { flex-direction: column; align-items: stretch; }
.cert-fields-head { display: none; }
.cert-field { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cert-field > label { grid-column: 1 / -1; font-weight: 500; }
}
/* --- Editor visivo dell'attestato -------------------------- */
.layout-editor {
display: grid;
grid-template-columns: minmax(0, 1fr) 320px;
gap: 20px;
padding: 0 22px 20px;
align-items: start;
}
.sheet-area { min-width: 0; }
/* Il foglio: la tela con il PDF, e sopra le aree da disegnare. */
.sheet {
position: relative;
margin: 0 auto;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 6px;
box-shadow: 0 8px 28px rgba(23, 36, 59, .12);
overflow: hidden;
user-select: none;
}
.sheet canvas { display: block; }
/* Un'area: un rettangolo con dentro il testo allineato. Il bordo
tratteggiato dice fin dove arriva, cosa che un punto non poteva
mostrare. */
.box {
position: absolute;
display: flex;
padding: 0;
border: 1px dashed var(--accent);
background: color-mix(in srgb, var(--accent) 8%, transparent);
border-radius: 2px;
cursor: grab;
overflow: hidden;
}
.box-text {
display: block;
width: 100%;
padding: 0 1px;
line-height: 1.25;
overflow-wrap: anywhere;
}
.box:hover { background: color-mix(in srgb, var(--accent) 16%, transparent); }
.box.is-dragging { cursor: grabbing; border-style: solid; }
.box.is-selected {
border-style: solid;
box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 40%, transparent);
z-index: 2;
}
.box.is-off {
background: transparent;
border-color: var(--border);
opacity: .4;
}
/* L'angolo per ridimensionare: piccolo ma afferrabile. */
.box-grip {
position: absolute;
right: -1px;
bottom: -1px;
width: 11px;
height: 11px;
background: var(--accent);
border-radius: 2px 0 2px 0;
cursor: nwse-resize;
}
.box.is-off .box-grip { display: none; }
.box:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.sheet-hint,
.sheet-error {
display: flex;
gap: 7px;
align-items: center;
justify-content: center;
margin: 12px 0 0;
color: var(--muted);
font-size: 12px;
}
.sheet-error { color: var(--orange); }
.sheet-hint kbd {
padding: 1px 5px;
background: var(--surface-soft);
border: 1px solid var(--border);
border-radius: 4px;
font-family: inherit;
font-size: 11px;
}
/* --- Elenco dei dati stampabili ---------------------------- */
.field-panel {
background: var(--surface-soft);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: 14px 16px;
}
.field-panel h3 {
margin: 0 0 10px;
color: var(--muted);
font-size: 11px;
font-weight: 600;
letter-spacing: .06em;
text-transform: uppercase;
}
.field-item {
padding: 10px 0;
border-bottom: 1px solid var(--border);
cursor: pointer;
}
.field-item:last-child { border-bottom: 0; }
.field-item.is-off .field-item-controls { opacity: .45; }
.field-item-head {
display: flex;
gap: 8px;
align-items: center;
cursor: pointer;
}
.field-item-head strong { font-size: 12.5px; font-weight: 500; }
.field-item-controls {
display: flex;
gap: 12px;
align-items: center;
flex-wrap: wrap;
margin: 7px 0 0 24px;
color: var(--muted);
font-size: 11.5px;
}
.field-item-controls > label { display: inline-flex; gap: 6px; align-items: center; }
.field-item-controls .input { width: 62px; padding: 3px 6px; font-size: 12px; }
.field-item-bold { cursor: pointer; }
.field-item-pos {
margin-left: auto;
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: 11px;
}
@media (max-width: 1100px) {
.layout-editor { grid-template-columns: minmax(0, 1fr); }
.field-panel { order: -1; }
}
/* Foglio senza PDF disegnato: si vede che è un ripiego, non un
modello vuoto caricato per sbaglio. */
.sheet.is-blank {
background:
repeating-linear-gradient(
45deg,
var(--surface-soft) 0 10px,
var(--surface) 10px 20px
);
}
/* Comandi di ogni dato: carattere, corpo, colore, stile. */
.field-item-size { display: inline-flex; gap: 4px; align-items: center; }
.field-item-controls .js-font { padding: 3px 6px; font-size: 11.5px; max-width: 110px; }
.field-item-controls .js-color {
width: 26px;
height: 24px;
padding: 0;
background: none;
border: 1px solid var(--border);
border-radius: 5px;
cursor: pointer;
}
.field-item-style { cursor: pointer; }
.field-item-style { position: relative; }
.field-item-style input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; pointer-events: none; }
.field-item-style span {
display: inline-flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 5px;
color: var(--muted);
font-size: 12px;
}
.field-item-style input:checked + span {
background: var(--accent-soft);
border-color: var(--accent);
color: var(--accent-text);
}
/* --- Editor dei testi email -------------------------------- */
.editor { background: var(--surface); border-radius: 10px; }
.editor .ql-toolbar.ql-snow,
.editor .ql-container.ql-snow { border-color: var(--border); }
.editor .ql-toolbar.ql-snow { border-radius: 10px 10px 0 0; background: var(--surface-soft); }
.editor .ql-container.ql-snow { border-radius: 0 0 10px 10px; }
.editor .ql-editor {
min-height: 220px;
font-family: inherit;
font-size: 14px;
line-height: 1.65;
}
.editor .ql-editor.ql-blank::before { font-style: normal; color: var(--muted); }
/* Il campo grezzo si vede solo se l'editor non parte. */
.editor-source {
width: 100%;
min-height: 200px;
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: 12.5px;
}
/* --- Allegati del modello ---------------------------------- */
.attach-box {
margin-top: 16px;
padding: 14px 16px;
background: var(--surface-soft);
border: 1px solid var(--border);
border-radius: 10px;
}
.attach-head { display: flex; gap: 10px; align-items: baseline; margin-bottom: 8px; }
.attach-head strong { font-size: 12.5px; font-weight: 600; }
.attach-head span { color: var(--muted); font-size: 11.5px; }
.attach-row {
display: grid;
grid-template-columns: 20px minmax(0, 1fr) auto;
gap: 10px;
align-items: center;
padding: 7px 0;
border-top: 1px solid var(--border);
}
.attach-row > i { color: var(--muted); font-size: 17px; }
.attach-row strong { display: block; font-size: 12.5px; font-weight: 500; }
.attach-row span { color: var(--muted); font-size: 11px; }
.attach-empty { margin: 0; color: var(--muted); font-size: 12px; }
.attach-upload {
display: flex;
gap: 10px;
align-items: center;
padding: 14px 22px;
border-top: 1px solid var(--border);
}
.attach-upload .input { flex: 1; max-width: 420px; }
/* Quello che l'email allega da sé: si legge prima di cercare
inutilmente il modo di caricarlo a mano. */
.attach-auto {
display: flex;
gap: 8px;
margin: 0 0 10px;
padding: 10px 12px;
color: var(--accent-text);
background: var(--accent-soft);
border-radius: var(--radius);
font-size: 12.5px;
line-height: 1.55;
}
.attach-auto i { margin-top: 1px; font-size: 15px; }
/* Il mittente e i dati da inserire, sotto ogni modello. */
.sender-box {
margin-top: 14px;
border: 1px solid var(--border);
border-radius: var(--radius);
}
.sender-box > summary {
display: flex;
gap: 10px;
align-items: center;
padding: 11px 14px;
cursor: pointer;
list-style: none;
}
.sender-box > summary::-webkit-details-marker { display: none; }
.sender-box > summary > i:first-child { color: var(--accent-text); font-size: 16px; }
.sender-box > summary > span { display: grid; gap: 2px; flex: 1; min-width: 0; }
.sender-box > summary strong { font-size: 13.5px; }
.sender-box > summary em { color: var(--muted); font-size: 12px; font-style: normal; }
.sender-box > summary > i:last-child { color: var(--muted); transition: transform .15s ease; }
.sender-box[open] > summary > i:last-child { transform: rotate(180deg); }
.sender-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 14px;
padding: 0 14px 4px;
}
.sender-note {
max-width: 760px;
padding: 0 14px 14px;
margin: 0;
color: var(--muted);
font-size: 12px;
line-height: 1.6;
}
.placeholder-box { margin-top: 14px; }
.placeholder-box > label { display: block; margin-bottom: 5px; font-size: 12.5px; font-weight: 500; }
.placeholder-box .select { max-width: 520px; }
.placeholder-box .placeholder-list { margin-top: 10px; }
/* ---------- Modelli email: una famiglia per volta ---------- */
.tpl-family {
margin-bottom: 12px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
}
.tpl-family > summary {
display: flex;
gap: 12px;
align-items: center;
padding: 15px 20px;
cursor: pointer;
list-style: none;
}
.tpl-family > summary::-webkit-details-marker { display: none; }
.tpl-family > summary:hover { background: var(--surface-soft); border-radius: var(--radius-lg); }
.tpl-family > summary > i:first-child { color: var(--accent-text); font-size: 17px; }
.tpl-family > summary > span:first-of-type {
display: grid;
gap: 2px;
flex: 1;
min-width: 0;
}
.tpl-family > summary strong { font-size: 14px; font-weight: 600; }
.tpl-family > summary em {
color: var(--muted);
font-size: 12px;
font-style: normal;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.tpl-family-count {
padding: 2px 9px;
color: var(--muted);
background: var(--grey-background);
border-radius: 999px;
font-size: 12px;
font-variant-numeric: tabular-nums;
}
.tpl-family-arrow { color: var(--muted); font-size: 16px; transition: transform .15s ease; }
.tpl-family[open] > summary > .tpl-family-arrow { transform: rotate(180deg); }
/* Le schede dentro la famiglia: rientrate, cosi' si vede che
appartengono al gruppo aperto e non alla pagina. */
.tpl-family > .content-card {
margin: 0 14px 14px;
background: var(--surface-soft);
}
/* ---------- Modelli email: codice HTML importato ---------- */
/* Il codice si legge a caratteri di larghezza fissa: e' l'unico modo
di vedere l'indentazione e di ritrovare un tag chiuso male. */
.code-source {
width: 100%;
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
font-size: 12.5px;
line-height: 1.55;
white-space: pre;
overflow-x: auto;
tab-size: 2;
}
.html-import {
border-top: 1px solid var(--border);
}
.html-import > summary {
display: flex;
gap: 10px;
align-items: center;
padding: 14px 22px;
cursor: pointer;
list-style: none;
font-size: 13.5px;
}
.html-import > summary::-webkit-details-marker { display: none; }
.html-import > summary:hover { background: var(--surface-soft); }
.html-import > summary > span { flex: 1; font-weight: 500; }
.html-import > summary > i:first-child { color: var(--accent-text); font-size: 16px; }
.html-import > summary > i:last-child { color: var(--muted); font-size: 15px; transition: transform .15s ease; }
.html-import[open] > summary > i:last-child { transform: rotate(180deg); }
.html-import-note {
margin: 0;
padding: 0 22px 12px;
max-width: 720px;
color: var(--muted);
font-size: 12.5px;
line-height: 1.6;
}
.html-import > form { padding: 0 22px 18px; }
.html-import-actions {
display: flex;
gap: 10px;
align-items: center;
margin-top: 12px;
}
.html-import-actions .input { flex: 1; max-width: 380px; }
.html-import-back {
display: flex;
gap: 12px;
align-items: center;
padding: 14px 22px;
border-top: 1px dashed var(--border);
}
.html-import-back span {
flex: 1;
color: var(--muted);
font-size: 12.5px;
line-height: 1.6;
}
.html-import-back i { margin-right: 6px; }
.html-preview {
margin-top: 12px;
border: 1px solid var(--border);
border-radius: var(--radius);
}
.html-preview > summary {
display: flex;
gap: 8px;
align-items: center;
padding: 9px 12px;
cursor: pointer;
list-style: none;
font-size: 13px;
}
.html-preview > summary::-webkit-details-marker { display: none; }
.html-preview > summary > span { flex: 1; }
.html-preview > summary > i:last-child { color: var(--muted); transition: transform .15s ease; }
.html-preview[open] > summary > i:last-child { transform: rotate(180deg); }
.html-preview iframe {
display: block;
width: 100%;
height: 520px;
border: 0;
border-top: 1px solid var(--border);
background: var(--surface);
}
@media (max-width: 700px) {
.html-import-actions { flex-direction: column; align-items: stretch; }
.html-import-back { flex-direction: column; align-items: stretch; }
}
@media (max-width: 700px) {
.attach-upload { flex-direction: column; align-items: stretch; }
}
/* --- Menu del carattere e del corpo nell'editor email ------ */
/* Quill scrive le etichette dei menu con il CSS: senza queste
righe si leggerebbe "Normal" al posto dei nomi. */
.editor .ql-picker.ql-font { width: 118px; }
.editor .ql-picker.ql-size { width: 74px; }
.editor .ql-font .ql-picker-label::before,
.editor .ql-font .ql-picker-item::before { content: 'Carattere'; }
.editor .ql-size .ql-picker-label::before,
.editor .ql-size .ql-picker-item::before { content: 'Corpo'; }
.editor .ql-font [data-value="Arial"]::before { content: 'Arial'; font-family: Arial, sans-serif; }
.editor .ql-font [data-value="Helvetica"]::before { content: 'Helvetica'; font-family: Helvetica, Arial, sans-serif; }
.editor .ql-font [data-value="Verdana"]::before { content: 'Verdana'; font-family: Verdana, sans-serif; }
.editor .ql-font [data-value="Tahoma"]::before { content: 'Tahoma'; font-family: Tahoma, sans-serif; }
.editor .ql-font [data-value="Trebuchet"]::before { content: 'Trebuchet'; font-family: 'Trebuchet MS', sans-serif; }
.editor .ql-font [data-value="Georgia"]::before { content: 'Georgia'; font-family: Georgia, serif; }
.editor .ql-font [data-value="Times"]::before { content: 'Times'; font-family: 'Times New Roman', Times, serif; }
.editor .ql-font [data-value="Garamond"]::before { content: 'Garamond'; font-family: Garamond, Georgia, serif; }
.editor .ql-font [data-value="Courier"]::before { content: 'Courier'; font-family: 'Courier New', Courier, monospace; }
.editor .ql-size [data-value="11px"]::before { content: '11'; }
.editor .ql-size [data-value="13px"]::before { content: '13'; }
.editor .ql-size [data-value="15px"]::before { content: '15'; }
.editor .ql-size [data-value="17px"]::before { content: '17'; }
.editor .ql-size [data-value="20px"]::before { content: '20'; }
.editor .ql-size [data-value="24px"]::before { content: '24'; }
.editor .ql-size [data-value="30px"]::before { content: '30'; }
/* Nell'editor si vedono con il carattere vero, così si sceglie
guardando invece che leggendo un nome. */
.editor .ql-editor [style*="Arial"] { font-family: Arial, sans-serif; }
.editor .ql-editor [style*="Verdana"] { font-family: Verdana, sans-serif; }
.editor .ql-editor [style*="Tahoma"] { font-family: Tahoma, sans-serif; }
.editor .ql-editor [style*="Trebuchet"] { font-family: 'Trebuchet MS', sans-serif; }
.editor .ql-editor [style*="Georgia"] { font-family: Georgia, serif; }
.editor .ql-editor [style*="Times"] { font-family: 'Times New Roman', Times, serif; }
.editor .ql-editor [style*="Garamond"] { font-family: Garamond, Georgia, serif; }
.editor .ql-editor [style*="Courier"] { font-family: 'Courier New', Courier, monospace; }
/* --- Modelli di attestato ---------------------------------- */
.tpl-bar {
display: flex;
gap: 14px;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
padding: 14px 22px;
background: var(--surface-soft);
border-bottom: 1px solid var(--border);
}
.tpl-list { display: flex; gap: 8px; flex-wrap: wrap; }
.tpl {
padding: 8px 13px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 9px;
color: var(--text);
text-decoration: none;
}
.tpl:hover { border-color: var(--accent); }
.tpl.is-active {
background: var(--accent-soft);
border-color: var(--accent);
}
.tpl strong { display: block; font-size: 12.5px; font-weight: 600; }
.tpl.is-active strong { color: var(--accent-text); }
.tpl span {
display: flex;
gap: 4px;
align-items: center;
margin-top: 2px;
color: var(--muted);
font-size: 11px;
}
.tpl span i { color: var(--orange); font-size: 12px; }
.tpl-new { display: flex; gap: 8px; }
.tpl-new .input { width: 210px; }
.tpl-actions {
display: flex;
gap: 14px;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
padding: 12px 22px;
border-bottom: 1px solid var(--border);
}
.tpl-actions > span {
display: inline-flex;
gap: 7px;
align-items: center;
color: var(--muted);
font-size: 12.5px;
}
.tpl-actions-buttons { display: flex; gap: 8px; align-items: center; }
/* --- Allineamento dentro l'area ---------------------------- */
.field-item-align {
display: flex;
gap: 10px;
align-items: center;
flex-wrap: wrap;
margin: 7px 0 0 24px;
}
.align-group { display: flex; }
.align-group label { cursor: pointer; }
.align-group label { position: relative; }
.align-group input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; pointer-events: none; }
.align-group span {
display: inline-flex;
align-items: center;
justify-content: center;
width: 26px;
height: 24px;
background: var(--surface);
border: 1px solid var(--border);
color: var(--muted);
font-size: 14px;
}
.align-group label:first-child span { border-radius: 5px 0 0 5px; }
.align-group label:last-child span { border-radius: 0 5px 5px 0; }
.align-group label + label span { border-left: 0; }
.align-group input:checked + span {
background: var(--accent-soft);
border-color: var(--accent);
color: var(--accent-text);
}
@media (max-width: 700px) {
.tpl-bar { flex-direction: column; align-items: stretch; }
.tpl-new .input { flex: 1; width: auto; }
}
/* Soglia: una riga sola, è una regola con un solo numero. */
.threshold-row {
display: flex;
gap: 18px;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
padding: 16px 22px;
}
.threshold-row strong { display: block; font-size: 13.5px; font-weight: 600; }
.threshold-row span { color: var(--muted); font-size: 12px; }
/* Il prossimo numero del registro aperto: si legge mentre si
configura, senza dover salvare per scoprirlo. */
.next-number {
display: inline-flex;
align-items: center;
height: 38px;
padding: 0 14px;
background: var(--accent-soft);
border-radius: 8px;
color: var(--accent-text);
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: 14px;
font-weight: 600;
}
@media (max-width: 700px) {
.threshold-row { flex-direction: column; align-items: stretch; }
}
/* --- Finestra di composizione email ------------------------ */
/* Si chiama "mailwin" e non "composer": nel CRM "composer" era gia'
il riquadro Nuova email/Nota, e un .composer { display: none }
scritto qui lo faceva sparire. */
/* Larga: si scrive un'email vera, non si compila un campo. Un testo
di venti righe dentro un riquadro stretto non si rilegge. */
.mailwin {
position: fixed;
inset: 0;
z-index: 1200;
display: none;
align-items: center;
justify-content: center;
padding: 24px;
}
.mailwin.is-visible { display: flex; }
.mailwin-backdrop { position: absolute; inset: 0; background: rgba(15, 23, 38, .55); }
.mailwin-window {
position: relative;
display: flex;
flex-direction: column;
width: min(1080px, 96vw);
max-height: 92vh;
background: var(--surface);
border-radius: var(--radius-lg);
box-shadow: 0 30px 90px rgba(15, 23, 38, .3);
overflow: hidden;
}
.mailwin-head {
display: flex;
gap: 16px;
align-items: flex-start;
justify-content: space-between;
padding: 18px 22px 14px;
border-bottom: 1px solid var(--border);
}
.mailwin-head strong { display: block; font-size: 16px; font-weight: 600; }
.mailwin-head span {
display: block;
margin-top: 3px;
color: var(--muted);
font-size: 12.5px;
line-height: 1.55;
}
.mailwin-x {
flex: 0 0 auto;
width: 32px;
height: 32px;
background: none;
border: 1px solid var(--border);
border-radius: 8px;
color: var(--muted);
font-size: 16px;
cursor: pointer;
}
.mailwin-x:hover { background: var(--surface-soft); color: var(--text); }
.mailwin-tabs { display: flex; gap: 4px; padding: 0 22px; border-bottom: 1px solid var(--border); }
.mailwin-tab {
padding: 10px 14px;
background: none;
border: 0;
border-bottom: 2px solid transparent;
color: var(--muted);
font: inherit;
font-size: 12.5px;
cursor: pointer;
}
.mailwin-tab.is-active { border-bottom-color: var(--accent); color: var(--accent-text); font-weight: 500; }
/* Il corpo scorre, l'intestazione e i pulsanti restano fermi: con un
testo lungo il pulsante Invia non deve sparire in fondo. */
.mailwin-body { flex: 1; min-height: 0; overflow-y: auto; padding: 18px 22px; }
.mailwin-pane { display: none; }
.mailwin-pane.is-active { display: block; }
.mailwin-row {
display: grid;
grid-template-columns: 74px minmax(0, 1fr);
gap: 10px;
align-items: center;
margin-bottom: 10px;
}
.mailwin-row label { color: var(--muted); font-size: 12px; }
.mailwin .editor { margin-top: 4px; }
.mailwin .editor .ql-editor { min-height: 300px; max-height: 46vh; font-size: 14px; }
.mailwin-attach {
display: flex;
gap: 12px;
align-items: center;
flex-wrap: wrap;
margin-top: 12px;
color: var(--muted);
font-size: 12.5px;
}
.mailwin-attach label { display: inline-flex; gap: 7px; align-items: center; cursor: pointer; }
.mailwin-attach input[type="file"] { max-width: 240px; font-size: 11.5px; }
.mailwin-preview {
background: var(--surface-soft);
border: 1px solid var(--border);
border-radius: 10px;
overflow: hidden;
}
.mailwin-preview-head { padding: 12px 16px; background: var(--surface); border-bottom: 1px solid var(--border); }
.mailwin-preview-head span {
display: block;
color: var(--muted);
font-size: 10px;
font-weight: 500;
letter-spacing: .05em;
text-transform: uppercase;
}
.mailwin-preview-head strong { display: block; margin-top: 2px; font-size: 14px; font-weight: 600; }
.mailwin-preview-body {
padding: 18px;
background: var(--surface);
font-size: 14px;
line-height: 1.65;
}
.mailwin-people {
margin: 0;
padding: 0 0 0 18px;
color: var(--muted);
font-size: 12.5px;
line-height: 1.8;
}
.mailwin-people .is-missing { color: var(--orange); }
.mailwin-foot {
display: flex;
gap: 16px;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
padding: 14px 22px;
background: var(--surface-soft);
border-top: 1px solid var(--border);
}
.mailwin-foot > span { color: var(--muted); font-size: 12px; }
.mailwin-actions { display: flex; gap: 8px; }
@media (max-width: 760px) {
.mailwin { padding: 0; }
.mailwin-window { width: 100vw; max-height: 100vh; border-radius: 0; }
.mailwin-row { grid-template-columns: minmax(0, 1fr); gap: 4px; }
.mailwin-foot { flex-direction: column; align-items: stretch; }
.mailwin-actions .button { flex: 1; justify-content: center; }
}
/* --- Gestione utenti --------------------------------------------
Riusa worklist, content-card, badge e table-wrap: la pagina aveva
una copia di tutti e quattro, con nomi diversi. Qui restano solo
le poche cose che le sono proprie. */
.user-search {
display: flex;
gap: 9px;
align-items: center;
flex-wrap: wrap;
flex: 1;
min-width: 260px;
}
.user-search .teacher-find-box { flex: 1; min-width: 200px; max-width: 380px; }
.user-search .select { min-width: 180px; }
.user-identity { display: flex; gap: 11px; align-items: center; min-width: 0; }
.user-initials {
width: 34px;
height: 34px;
display: grid;
place-items: center;
flex: none;
color: var(--accent-text);
background: var(--accent-soft);
border-radius: 10px;
font-size: 12px;
font-weight: 500;
}
.user-identity strong { display: block; font-size: 13.5px; font-weight: 600; }
/* Solo il blocco del nome: il quadratino delle iniziali è anche lui uno
span dentro .user-identity, e una regola generica lo faceva diventare
un blocco alto due righe, con le lettere fuori dal riquadro. */
.user-identity > div > span { display: block; margin-top: 2px; color: var(--muted); font-size: 11.5px; }
/*
* La cella dei comandi non e' una fila flessibile.
*
* Lo era, ed e' il motivo per cui la riga di confine sotto i puntini
* restava sei pixel piu' in alto delle altre: una cella che diventa
* «flex» smette di allungarsi fino in fondo alla riga, e il suo bordo
* si ferma dove finisce il contenuto. Da fuori si vede uno scalino.
*
* Allineare a destra basta, e la cella resta una cella.
*/
.user-actions {
text-align: right;
white-space: nowrap;
}
.user-actions > *,
.user-actions form > * { vertical-align: middle; }
/* Lo spazio fra un comando e l'altro, che prima faceva il «gap». Vale
anche dentro i moduli, che sono trasparenti al posizionamento. */
.user-actions .button,
.user-actions .action-menu { margin-left: 7px; }
/* I moduli di servizio non occupano posto: erano gli ultimi figli di
un flex allineato a destra, e lasciavano quattordici pixel di vuoto
sul bordo di ogni riga. */
.user-actions form { display: contents; }
.user-actions .button { white-space: nowrap; }
/* Un quadrato con la sola icona: la scritta per esteso mandava la
riga a due piani, e le righe sono venticinque. */
.user-icon-button { padding: 0; width: 36px; justify-content: center; }
.button.is-disabled { opacity: .5; pointer-events: none; }
@media (max-width: 760px) {
.user-actions { text-align: left; }
.user-search .select { flex: 1; }
}
/* --- Importazione utenti ----------------------------------------- */
.user-head-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.import-form {
display: grid;
grid-template-columns: minmax(0, 1.4fr) minmax(260px, 1fr);
gap: 18px;
padding: 20px 22px;
}
.import-list { min-height: 220px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; }
.import-side { display: grid; gap: 13px; align-content: start; }
.import-roles { display: grid; gap: 5px; margin-top: 4px; }
.import-actions { grid-column: 1 / -1; display: flex; gap: 9px; flex-wrap: wrap; }
.import-actions .button { justify-content: center; }
@media (max-width: 900px) {
.import-form { grid-template-columns: minmax(0, 1fr); }
}
/* --- Aiuto a scrivere le email ------------------------------------
Sta sopra l'editor, richiuso: non deve mettersi in mezzo a chi sa
già cosa scrivere. */
.mailwin-ai { margin: 4px 0 2px; }
.mailwin-ai-toggle {
display: inline-flex;
gap: 7px;
align-items: center;
padding: 6px 11px;
background: var(--accent-soft);
border: 1px solid var(--accent-soft);
border-radius: 999px;
color: var(--accent-text);
font: inherit;
font-size: 12.5px;
cursor: pointer;
}
.mailwin-ai-toggle:hover { background: var(--accent-soft); }
.mailwin-ai-panel {
display: grid;
gap: 9px;
margin-top: 9px;
padding: 12px 13px;
background: var(--surface-soft);
border: 1px solid var(--border);
border-radius: 11px;
}
.mailwin-ai-actions { display: flex; gap: 7px; flex-wrap: wrap; }
.mailwin-ai-actions .button { font-size: 12px; }
.mailwin-ai-state { color: var(--muted); font-size: 11.5px; min-height: 14px; }
/* --- Aree e livelli di accesso, per utente ----------------------- */
.area-grid { display: grid; gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.area-row {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 16px;
align-items: center;
padding: 13px 16px;
background: var(--surface);
}
.area-main { min-width: 0; }
.area-main strong { display: block; font-size: 13.5px; font-weight: 600; }
.area-main > span { display: block; margin-top: 2px; color: var(--muted); font-size: 11.5px; }
.area-role { margin-top: 4px; color: var(--muted); font-size: 11px; }
.area-role em { color: var(--text-soft); font-style: normal; font-weight: 500; }
.area-choices { display: flex; gap: 6px; flex-wrap: wrap; }
.area-choice { position: relative; }
.area-choice input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; pointer-events: none; }
.area-choice span {
display: inline-flex;
align-items: center;
padding: 6px 11px;
background: var(--surface-soft);
border: 1px solid var(--border-strong);
border-radius: 999px;
color: var(--text-soft);
font-size: 11.5px;
cursor: pointer;
white-space: nowrap;
}
.area-choice input:checked + span {
color: var(--accent-text);
background: var(--accent-soft);
border-color: var(--accent-soft);
font-weight: 500;
}
.area-choice input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (max-width: 820px) {
.area-row { grid-template-columns: minmax(0, 1fr); }
}
/* --- Attestato a mano -------------------------------------------- */
.cert-manual {
margin-bottom: 16px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
}
.cert-manual > summary {
display: flex;
gap: 12px;
align-items: center;
padding: 14px 20px;
cursor: pointer;
list-style: none;
}
.cert-manual > summary::-webkit-details-marker { display: none; }
.cert-manual > summary > i:first-child { color: var(--accent); font-size: 19px; }
.cert-manual > summary span { flex: 1; }
.cert-manual > summary strong { display: block; font-size: 14px; font-weight: 600; }
.cert-manual > summary em { color: var(--muted); font-size: 12px; font-style: normal; }
.cert-manual[open] .cert-manual-arrow { transform: rotate(180deg); }
.cert-manual-arrow { color: var(--muted); transition: transform .15s ease; }
.cert-manual form { padding: 0 20px 18px; }
.cert-manual-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
gap: 13px;
margin-bottom: 14px;
}
.cert-manual-wide { grid-column: 1 / -1; }
/* --- Consegna dell'attestato ------------------------------------- */
/* L'intestazione del CRM: era già una riga di titoli, ora ordina. */
.crm-sort {
display: inline-flex;
gap: 5px;
align-items: center;
color: inherit;
text-decoration: none;
}
.crm-sort:hover { color: var(--accent-text); }
.crm-sort i { font-size: 13px; opacity: .5; }
.crm-sort:hover i { opacity: 1; }
.crm-sort.is-sorted { color: var(--accent-text); }
.crm-sort.is-sorted i { color: var(--accent); opacity: 1; }
/* --- «Non adatto a»: le segnalazioni sui docenti ------------------- */
/*
* Il menu delle azioni di una riga.
*
* Dettaglio, CRM e la segnalazione erano tre comandi in fila: tre voci
* da leggere su ogni riga, per trenta candidati. Stanno sotto un
* pulsante solo e si aprono quando servono.
*/
.riga-azioni { position: relative; }
.riga-azioni > summary {
display: inline-flex;
gap: 6px;
align-items: center;
padding: 7px 12px;
color: var(--text-soft);
background: var(--surface);
border: 1px solid var(--border-strong);
border-radius: var(--radius);
cursor: pointer;
list-style: none;
font-size: 12.5px;
white-space: nowrap;
}
.riga-azioni > summary::-webkit-details-marker { display: none; }
.riga-azioni > summary:hover { color: var(--text); background: var(--surface-soft); }
.riga-azioni[open] > summary { color: var(--accent-text); border-color: var(--accent); }
.riga-azioni-menu {
position: absolute;
top: calc(100% + 4px);
right: 0;
z-index: 20;
width: 320px;
display: grid;
gap: 2px;
padding: 6px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
box-shadow: 0 12px 30px rgba(22, 30, 44, .14);
}
.riga-azione {
display: flex;
gap: 9px;
align-items: center;
width: 100%;
padding: 8px 10px;
color: var(--text-soft);
background: none;
border: 0;
border-radius: 7px;
text-align: left;
text-decoration: none;
font-size: 13px;
cursor: pointer;
}
.riga-azione:hover { color: var(--text); background: var(--surface-soft); }
.riga-azione i { color: var(--muted); font-size: 16px; }
/* «Assegna» chiude il lavoro sul modulo: e' l'unica voce del menu che
conclude qualcosa, e si vede. */
.riga-azione-forte { color: var(--accent-text); font-weight: 500; list-style: none; }
.riga-azione-forte::-webkit-details-marker { display: none; }
.riga-azione-forte i { color: var(--accent); }
.assegna-voce[open] > .riga-azione-forte { background: var(--accent-soft); }
/* Il modulo di assegnazione si apre dentro il menu, non accanto. */
.assegna-voce .assign-form {
position: static;
display: grid;
gap: 8px;
width: auto;
padding: 10px;
margin: 4px 0 2px;
background: var(--surface-soft);
border: 1px solid var(--border);
border-radius: var(--radius);
box-shadow: none;
}
.assegna-voce { border-bottom: 1px solid var(--border); margin-bottom: 4px; padding-bottom: 4px; }
@media (max-width: 900px) {
.riga-azioni-menu { right: auto; left: 0; width: min(320px, 82vw); }
}
/*
* La segnalazione dentro il menu: si distingue dalle altre due voci
* perche' non e' la stessa cosa — le prime aprono qualcosa, questa
* scrive un fatto che vale per tutte le ricerche future.
*/
.non-idoneo { border-top: 1px solid var(--border); margin-top: 4px; padding-top: 4px; }
.non-idoneo > summary {
display: flex;
gap: 9px;
align-items: center;
padding: 8px 10px;
color: var(--red);
border-radius: 7px;
cursor: pointer;
list-style: none;
font-size: 13px;
}
.non-idoneo > summary::-webkit-details-marker { display: none; }
.non-idoneo > summary:hover { background: var(--red-background); }
.non-idoneo[open] > summary { background: var(--red-background); font-weight: 500; }
.non-idoneo > summary i { font-size: 16px; }
.non-idoneo-cosa {
display: grid;
grid-template-columns: 108px minmax(0, 1fr);
gap: 6px;
}
.non-idoneo form {
display: grid;
gap: 6px;
padding: 10px;
margin: 4px 0 2px;
background: var(--surface-soft);
border: 1px solid var(--border);
border-radius: var(--radius);
}
.non-idoneo .input, .non-idoneo .select { font-size: 12px; }
.non-idoneo-elenco { display: grid; gap: 10px; }
.non-idoneo-riga {
display: flex;
gap: 12px;
align-items: flex-start;
justify-content: space-between;
padding: 10px 12px;
background: var(--surface-soft);
border: 1px solid var(--border);
border-radius: var(--radius);
}
.non-idoneo-riga strong { margin-right: 6px; font-size: 13.5px; }
/* --- La riga che ordina gli elenchi a schede ----------------------- */
.sort-bar {
display: flex;
gap: 4px;
align-items: center;
flex-wrap: wrap;
padding: 8px 12px;
margin-bottom: 12px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
}
.sort-bar-etichetta {
margin-right: 4px;
color: var(--muted);
font-size: 11.5px;
text-transform: uppercase;
letter-spacing: .06em;
}
.sort-bar-voce {
display: inline-flex;
gap: 5px;
align-items: center;
padding: 5px 10px;
color: var(--text-soft);
border-radius: 7px;
text-decoration: none;
font-size: 12.5px;
white-space: nowrap;
}
.sort-bar-voce:hover { color: var(--accent-text); background: var(--surface-soft); }
.sort-bar-voce i { color: var(--muted); font-size: 14px; opacity: .55; }
.sort-bar-voce:hover i { opacity: 1; }
.sort-bar-voce.is-sorted {
color: var(--accent-text);
background: var(--accent-soft);
font-weight: 500;
}
.sort-bar-voce.is-sorted i { color: var(--accent); opacity: 1; }
/* --- Conversazioni: il messaggio, non la sua storia ---------------- */
/* Il testo citato: c'e', ma non occupa lo schermo. */
.message-citato { margin-top: 8px; }
.message-citato > summary {
display: inline-flex;
gap: 6px;
align-items: center;
color: var(--muted);
cursor: pointer;
list-style: none;
font-size: 11.5px;
}
.message-citato > summary::-webkit-details-marker { display: none; }
.message-citato > summary:hover { color: var(--accent-text); }
.message-citato-testo {
padding: 10px 12px;
margin-top: 6px;
color: var(--muted);
background: var(--grey-background);
border-left: 3px solid var(--border-strong);
border-radius: 0 var(--radius) var(--radius) 0;
font-size: 12px;
line-height: 1.55;
white-space: pre-wrap;
max-height: 320px;
overflow-y: auto;
}
/* La giornata: il modo in cui uno si ricorda una trattativa. */
/* Le giornate stanno dentro la conversazione, e si deve vedere:
senza il rientro e la linea a sinistra sembrano righe della pagina,
non parti del thread aperto. */
.thread-body > .giornata { padding-left: 14px; border-left: 2px solid var(--border); }
.thread-body > .giornata:first-of-type { padding-top: 4px; }
.thread-body > .giornata:last-of-type { padding-bottom: 6px; }
.giornata { border-top: 1px solid var(--border); }
.giornata:first-of-type { border-top: 0; }
.giornata > summary {
position: sticky;
top: 0;
z-index: 2;
display: flex;
gap: 10px;
align-items: baseline;
padding: 9px 12px 9px 0;
background: var(--surface-soft);
cursor: pointer;
list-style: none;
}
.giornata > summary::-webkit-details-marker { display: none; }
.giornata > summary:hover { background: var(--surface-soft); }
.giornata-data { color: var(--text); font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.giornata-quanti {
padding: 1px 8px;
color: var(--muted);
background: var(--grey-background);
border-radius: 999px;
font-size: 11px;
white-space: nowrap;
}
/* L'ultima cosa detta quel giorno: si capisce se vale la pena aprire. */
.giornata-anteprima {
flex: 1;
min-width: 0;
color: var(--muted);
font-size: 12px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.giornata[open] > summary .giornata-anteprima { visibility: hidden; }
.giornata-freccia { color: var(--muted); font-size: 15px; transition: transform .15s ease; }
.giornata[open] > summary .giornata-freccia { transform: rotate(180deg); }
.giornata > .message { margin: 10px 12px 10px 0; }
/* --- Il pannello delle attività ------------------------------------ */
/* L'intestazione resta a portata anche scorrendo sei attività. */
.activity-headline {
position: sticky;
top: 0;
z-index: 3;
display: flex;
gap: 12px;
align-items: flex-start;
justify-content: space-between;
padding: 12px 0 10px;
margin-bottom: 12px;
background: var(--surface);
border-bottom: 1px solid var(--border);
}
.attivita-conti { margin: 3px 0 0; color: var(--muted); font-size: 11px; }
.attivita-conti b { color: var(--red); font-weight: 500; }
/* Quando scade, detto in parole e con il colore della fretta. */
.activity-quando { margin-top: 3px; font-size: 12px; color: var(--text-soft); }
.activity-quando.overdue { color: var(--red); font-weight: 500; }
.activity-quando.today { color: var(--orange); font-weight: 500; }
.activity-testo > summary {
color: var(--muted);
cursor: pointer;
list-style: none;
font-size: 11.5px;
}
.activity-testo > summary::-webkit-details-marker { display: none; }
.activity-testo > summary:hover { color: var(--accent-text); }
/* Le tre scelte di posticipo: si aprono sotto il pulsante. */
.posticipa > summary { list-style: none; }
.posticipa > summary::-webkit-details-marker { display: none; }
.posticipa-scelte {
display: flex;
flex-wrap: wrap;
gap: 6px;
padding: 8px;
margin-top: 6px;
background: var(--surface-soft);
border: 1px solid var(--border);
border-radius: var(--radius);
}
.posticipa-scelte .button { min-height: 30px; padding: 0 9px; font-size: 11px; }
/* Quello che e' stato fatto, per controllare e per rimediare. */
.attivita-fatte { margin-top: 16px; }
.attivita-fatte > summary {
display: inline-flex;
gap: 7px;
align-items: center;
padding: 6px 12px;
color: var(--text-soft);
background: var(--surface-soft);
border: 1px solid var(--border);
border-radius: 999px;
cursor: pointer;
list-style: none;
font-size: 12px;
}
.attivita-fatte > summary::-webkit-details-marker { display: none; }
.attivita-fatta {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 2px 10px;
align-items: center;
padding: 9px 2px;
border-bottom: 1px solid var(--border);
}
.attivita-fatta span { color: var(--text-soft); font-size: 12px; text-decoration: line-through; }
.attivita-fatta em { grid-column: 1; color: var(--muted); font-size: 11px; font-style: normal; }
.attivita-fatta .button { grid-row: 1 / 3; min-height: 28px; padding: 0 9px; font-size: 11px; }
/* --- L'impaginazione, una per tutti -------------------------------- */
.pager {
display: flex;
gap: 14px;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
padding: 14px 22px;
border-top: 1px solid var(--border);
}
/* Fuori da una scheda — sotto un elenco a schede — il bordo in alto
non ha niente a cui attaccarsi. */
.content-card + .pager,
section + .pager { border-top: 0; padding-left: 0; padding-right: 0; }
.pager-conteggio { color: var(--muted); font-size: 12.5px; }
.pager-comandi { display: flex; gap: 8px; align-items: center; }
.pager-pagina {
padding: 0 6px;
color: var(--text-soft);
font-size: 12.5px;
white-space: nowrap;
}
.pager .is-disabled { opacity: .45; pointer-events: none; }
@media (max-width: 620px) {
.pager { justify-content: center; }
.pager-comandi { flex: 1 1 100%; justify-content: center; }
}
/* --- Intestazioni che ordinano ------------------------------------ */
/* La freccia sta sempre lì, spenta: se comparisse solo al passaggio del
mouse, nessuno saprebbe che le colonne si possono ordinare. */
th.sortable { padding: 0; }
th.sortable > a {
display: flex;
gap: 6px;
align-items: center;
padding: 11px 14px;
color: inherit;
text-decoration: none;
white-space: nowrap;
}
th.sortable > a:hover { color: var(--accent-text); background: var(--surface-soft); }
th.sortable i { color: var(--muted); font-size: 14px; opacity: .55; }
th.sortable > a:hover i { opacity: 1; }
th.sortable.is-sorted > a { color: var(--accent-text); }
th.sortable.is-sorted i { color: var(--accent); opacity: 1; }
/* --- Ricerca fra gli attestati ------------------------------------ */
.cert-search {
display: flex;
gap: 10px;
align-items: center;
margin-bottom: 14px;
}
.cert-search-field {
position: relative;
flex: 1;
max-width: 620px;
}
.cert-search-field i {
position: absolute;
top: 50%;
left: 12px;
color: var(--muted);
font-size: 16px;
transform: translateY(-50%);
pointer-events: none;
}
.cert-search-field .input { width: 100%; padding-left: 36px; }
@media (max-width: 700px) {
.cert-search { flex-wrap: wrap; }
.cert-search-field { flex: 1 1 100%; max-width: none; }
}
.cert-send { display: flex; gap: 7px; align-items: center; margin: 0; }
.cert-send input[type="email"] { min-width: 210px; font-size: 12.5px; }
/* L'allegato che cambia a ogni invio: un fermaglio, non un campo
file largo come mezza riga. Il nome del file compare al posto
della scritta appena se ne sceglie uno. */
.cert-attach {
display: inline-flex;
gap: 6px;
align-items: center;
max-width: 180px;
padding: 7px 11px;
color: var(--muted);
background: var(--surface);
border: 1px dashed var(--border);
border-radius: var(--radius);
font-size: 12px;
cursor: pointer;
}
.cert-attach:hover { color: var(--text); border-color: var(--accent); }
.cert-attach input[type="file"] { display: none; }
.cert-attach span {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.cert-attach.has-file {
color: var(--accent-text);
background: var(--accent-soft);
border-style: solid;
border-color: var(--accent);
}
/* Torna indietro, in cima a una pagina di impostazioni. */
.page-back { margin: -4px 0 16px; font-size: 13px; }
.page-back a {
display: inline-flex;
gap: 6px;
align-items: center;
color: var(--muted);
text-decoration: none;
}
.page-back a:hover { color: var(--accent-text); }
.cert-review { display: grid; gap: 4px; flex: 1; min-width: 260px; }
.cert-review label { color: var(--muted); font-size: 11.5px; }
/* --- Correzione di un attestato (solo amministratore) ------------- */
.cert-edit { grid-column: 1 / -1; margin-top: 8px; }
.cert-edit > summary {
display: inline-flex;
gap: 6px;
align-items: center;
color: var(--muted);
font-size: 12px;
cursor: pointer;
list-style: none;
}
.cert-edit > summary::-webkit-details-marker { display: none; }
.cert-edit > summary:hover { color: var(--accent-text); }
.cert-edit form {
margin-top: 10px;
padding: 14px 16px;
background: var(--surface-soft);
border: 1px solid var(--border);
border-radius: 11px;
}
.cert-edit-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
gap: 11px;
}
.cert-edit-wide { grid-column: 1 / -1; }
.cert-edit-foot {
display: flex;
gap: 12px;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
margin-top: 12px;
}
/* --- Impostazioni degli attestati, richiuse ---------------------- */
.cert-settings {
margin-bottom: 14px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
}
.cert-settings > summary {
display: flex;
gap: 12px;
align-items: center;
padding: 14px 20px;
cursor: pointer;
list-style: none;
}
.cert-settings > summary::-webkit-details-marker { display: none; }
.cert-settings > summary > i:first-child { color: var(--accent); font-size: 19px; }
.cert-settings > summary span { flex: 1; min-width: 0; }
.cert-settings > summary strong { display: block; font-size: 14px; font-weight: 600; }
.cert-settings > summary em { color: var(--muted); font-size: 12px; font-style: normal; }
.cert-settings[open] .cert-settings-arrow { transform: rotate(180deg); }
.cert-settings-arrow { color: var(--muted); transition: transform .15s ease; }
.cert-settings-body { padding: 4px 20px 20px; }
.cert-settings-grid {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
gap: 24px;
margin-bottom: 16px;
}
.cert-settings-block { display: grid; gap: 14px; align-content: start; }
.cert-settings-block h3 {
margin: 0;
font-size: 12px;
font-weight: 600;
letter-spacing: .06em;
text-transform: uppercase;
color: var(--muted);
}
.cert-settings-note { margin: -4px 0 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.cert-settings-note code { font-size: 11.5px; }
.cert-links { display: grid; gap: 9px; }
.cert-link { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 10px; align-items: start; }
.cert-link-icon {
width: 34px;
height: 34px;
display: grid;
place-items: center;
margin-top: 18px;
color: var(--accent-text);
background: var(--accent-soft);
border-radius: 9px;
font-size: 17px;
}
.cert-link label { display: block; margin-bottom: 3px; color: var(--muted); font-size: 11.5px; }
@media (max-width: 900px) {
.cert-settings-grid { grid-template-columns: minmax(0, 1fr); }
}
/* ── Schede doppie ─────────────────────────────────────────────────
Due anagrafiche della stessa persona, affiancate. La scelta e'
«quale tengo»: le due schede vanno viste insieme, non una sotto
l'altra, altrimenti per confrontare un'email si scorre. */
.doppione {
padding: 20px 24px 8px;
border-bottom: 1px solid var(--border);
}
.doppione:last-child { border-bottom: 0; }
.doppione-schede {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 14px;
}
.doppione-scheda {
display: block;
padding: 14px 16px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
cursor: pointer;
}
/* Quella con piu' storia dietro e' gia' selezionata: si vede quale,
senza doverlo leggere. */
.doppione-scheda:has(input:checked) {
border-color: var(--accent);
box-shadow: 0 0 0 1px var(--accent);
}
.doppione-scelta {
display: flex;
gap: 8px;
align-items: center;
margin-bottom: 10px;
color: var(--muted);
font-size: 13px;
}
.doppione-scheda:has(input:checked) .doppione-scelta {
color: var(--accent-text);
font-weight: 600;
}
.doppione-nome {
display: block;
margin-bottom: 10px;
color: var(--text);
font-size: 16px;
font-weight: 600;
text-decoration: none;
}
.doppione-nome:hover { color: var(--accent-text); }
.doppione-nome .muted { margin-left: 6px; font-size: 12px; font-weight: 400; }
.doppione-dati { display: grid; gap: 4px; margin: 0 0 10px; }
.doppione-dati > div { display: flex; gap: 8px; font-size: 13px; }
.doppione-dati dt { flex: 0 0 96px; color: var(--muted); }
.doppione-dati dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.doppione-conti {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.doppione-conti span {
padding: 3px 9px;
background: var(--surface-soft);
border: 1px solid var(--border);
border-radius: 999px;
color: var(--muted);
font-size: 12px;
}
.doppione-azioni {
display: flex;
flex-wrap: wrap;
gap: 12px;
align-items: flex-end;
margin-top: 14px;
}
.doppione-quale { flex: 1 1 320px; }
.doppione-quale label { display: block; margin-bottom: 4px; color: var(--muted); font-size: 13px; }
.doppione-diverse { margin: 12px 0 16px; }
.doppione-diverse > summary {
color: var(--muted);
font-size: 13px;
cursor: pointer;
}
.doppione-diverse > summary:hover { color: var(--text); }
.doppione-diverse form {
display: flex;
gap: 12px;
align-items: flex-end;
margin-top: 10px;
}
.doppione-diverse .field { flex: 1 1 320px; }
/* ── Oggi ──────────────────────────────────────────────────────────
Una scheda per reparto, affiancate. Ognuna e' corta per scelta: sei
righe che si chiudono oggi valgono piu' di cento che fanno chiudere
la pagina. */
/* Una sezione per riga, a tutta larghezza.
Erano tre colonne: con sette sezioni si leggeva a zig-zag, e la riga
di una scadenza — nome, tipo, data, importo — dentro un terzo di
schermo andava a capo tre volte. */
.oggi {
display: flex;
flex-direction: column;
gap: 16px;
margin-bottom: 18px;
}
.oggi-scheda {
display: flex;
flex-direction: column;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
overflow: hidden;
}
.oggi-testa {
display: flex;
gap: 12px;
align-items: center;
padding: 16px 18px;
border-bottom: 1px solid var(--border);
}
.oggi-testa h2 { margin: 0; font-size: 15px; }
.oggi-testa p { margin: 2px 0 0; color: var(--muted); font-size: 12px; }
.oggi-icona {
display: grid;
flex: none;
place-items: center;
width: 34px;
height: 34px;
background: var(--surface-soft);
border: 1px solid var(--border);
border-radius: var(--radius);
color: var(--accent-text);
font-size: 17px;
}
.oggi-vai {
margin-left: auto;
color: var(--accent-text);
font-size: 12px;
white-space: nowrap;
text-decoration: none;
}
.oggi-vai:hover { text-decoration: underline; }
.oggi-righe { margin: 0; padding: 0; list-style: none; }
.oggi-riga {
display: flex;
gap: 12px;
align-items: baseline;
padding: 11px 18px 11px 14px;
border-bottom: 1px solid var(--border);
border-left: 3px solid transparent;
}
.oggi-riga:last-child { border-bottom: 0; }
.oggi-riga:hover { background: var(--surface-soft); }
/* L'urgenza sta a sinistra e si legge senza leggere le date: il colore
dice se una cosa e' in ritardo, il testo dice di quanto. */
.oggi-riga.is-urgente { border-left-color: var(--red); }
.oggi-riga.is-attenzione { border-left-color: var(--orange); }
.oggi-riga.is-calma { border-left-color: var(--border-strong); }
.oggi-riga a,
.oggi-riga-testo {
display: block;
flex: 1 1 auto;
min-width: 0;
color: inherit;
text-decoration: none;
}
.oggi-riga a:hover strong { color: var(--accent-text); }
.oggi-riga strong {
display: block;
font-size: 13.5px;
font-weight: 600;
overflow-wrap: anywhere;
}
.oggi-riga a > span,
.oggi-riga-testo > span {
display: block;
margin-top: 2px;
color: var(--muted);
font-size: 12px;
overflow-wrap: anywhere;
}
.oggi-riga em {
flex: none;
color: var(--muted);
font-size: 11.5px;
font-style: normal;
text-align: right;
white-space: nowrap;
}
.oggi-riga.is-urgente em { color: var(--red); font-weight: 600; }
.oggi-niente {
display: flex;
gap: 8px;
align-items: center;
margin: 0;
padding: 18px;
color: var(--muted);
font-size: 13px;
}
.oggi-niente i { color: var(--green); font-size: 16px; }
/* Le pagine di una sezione lunga: i pagamenti aperti sono centinaia, e
un elenco troncato in silenzio si legge come completo. */
.oggi-pagine {
display: flex;
flex-wrap: wrap;
gap: 8px 12px;
align-items: center;
padding: 12px 18px;
border-top: 1px solid var(--border);
}
.oggi-pagine .js-oggi-conto {
color: var(--text-soft);
font-size: 12.5px;
font-variant-numeric: tabular-nums;
}
.oggi-pagine em {
flex: 1 1 100%;
color: var(--muted);
font-size: 12px;
font-style: normal;
}
.oggi-pagine button[disabled] { opacity: .45; cursor: default; }
.oggi-perche {
margin: 0;
padding: 12px 18px;
background: var(--surface-soft);
border-bottom: 1px solid var(--border);
color: var(--muted);
font-size: 12px;
}
/* Le aree, in fondo: si arriva qui per sapere cosa fare, non per
scegliere dove andare. */
.oggi-aree {
display: flex;
flex-wrap: wrap;
gap: 10px;
padding: 16px 18px;
}
.oggi-area {
display: flex;
gap: 8px;
align-items: center;
padding: 9px 14px;
background: var(--surface-soft);
border: 1px solid var(--border);
border-radius: 999px;
color: var(--text);
font-size: 13px;
text-decoration: none;
}
.oggi-area:hover { border-color: var(--accent); color: var(--accent-text); }
.oggi-area i { color: var(--muted); font-size: 16px; }
.oggi-area:hover i { color: var(--accent-text); }
/* ── L'obiettivo del mese ──────────────────────────────────────── */
.obiettivo {
padding: 16px 18px;
border-bottom: 1px solid var(--border);
}
.obiettivo-cifre { display: flex; gap: 8px; align-items: baseline; }
.obiettivo-cifre strong { font-size: 22px; }
.obiettivo-cifre span { color: var(--muted); font-size: 13px; }
.obiettivo-barra {
position: relative;
height: 9px;
margin: 10px 0 9px;
background: var(--surface-soft);
border: 1px solid var(--border);
border-radius: 999px;
overflow: hidden;
}
.obiettivo-fatto {
height: 100%;
background: var(--accent);
border-radius: 999px;
}
/* La tacca di «dove si dovrebbe essere oggi»: senza, la barra non dice
se si e' in ritardo o in anticipo. */
.obiettivo-tacca {
position: absolute;
top: -2px;
bottom: -2px;
width: 2px;
background: var(--text);
opacity: .45;
}
.obiettivo-parole {
display: flex;
gap: 6px;
align-items: baseline;
margin: 0;
font-size: 12.5px;
}
.obiettivo-parole.is-bene { color: var(--green); }
.obiettivo-parole.is-indietro { color: var(--orange); }
/* ── La definizione di un'iscrizione ──────────────────────────────
I passi in ordine, con quello che tocca adesso in evidenza. Non e'
una lista di spunte: e' una scaletta, e la differenza fra «fatto»,
«adesso» e «dopo» deve vedersi da lontano. */
.definizione-modulo { padding: 20px 24px 24px; }
.passi {
margin: 0;
padding: 6px 0;
list-style: none;
counter-reset: passo;
}
.passo {
display: flex;
gap: 14px;
align-items: flex-start;
padding: 14px 24px;
border-bottom: 1px solid var(--border);
}
.passo:last-child { border-bottom: 0; }
.passo-segno {
display: grid;
flex: none;
place-items: center;
width: 26px;
height: 26px;
border: 1px solid var(--border-strong);
border-radius: 50%;
color: var(--muted);
font-size: 15px;
}
.passo.is-fatto .passo-segno {
background: var(--green);
border-color: var(--green);
color: #fff;
}
.passo.is-adesso .passo-segno {
border-color: var(--accent);
color: var(--accent-text);
}
.passo-corpo { flex: 1 1 auto; min-width: 0; }
.passo-corpo strong { display: block; font-size: 14px; }
.passo-corpo > span { display: block; margin-top: 2px; color: var(--muted); font-size: 12.5px; }
.passo-corpo em {
display: block;
margin-top: 5px;
color: var(--green);
font-size: 12px;
font-style: normal;
}
/* «Dopo» resta leggibile ma non chiama: se tutti i passi pesano
uguale, non si capisce quale toccherebbe adesso. */
.passo.is-dopo .passo-corpo strong { color: var(--muted); font-weight: 500; }
.passo.is-adesso .passo-corpo strong { color: var(--accent-text); }
/* Il passo che qui non si attraversa: resta in elenco, spento, col
motivo scritto. Sparire sarebbe peggio — chi guarda una pratica senza
il passo della quota non saprebbe se non era prevista o se qualcuno
ha tolto il passo. */
.passo.is-spento { opacity: .55; }
.passo.is-spento .passo-corpo strong { color: var(--muted); font-weight: 500; text-decoration: line-through; }
.passo.is-spento .passo-segno { border-style: dashed; }
.passo-perche { color: var(--muted) !important; }
.passo-reparto {
display: inline-block;
margin-top: 5px;
padding: 2px 8px;
background: var(--surface-soft);
border: 1px solid var(--border);
border-radius: 999px;
color: var(--muted);
font-size: 11px;
}
.passo-azione { flex: none; }
/* Il via libera ai reparti: parte da solo con la quota, e resta il
pulsante per mandarlo comunque. */
.avvisi {
display: flex;
flex-wrap: wrap;
gap: 10px 18px;
align-items: flex-start;
justify-content: space-between;
margin: 0 24px 14px;
padding: 12px 16px;
background: var(--green-background);
border: 1px solid var(--green);
border-radius: 10px;
}
.avvisi-testo { flex: 1 1 320px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.avvisi-testo strong { font-size: 13.5px; }
.avvisi-testo > span { color: var(--text-soft); font-size: 12.5px; line-height: 1.5; }
.avvisi-testo .input { margin-top: 4px; max-width: 420px; }
.avvisi-pulsanti { display: flex; flex-wrap: wrap; gap: 8px; flex: none; }
/* Dove sta la pratica: le uscite non sono passi avanti. */
.binario-scelta {
display: flex;
flex-direction: column;
gap: 12px;
align-items: flex-start;
padding: 0 24px 22px;
}
.binario-opzioni { display: flex; flex-wrap: wrap; gap: 8px; }
.binario-opzione {
display: inline-flex;
gap: 7px;
align-items: center;
padding: 7px 13px;
background: var(--surface);
border: 1px solid var(--border-strong);
border-radius: 999px;
font-size: 13px;
cursor: pointer;
}
.binario-opzione.is-scelta { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-text); }
.binario-scelta .campo { width: 100%; max-width: 560px; }
.rata-azioni { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.rifai-rate {
display: flex;
flex-wrap: wrap;
gap: 10px;
align-items: center;
padding: 14px 24px;
border-top: 1px solid var(--border);
color: var(--muted);
font-size: 12.5px;
}
.rifai-rate .input { width: auto; max-width: 160px; }
/* Il punto della definizione, dentro la riga di un iscritto. */
.student-definizione {
display: inline-flex;
gap: 6px;
align-items: center;
margin-top: 6px;
padding: 3px 10px;
background: var(--surface-soft);
border: 1px solid var(--orange);
border-radius: 999px;
color: var(--text);
font-size: 11.5px;
text-decoration: none;
}
.student-definizione i { color: var(--orange); font-size: 14px; }
.student-definizione:hover { border-color: var(--accent); color: var(--accent-text); }
.student-definizione.is-completa { border-color: var(--border); color: var(--muted); }
.student-definizione.is-completa i { color: var(--green); }
.obiettivi-salva {
display: flex;
flex-wrap: wrap;
gap: 12px;
align-items: center;
padding: 16px 24px;
border-top: 1px solid var(--border);
font-size: 12.5px;
}
/* L'email pronta da copiare. */
.email-pronta { padding: 20px 24px 24px; }
.email-pronta .field { margin-bottom: 14px; }
.email-pronta .textarea { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; line-height: 1.6; }
.email-azioni { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.avviso-buchi {
display: flex;
gap: 12px;
align-items: flex-start;
padding: 16px 20px;
}
.avviso-buchi > i { color: var(--orange); font-size: 20px; }
.avviso-buchi strong { display: block; font-size: 14px; }
.avviso-buchi p { margin: 3px 0 0; color: var(--muted); font-size: 13px; }
/* Chi firma l'accordo. */
.contraente {
display: flex;
gap: 16px;
align-items: flex-start;
padding: 18px 24px;
}
.contraente-chi { flex: 1 1 auto; min-width: 0; }
.contraente-chi strong { display: block; margin: 8px 0 10px; font-size: 16px; }
.contraente-nuovo { padding: 0 24px 16px; }
.contraente-nuovo > summary { color: var(--muted); font-size: 13px; cursor: pointer; }
.contraente-nuovo > summary:hover { color: var(--text); }
.contraente-nuovo .definizione-modulo { padding: 16px 0 0; }
.student-contraente {
display: flex;
gap: 6px;
align-items: center;
margin-top: 5px;
color: var(--muted);
font-size: 12px;
}
.student-contraente i { font-size: 14px; }
/* Il caricamento di un contratto. */
.carica-contratto { padding: 20px 24px 24px; }
.carica-contratto .field { max-width: 560px; margin-bottom: 16px; }
.carica-avviso {
display: flex;
gap: 12px;
align-items: flex-start;
max-width: 640px;
margin-bottom: 18px;
padding: 14px 16px;
background: var(--surface-soft);
border: 1px solid var(--border);
border-left: 3px solid var(--accent);
border-radius: var(--radius);
}
.carica-avviso > i { color: var(--accent-text); font-size: 20px; }
.carica-avviso strong { display: block; font-size: 13.5px; }
.carica-avviso p { margin: 4px 0 0; color: var(--muted); font-size: 12.5px; }
/* Quello che si e' letto nel contratto, in due colonne. */
.letto-griglia {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
gap: 28px 40px;
padding: 18px 24px 22px;
}
.letto-griglia h3 { margin: 0 0 10px; font-size: 14px; }
.carica-avviso.is-attenzione { border-left-color: var(--orange); }
.carica-avviso.is-attenzione > i { color: var(--orange); }
/* La conferma di un contratto. */
.avviso-buchi.is-grave { border-top: 1px solid var(--border); }
.avviso-buchi.is-grave > i { color: var(--orange); }
.avviso-buchi > i { color: var(--accent-text); }
.allievo-riga,
.corso-riga { border-bottom: 1px solid var(--border); }
.allievo-riga:last-child,
.corso-riga:last-child { border-bottom: 0; }
/* ── L'elenco degli iscritti a un corso ─────────────────────────────
Prima ogni riga era un blocco di testo a capo libero, con l'altezza
che cambiava secondo quanti dati c'erano: su venti iscritti non si
riusciva a confrontare due persone, perche' l'email della seconda non
stava dove stava quella della prima.
Cinque colonne, uguali per tutti, e un dato che manca lascia il suo
posto vuoto invece di far salire tutto il resto: anche il vuoto e'
un'informazione. Le righe alternano il fondo — su una griglia larga
l'occhio salta di riga a meta' strada. */
.iscritto-testa,
.iscritto-riga {
display: grid;
/* I minimi sommano 654px: entrano su un portatile da 1366. Con i
valori di prima ne servivano 818, e fra i 1100 e i 1640 la riga
sbordava e «overflow: hidden» la tagliava in silenzio — via il
pulsante dei puntini e mezzo badge di stato. */
grid-template-columns: 34px minmax(130px, 1.1fr) minmax(150px, 1.3fr) minmax(140px, 1.2fr) 104px 36px;
gap: 12px;
align-items: start;
}
.iscritto-testa {
padding: 10px 20px;
border-bottom: 1px solid var(--border);
font-size: 11px;
font-weight: 600;
letter-spacing: .04em;
text-transform: uppercase;
color: var(--text-soft);
}
.iscritto-riga { padding: 13px 20px; align-items: center; }
/* Righe alternate: il fondo e' appena accennato, perche' deve guidare
l'occhio e non dividere l'elenco in due elenchi. */
.iscritto-elenco > .iscritto-riga:nth-of-type(odd) { background: var(--surface-soft); }
.iscritto-elenco > .iscritto-riga:hover { background: var(--accent-soft); }
.iscritto-riga.is-bloccato { box-shadow: inset 3px 0 0 var(--red); }
/* La tendina delle ultime righe si apre verso l'alto, e la scheda
smette di tagliare mentre un menu è aperto: sull'ultimo iscritto —
spesso quello appena aggiunto, cioè quello su cui si sta agendo — le
voci in fondo, «Rimuovi» compresa, erano irraggiungibili. */
.content-card:has(.action-menu[open]) { overflow: visible; }
.action-menu-dropdown button:focus-visible,
.action-menu-dropdown a:focus-visible {
background: var(--surface-soft);
outline: 2px solid var(--accent);
outline-offset: -2px;
}
.iscritto-sigla {
display: grid;
place-items: center;
width: 34px;
height: 34px;
border-radius: 50%;
background: var(--accent-soft, var(--surface-soft));
border: 1px solid var(--border);
font-size: 11.5px;
font-weight: 600;
color: var(--text-soft);
}
.iscritto-chi strong { display: block; font-size: 14px; }
.iscritto-chi,
.iscritto-contatti,
.iscritto-pratica,
.iscritto-stato { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.iscritto-sotto {
display: inline-flex;
align-items: center;
gap: 5px;
font-size: 11.5px;
color: var(--text-soft);
}
/* I contatti si troncano invece di andare a capo: un'email lunga
allargava la colonna e disallineava tutte le righe sotto. */
.iscritto-contatti > span {
display: inline-flex;
align-items: center;
gap: 5px;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 12.5px;
}
.iscritto-contatti > span > i,
.iscritto-pratica > span > i,
.iscritto-sotto > i { flex: none; font-size: 13px; color: var(--text-soft); }
/* Il codice fiscale in cifre allineate: sono sedici caratteri che si
confrontano a colpo d'occhio solo se stanno in colonna. */
.iscritto-cf {
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: 11.5px;
letter-spacing: .02em;
color: var(--text-soft);
}
.iscritto-contatti .is-missing,
.iscritto-sotto.is-missing,
.iscritto-cf.is-missing { color: var(--orange); }
.iscritto-definizione {
display: inline-flex;
align-items: center;
gap: 5px;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 12.5px;
color: var(--orange);
text-decoration: none;
}
.iscritto-definizione.is-completa { color: var(--green); }
.iscritto-definizione.is-senza { color: var(--text-soft); }
a.iscritto-definizione:hover { text-decoration: underline; }
/* Le righe secondarie si troncano: «firma …» e il nome del consulente
andavano a capo su due righe e l'altezza tornava a cambiare da riga a
riga, che è il difetto che questa griglia doveva togliere. */
.iscritto-pratica .iscritto-sotto {
display: block;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.iscritto-pratica .iscritto-sotto > i { vertical-align: -2px; margin-right: 4px; }
/* A chi va la fattura non è un dettaglio come il consulente: pesa. */
.iscritto-fattura { color: var(--text); font-weight: 500; }
.iscritto-contatti a { color: inherit; text-decoration: none; }
.iscritto-contatti a:hover { text-decoration: underline; }
.iscritto-stato { align-items: flex-start; }
.iscritto-azioni { display: flex; justify-content: flex-end; }
/* Il blocco e i pannelli: sotto la riga, per tutta la sua larghezza. */
/* L'avviso del blocco resta attaccato alla sua riga: la barra rossa
continua, altrimenti restava sospeso fra due iscritti. */
.iscritto-avviso { padding: 0 20px 13px 66px; box-shadow: inset 3px 0 0 var(--red); }
/* Il pannello aperto: fondo e barra propri, non quelli della riga.
Con «surface-soft» era esattamente il fondo delle righe dispari: su
una dispari il pannello e la riga erano la stessa macchia, su una pari
staccavano — cioè si distingueva o no secondo la parità. */
.iscritto-pannello {
padding: 14px 20px 18px 66px;
border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border);
background: var(--accent-soft);
box-shadow: inset 3px 0 0 var(--accent);
}
.iscritto-pannello-titolo { margin: 0 0 8px; font-size: 13.5px; font-weight: 550; }
.iscritto-pannello-titolo span { color: var(--text-soft); font-weight: 400; }
.iscritto-pannello[hidden] { display: none; }
.iscritto-pannello > form > p { margin: 0 0 12px; font-size: 12.5px; color: var(--text-soft); max-width: 78ch; }
.iscritto-pannello-riga { margin: 0; }
.iscritto-pannello-piede { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 14px; }
.iscritto-pannello-spinta { flex: 1 1 auto; }
/* Le voci di menu che raggruppano, e quelle che separano. */
.action-menu-titolo {
display: block;
padding: 8px 12px 3px;
font-size: 10.5px;
font-weight: 600;
letter-spacing: .05em;
text-transform: uppercase;
color: var(--text-soft);
}
.action-menu-separatore {
display: block;
height: 1px;
margin: 5px 0;
background: var(--border);
}
@media (max-width: 1360px) {
/* Le colonne si impilano, e l'intestazione non ha più niente da
intestare: ogni dato porta la sua icona. */
.iscritto-testa { display: none; }
.iscritto-riga {
grid-template-columns: 38px 1fr 40px;
grid-template-areas: 'sigla chi azioni' '. contatti .' '. pratica .' '. stato .';
row-gap: 7px;
}
.iscritto-sigla { grid-area: sigla; }
.iscritto-chi { grid-area: chi; }
.iscritto-contatti { grid-area: contatti; }
.iscritto-pratica { grid-area: pratica; }
.iscritto-stato { grid-area: stato; }
.iscritto-azioni { grid-area: azioni; }
.iscritto-avviso,
.iscritto-pannello { padding-left: 20px; }
}
/* ── Iscrivere da Trello ────────────────────────────────────────── */
.trello-filtro {
display: flex;
flex-wrap: wrap;
gap: 10px;
align-items: center;
padding: 14px 20px;
border-bottom: 1px solid var(--border);
background: var(--surface-soft);
}
.trello-filtro label { font-size: 12.5px; color: var(--text-soft); }
.trello-filtro .select { width: auto; min-width: 220px; }
.trello-conto { margin-left: auto; font-size: 12.5px; color: var(--text-soft); }
.trello-conto.is-troppe { color: var(--red); font-weight: 550; }
.trello-colonna[hidden] { display: none; }
/* Le schede raggruppate per colonna della bacheca: è il modo in cui
quella bacheca è organizzata da chi ci lavora, ed è la distinzione che
serve per sapere quali portare dentro. */
.trello-colonna { border-bottom: 1px solid var(--border); }
.trello-colonna:last-of-type { border-bottom: 0; }
.trello-colonna-testa {
display: flex;
flex-wrap: wrap;
gap: 10px;
align-items: baseline;
padding: 13px 20px 4px;
}
.trello-colonna-testa h3 { margin: 0; font-size: 13.5px; }
.trello-colonna-testa .button { margin-left: auto; align-self: center; }
.trello-elenco { padding: 6px 8px; }
.trello-riga,
.trello-persona {
display: flex;
gap: 11px;
align-items: flex-start;
padding: 11px 13px;
border-radius: 9px;
cursor: pointer;
}
.trello-riga:hover,
.trello-persona:hover { background: var(--surface-soft); }
.trello-riga input,
.trello-persona input { margin-top: 3px; flex: none; }
.trello-riga strong,
.trello-persona strong { display: inline-block; font-size: 13.5px; margin-right: 7px; }
.trello-dati { display: block; margin-top: 2px; font-size: 12px; color: var(--text-soft); }
.trello-scheda { padding: 14px 20px; border-bottom: 1px solid var(--border); }
.trello-scheda:last-of-type { border-bottom: 0; }
.trello-scheda-testa { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.trello-scheda-testa > i { color: var(--text-soft); }
.trello-scheda-testa strong { font-size: 14px; }
.trello-corsi { margin: 6px 0 4px 26px; font-size: 12.5px; color: var(--text-soft); }
.trello-guaio {
display: flex;
gap: 8px;
align-items: flex-start;
margin: 9px 0 0 26px;
padding: 9px 12px;
border-radius: 8px;
background: var(--orange-background);
font-size: 12.5px;
max-width: 78ch;
}
.trello-guaio > i { color: var(--orange); flex: none; }
/* ── Importazione da Moodle ─────────────────────────────────────── */
/* «card-body» non esiste in questo foglio: le schede mettono il
loro padding dove serve. */
.moodle-corpo { padding: 18px 20px 20px; }
.moodle-passi { margin: 0 0 14px; padding-left: 20px; font-size: 13.5px; line-height: 1.7; }
.moodle-nota { margin: 0 0 18px; font-size: 12.5px; color: var(--text-soft); max-width: 78ch; }
.moodle-nota.is-grave {
display: flex;
gap: 8px;
align-items: flex-start;
margin-top: 16px;
padding: 12px 14px;
border: 1px solid var(--orange);
border-radius: 9px;
background: var(--orange-background);
color: var(--text);
}
.moodle-nota.is-grave > i { color: var(--orange); font-size: 18px; flex: none; }
/* Da quale colonna ho preso cosa: è la parte che va guardata, e va
guardata prima. Una colonna non riconosciuta si legge come un buco,
non come una riga uguale alle altre. */
.moodle-colonne {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
gap: 10px;
}
.moodle-colonna {
padding: 9px 12px;
border: 1px solid var(--border);
border-radius: 9px;
background: var(--surface-soft);
}
.moodle-colonna > span { display: block; font-size: 11px; text-transform: uppercase;
letter-spacing: .04em; color: var(--text-soft); }
.moodle-colonna > strong { display: block; margin-top: 2px; font-size: 13px; }
.moodle-colonna.is-vuota { border-style: dashed; background: none; }
.moodle-colonna.is-vuota > strong { color: var(--text-soft); font-weight: 400; font-style: italic; }
.moodle-card-piede { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end;
padding: 16px 20px; border-top: 1px solid var(--border); }
.moodle-card-piede form { display: flex; gap: 10px; align-items: center; margin: 0; }
tr.is-saltata { opacity: .55; }
.conferma-azioni {
display: flex;
flex-wrap: wrap;
gap: 14px;
align-items: center;
padding: 18px 24px;
font-size: 12.5px;
}
/* ── Le sezioni della conferma ────────────────────────────────────
Chiuse mostrano quello che si e' letto; si aprono solo dove serve
correggere. Quaranta caselle aperte tutte insieme vogliono dire
quaranta cose da leggere per scoprire che vanno bene. */
.scheda-testa {
display: flex;
gap: 16px;
align-items: flex-start;
padding: 18px 24px;
}
.scheda-testa > div { flex: 1 1 auto; min-width: 0; }
.scheda-testa h2 { margin: 0; font-size: 16px; }
.scheda-testa p { margin: 3px 0 0; color: var(--muted); font-size: 12.5px; }
/*
Due colonne, non quante ce ne stanno.
Con «auto-fit minmax(260px)» su un contenitore da 1440 uscivano
cinque colonne strette: l'etichetta prendeva il 44% e il valore
andava a capo dopo due parole. Meno colonne e piu' larghe si leggono
in una riga sola, che e' il punto.
*/
.scheda-riepilogo {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0 40px;
margin: 0;
padding: 4px 24px 20px;
}
.scheda-riepilogo > div {
display: flex;
gap: 16px;
align-items: baseline;
padding: 9px 0;
border-bottom: 1px solid var(--border);
font-size: 13.5px;
}
.scheda-riepilogo dt {
flex: 0 0 170px;
color: var(--muted);
font-size: 12.5px;
}
/* Il dato in grassetto, l'etichetta no: si legge la colonna dei
valori senza rileggere ogni volta come si chiama. */
.scheda-riepilogo dd {
margin: 0;
font-weight: 600;
overflow-wrap: anywhere;
}
.scheda-riepilogo dd.is-vuoto { font-weight: 400; }
.scheda-riepilogo dd.is-vuoto { color: var(--border-strong); }
.scheda-campi { border-top: 1px solid var(--border); }
.field-hint.is-errore { display: block; color: var(--red); font-weight: 500; }
/* Oltre una settantina di caratteri l'occhio perde il capo riga: gli
aiuti sotto i campi e i testi degli avvisi si fermano prima. */
.field-hint, .avviso-buchi p, .scheda-testa p, .card-header p { max-width: 72ch; }
/* ── Che percorso e' ──────────────────────────────────────────────
La scelta che decide cosa succede alla conferma: sta in cima e si
vede, invece di essere un menu a tendina dentro una riga. */
.tipologia {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 12px;
padding: 4px 24px 22px;
}
.tipologia-scelta {
display: flex;
gap: 10px;
align-items: flex-start;
padding: 14px 16px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
cursor: pointer;
}
.tipologia-scelta.is-scelta {
border-color: var(--accent);
box-shadow: 0 0 0 1px var(--accent);
}
.tipologia-scelta input { margin-top: 3px; accent-color: var(--accent); }
.tipologia-scelta span { font-size: 12.5px; color: var(--muted); line-height: 1.5; }
.tipologia-scelta strong { display: block; margin-bottom: 3px; color: var(--text); font-size: 14px; }
.tipologia-scelta.is-scelta strong { color: var(--accent-text); }
/* La tabella dei corsi si compila dentro le celle: aprire una scheda
per cambiare un prezzo sarebbe un giro inutile. */
.input-nudo {
background: transparent;
border-color: transparent;
}
.input-nudo:hover { border-color: var(--border); }
.input-nudo:focus { background: var(--surface); border-color: var(--accent); }
.input-stretto { max-width: 130px; }
.riga-misto {
display: flex;
gap: 6px;
align-items: center;
margin-top: 6px;
color: var(--muted);
font-size: 12px;
}
.button-grande { padding: 11px 22px; font-size: 14px; }
/* ── Tabelle dentro le schede ─────────────────────────────────────
Avevo scritto «.data-table» e «.table-wrapper» in cinque pagine
nuove, e non esistevano: il resto dell'applicazione usa
«.table-wrap», e quelle tabelle si reggevano solo sulle regole nude
di table/th/td — quindi senza scorrimento orizzontale, e sfondavano
il riquadro invece di scorrere.
Questa e' l'intestazione che mancava. */
.tabella thead th {
position: sticky;
top: 0;
background: var(--surface-soft);
font-size: 11.5px;
font-weight: 600;
letter-spacing: .04em;
text-transform: uppercase;
white-space: nowrap;
}
.tabella tbody tr:last-child td { border-bottom: 0; }
.tabella tbody tr:hover { background: var(--surface-soft); }
.tabella td.text-right, .tabella th.text-right { text-align: right; }
/* ── Le schede impilate hanno bisogno di respirare ────────────────
«.content-card» non ha margini e il contenitore non ha spaziatura:
nove schede di fila diventavano una colonna bianca continua,
separata solo da bordi da un pixel raddoppiati. Era la ragione
principale per cui la pagina non si leggeva. */
.pila { display: grid; gap: 18px; }
/* ── Il percorso di conferma ──────────────────────────────────────
Le tappe in cima: dove sono, cosa ho gia' controllato, cosa manca.
«.passo» e' gia' usata dalla pagina della definizione, quindi qui
si chiama «.percorso» e «.tappa». */
.percorso {
display: flex;
flex-wrap: wrap;
gap: 6px;
padding: 14px 18px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
}
.percorso-tappa {
display: flex;
gap: 8px;
align-items: center;
padding: 7px 12px;
background: none;
border: 1px solid transparent;
border-radius: 999px;
color: var(--muted);
font: inherit;
font-size: 12.5px;
cursor: pointer;
}
.percorso-tappa:disabled { cursor: default; opacity: .55; }
.percorso-tappa:not(:disabled):hover { background: var(--surface-soft); }
/* Una tappa oltre il punto raggiunto: si vede che c'e' ma e' spenta.
Resta cliccabile — porta dove si e' arrivati — perche' un pulsante
che non fa niente si legge come rotto. */
.percorso-tappa.is-lontana { opacity: .5; }
.percorso-tappa.is-lontana:hover { opacity: .75; }
.percorso-segno {
display: grid;
place-items: center;
width: 22px;
height: 22px;
background: var(--surface-soft);
border: 1px solid var(--border-strong);
border-radius: 50%;
font-size: 11.5px;
font-weight: 600;
}
.percorso-tappa.is-adesso {
border-color: var(--accent);
color: var(--accent-text);
font-weight: 600;
}
.percorso-tappa.is-adesso .percorso-segno {
background: var(--accent);
border-color: var(--accent);
color: #fff;
}
.percorso-tappa.is-fatta { color: var(--text); }
.percorso-tappa.is-fatta .percorso-segno {
background: var(--green);
border-color: var(--green);
color: #fff;
font-size: 0;
}
/* Una tappa fatta porta la spunta al posto del numero: il numero l'ha
gia' detto una volta, la spunta dice una cosa nuova. */
.percorso-tappa.is-fatta .percorso-segno::after {
content: '✓';
font-size: 12px;
}
/* La barra di comando sta fuori dalle schede: «.content-card» nasconde
quello che esce, e dentro non si puo' tenere niente in fondo. */
.comandi {
display: flex;
gap: 14px;
align-items: center;
justify-content: space-between;
padding: 14px 18px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
}
.comandi-dove { color: var(--muted); font-size: 12.5px; }
.comandi .button { min-width: 150px; justify-content: center; }
.tappa-campi { border-top: 1px solid var(--border); }
/* Il riepilogo finale: tutto insieme, prima di premere. */
.riepilogo-finale {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(440px, 1fr));
gap: 8px 40px;
padding: 8px 24px 16px;
}
.riepilogo-blocco h3 {
margin: 12px 0 4px;
color: var(--muted);
font-size: 11.5px;
font-weight: 600;
letter-spacing: .04em;
text-transform: uppercase;
}
.riepilogo-blocco .scheda-riepilogo { grid-template-columns: 1fr; padding: 0; }
/* Larghezze che parlano: un campo per la provincia largo come uno per
l'indirizzo non dice quanto va scritto, e lascia righe mezze vuote. */
.field-breve { max-width: 140px; }
.field-media { max-width: 320px; }
.field-lunga { max-width: 560px; }
@media (max-width: 680px) {
.field-breve, .field-media, .field-lunga { max-width: none; }
.comandi { flex-direction: column; align-items: stretch; }
}
/* «Scarta» non e' un'azione di pari rango con «Conferma e crea»:
niente riquadro bianco, e il colore giusto. */
.scarta {
display: flex;
flex-wrap: wrap;
gap: 8px;
align-items: center;
margin: 26px 0 0;
color: var(--muted);
font-size: 12.5px;
}
/* Le note ai colleghi: si scrivono adesso, arrivano quando serve. */
.nota-box {
padding: 18px 24px 20px;
border-top: 1px solid var(--border);
}
.nota-box > label {
display: block;
margin-bottom: 8px;
font-size: 13.5px;
font-weight: 500;
}
.nota-box .textarea { max-width: 760px; }
.nota-a-chi {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 320px);
gap: 28px 40px;
margin-top: 16px;
}
.nota-etichetta {
display: block;
margin-bottom: 8px;
color: var(--muted);
font-size: 12.5px;
}
.nota-scelta {
display: flex;
gap: 9px;
align-items: flex-start;
padding: 5px 0;
cursor: pointer;
}
.nota-scelta input { margin-top: 3px; accent-color: var(--accent); }
.nota-scelta span { color: var(--muted); font-size: 12.5px; }
.nota-scelta strong { color: var(--text); font-size: 13px; }
.nota-scelta strong::after { content: ' — '; color: var(--muted); font-weight: 400; }
@media (max-width: 900px) {
.nota-a-chi { grid-template-columns: minmax(0, 1fr); }
}
/* Le note già scritte, sulla scheda dell'accordo. */
.note-scritte { padding: 4px 24px 18px; }
.nota-riga {
display: flex;
gap: 14px;
align-items: flex-start;
padding: 12px 0;
border-bottom: 1px solid var(--border);
}
.nota-riga:last-child { border-bottom: 0; }
.nota-riga > i { color: var(--muted); font-size: 17px; }
.nota-riga p { margin: 0; font-size: 13.5px; white-space: pre-wrap; }
.nota-riga em {
display: block;
margin-top: 4px;
color: var(--muted);
font-size: 12px;
font-style: normal;
}
.nota-riga.is-attesa > i { color: var(--orange); }
.conferma-cosa {
margin: 0;
padding: 4px 24px 20px;
color: var(--muted);
font-size: 13px;
}
/* ── Gli errori ───────────────────────────────────────────────────
Prima stavano solo sotto il campo, dentro una sezione magari chiusa:
si premeva «Conferma e crea», non succedeva niente, e non si capiva
perche'. Un modulo che rifiuta in silenzio e' peggio di uno che
rifiuta. */
.errori {
padding: 16px 20px;
background: var(--red-background, color-mix(in srgb, var(--red) 8%, var(--surface)));
border: 1px solid var(--red);
border-left-width: 4px;
border-radius: var(--radius-lg);
}
.errori:focus { outline: none; }
.errori-testa {
display: flex;
gap: 10px;
align-items: center;
color: var(--red);
font-size: 14.5px;
}
.errori-testa i { font-size: 20px; }
.errori ul {
margin: 10px 0 0;
padding-left: 34px;
color: var(--text);
font-size: 13.5px;
}
.errori li { padding: 3px 0; }
/* La barra sopra l'elenco dei contratti: schede e ricerca.
Riusa «.worklist-head» e «.worklist-tab», che esistono gia' per i
moduli da coprire — la stessa cosa si deve vedere allo stesso modo. */
.worklist-head { padding: 0 24px 18px; }
.worklist-tab span {
margin-left: 6px;
padding: 1px 7px;
background: var(--surface);
border-radius: 999px;
font-size: 11.5px;
font-weight: 600;
}
.worklist-tab.is-active span { background: var(--accent); color: #fff; }
.worklist-cerca { display: flex; gap: 8px; }
.worklist-cerca .input { min-width: 260px; }
/* Quanto siamo in ritardo, dentro una riga di elenco. */
.is-tardi { color: var(--red); font-weight: 600; }
.is-quasi { color: var(--orange); }
/* ── Lo stato in chiaro ───────────────────────────────────────────
Le quattro risposte al telefono. Righe grandi e distanti: si leggono
mentre si parla, non si studiano. */
.in-chiaro { margin: 0; padding: 6px 24px 20px; list-style: none; }
.in-chiaro li {
display: flex;
gap: 14px;
align-items: flex-start;
padding: 11px 0;
border-bottom: 1px solid var(--border);
font-size: 15px;
line-height: 1.5;
}
.in-chiaro li:last-child { border-bottom: 0; }
.in-chiaro i { flex: none; margin-top: 2px; font-size: 20px; }
.in-chiaro span { max-width: 76ch; }
.in-chiaro .is-fatto i { color: var(--green); }
.in-chiaro .is-corso i { color: var(--accent-text); }
.in-chiaro .is-attesa i { color: var(--muted); }
.in-chiaro .is-chiedi i { color: var(--orange); }
.in-chiaro li.is-chiedi span { font-weight: 600; }
/* La promessa di pagamento: due campi in fila, come la nota. */
.promessa-box {
padding: 18px 24px 20px;
display: grid;
grid-template-columns: 200px 1fr;
gap: 20px 24px;
align-items: start;
}
.promessa-azioni {
grid-column: 1 / -1;
display: flex;
align-items: center;
gap: 16px;
flex-wrap: wrap;
}
@media (max-width: 720px) {
.promessa-box { grid-template-columns: 1fr; }
}
/* ── I ruoli ─────────────────────────────────────────────────────────
I permessi raccolti per area, con la sigla sotto il nome: chi assegna
un ruolo deve poter riconoscere il permesso che ha letto in un
messaggio d'errore, e nei messaggi compare la sigla. */
.permessi-gruppo {
border: 1px solid var(--border);
border-radius: 10px;
padding: 16px 18px 18px;
margin: 0 0 14px;
}
.permessi-gruppo legend {
padding: 0 8px;
font-size: 12px;
font-weight: 600;
letter-spacing: .04em;
text-transform: uppercase;
color: var(--text-soft);
}
.permesso {
display: grid;
grid-template-columns: 20px 1fr;
gap: 4px 10px;
align-items: start;
padding: 8px 0;
cursor: pointer;
border-top: 1px solid var(--border-soft, var(--border));
}
.permessi-gruppo .permesso:first-of-type { border-top: 0; }
.permesso input { margin-top: 3px; }
.permesso span { display: block; }
.permesso strong { display: block; font-weight: 500; color: var(--text); }
.permesso em {
display: block;
font-style: normal;
font-size: 13px;
color: var(--text-soft);
max-width: 72ch;
}
.permesso code {
font-size: 11.5px;
color: var(--text-faint, var(--text-soft));
}
.ruolo-azioni {
display: flex;
gap: 10px;
align-items: center;
margin: 18px 0 4px;
}
.torna-indietro { margin: 0 0 14px; font-size: 13px; }
.torna-indietro a { display: inline-flex; align-items: center; gap: 6px; }
.elenco-piatto {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 8px 18px;
}
.elenco-piatto li { display: inline-flex; align-items: center; gap: 8px; }
/* La cancellazione sta in fondo, separata, e spiega prima di offrire. */
.zona-rossa {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
flex-wrap: wrap;
margin-top: 22px;
padding-top: 18px;
border-top: 1px solid var(--border);
}
.zona-rossa p { margin: 2px 0 0; max-width: 72ch; }
/* La riga dei pulsanti dentro i moduli della definizione: la classe era
già usata nella pagina ma non era mai stata definita, quindi il
pulsante stava attaccato all'ultimo campo. */
.definizione-azioni {
grid-column: 1 / -1;
display: flex;
align-items: center;
gap: 16px;
flex-wrap: wrap;
margin-top: 6px;
}
.definizione-azioni .field-hint { margin: 0; max-width: 60ch; }
/* Lo stato della pratica in una riga da leggere al telefono. */
.finanziamento-chiaro {
margin: 0;
padding: 14px 24px;
border-bottom: 1px solid var(--border);
font-size: 14px;
}
.finanziamento-chiaro.is-quasi { color: var(--orange); }
/* L'esito di un'operazione, con lo stesso peso del riquadro degli errori:
un rigo verde da 13 px si può confermare e non accorgersene. */
.esito {
display: flex;
align-items: flex-start;
gap: 12px;
margin: 0 0 20px;
padding: 14px 18px;
border: 1px solid var(--green);
border-left-width: 4px;
border-radius: 10px;
background: var(--green-background, rgba(34, 160, 90, .07));
}
.esito i { color: var(--green); font-size: 20px; flex: none; margin-top: 1px; }
.esito p { margin: 0; font-size: 14.5px; color: var(--text); max-width: 84ch; }
/* Il modulo dopo comincia più tardi.
Non è un errore e non è una conferma: è una data che si è spostata da
sé, e una decisione da prendere. Sta fra i due riquadri, e ha il
colore dell'attenzione — non quello dei guai. */
.slittamento {
margin: 0 0 20px;
padding: 14px 18px;
border: 1px solid var(--orange);
border-left-width: 4px;
border-radius: 10px;
background: var(--orange-background);
}
/* I due casi che raccontano e non chiedono niente restano grigi: un
bordo d'allarme sopra una notizia insegna a ignorare l'allarme. */
.slittamento.is-nota { border-color: var(--border); background: var(--surface-soft, transparent); }
.slittamento.is-nota .slittamento-testa > i,
.slittamento.is-nota .slittamento-scarto { color: var(--text-soft); }
.slittamento-testa { display: flex; align-items: flex-start; gap: 12px; }
.slittamento-testa > i { color: var(--orange); font-size: 20px; flex: none; margin-top: 1px; }
.slittamento-titolo { margin: 0; font-size: 14.5px; font-weight: 600; color: var(--text); }
.slittamento-fatto { display: block; margin: 0 0 4px; font-size: 13px; color: var(--text-soft); }
.slittamento-testa p { margin: 4px 0 0; font-size: 14px; color: var(--text-soft); max-width: 84ch; }
.slittamento-testa p strong { color: var(--text); }
.slittamento-scarto { font-weight: 400; color: var(--orange); }
.slittamento-scelte { display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
margin: 12px 0 0 32px; }
.slittamento-scelte form { margin: 0; }
.slittamento-scelte .button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.slittamento-gia { display: inline-flex; align-items: center; gap: 6px;
font-size: 13.5px; color: var(--text-soft); max-width: 60ch; }
/* Su schermo stretto un pulsante più largo della riga sfonda il bordo:
il testo va a capo invece di restare su una riga sola. */
@media (max-width: 720px) {
.slittamento-scelte { margin-left: 0; }
.slittamento-scelte .button { white-space: normal; text-align: left; }
}
/* La deroga alla quota: una casella e un motivo, dentro la riga del passo.
Sta accanto al pulsante «Fatto» perché è una decisione che si prende in
quel momento, non una impostazione da cercare altrove. */
.passo-deroga {
display: inline-flex;
align-items: center;
gap: 7px;
font-size: 12.5px;
color: var(--orange);
cursor: pointer;
white-space: nowrap;
}
.passo-deroga input { margin: 0; }
.input-small {
padding: 5px 9px;
font-size: 12.5px;
max-width: 280px;
}
.finanziamento-chiaro.is-quasi { color: var(--orange); }
/* ── Il pannello del blocco allievi ──────────────────────────────────
Ogni interruttore porta accanto il perché e la conseguenza di
spegnerlo: una casella «avvisa il supporto tecnico» senza la frase
«se la togli nessuno chiuderà gli accessi» non è configurabile, è
indovinabile. */
.avvisati {
display: flex;
flex-direction: column;
gap: 4px;
padding: 4px 0;
}
.avvisato {
display: grid;
grid-template-columns: 22px 1fr;
gap: 4px 12px;
align-items: start;
padding: 12px 4px;
border-radius: 8px;
cursor: pointer;
}
.avvisato:hover { background: var(--surface-soft); }
.avvisato input { margin-top: 3px; }
.avvisato strong { display: block; font-weight: 600; font-size: 14.5px; }
.avvisato em {
display: block;
font-style: normal;
font-size: 13px;
color: var(--text-soft);
max-width: 74ch;
margin-top: 2px;
}
.avvisato em.is-quasi { color: var(--orange); }
.avvisato em strong { display: inline; font-size: inherit; color: inherit; }
/* Spento perché non è ancora possibile, non perché è vietato: resta
leggibile, e la spiegazione dice quando lo diventerà. */
.avvisato.is-spento { cursor: default; }
.avvisato.is-spento:hover { background: transparent; }
.avvisato.is-spento strong { color: var(--text-soft); }
.riga-divisoria {
border: 0;
border-top: 1px solid var(--border);
margin: 14px 0;
}
.campo-con-unita { display: flex; align-items: center; gap: 10px; }
.campo-con-unita .input { max-width: 110px; }
.campo-con-unita span { font-size: 13.5px; color: var(--text-soft); }
/* ── L'area dell'allievo ─────────────────────────────────────────────
Chi apre queste pagine non è un collega: è un cliente che vuole sapere
a che punto è, cosa è stato fatto e dove sono le slide. Le righe sono
più larghe e più poche, e nessuna dice uno stato interno. */
.promemoria {
display: flex;
gap: 13px;
align-items: flex-start;
padding: 15px 18px;
border: 1px solid var(--accent);
border-left-width: 3px;
border-radius: 10px;
background: var(--accent-soft);
}
.promemoria i { font-size: 20px; color: var(--accent-text); flex: none; margin-top: 1px; }
.promemoria p { margin: 0; font-size: 14.5px; color: var(--text); max-width: 82ch; }
.promemoria.is-tardi { border-color: var(--orange); background: var(--orange-background); }
.promemoria.is-tardi i { color: var(--orange); }
.prossime-lezioni,
.lezioni-mie,
.materiali-miei {
list-style: none;
margin: 0;
padding: 0;
}
.prossime-lezioni li,
.lezioni-mie li {
display: grid;
grid-template-columns: 108px 1fr auto;
gap: 4px 18px;
align-items: center;
padding: 14px 24px;
border-bottom: 1px solid var(--border);
}
.prossime-lezioni li:last-child,
.lezioni-mie li:last-child { border-bottom: 0; }
.lezioni-mie li.is-passata { background: var(--surface-soft); }
.prossime-lezioni .quando,
.lezioni-mie .quando { display: flex; flex-direction: column; font-variant-numeric: tabular-nums; }
.prossime-lezioni .quando strong,
.lezioni-mie .quando strong { font-size: 14px; font-weight: 600; }
.prossime-lezioni .quando span,
.lezioni-mie .quando span { font-size: 12.5px; color: var(--muted); }
.prossime-lezioni .cosa,
.lezioni-mie .cosa { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.prossime-lezioni .cosa strong,
.lezioni-mie .cosa strong { font-weight: 600; font-size: 14.5px; }
.prossime-lezioni .cosa span { font-size: 13px; color: var(--text-soft); }
.lezioni-mie .cosa a { font-size: 13px; display: inline-flex; align-items: center; gap: 6px; }
/* Entrare in aula è la cosa per cui l'allievo apre questa pagina il
giorno della lezione: si vede da sola. */
.lezioni-mie .lezione-collegamento {
align-self: flex-start;
margin-top: 4px;
padding: 4px 10px;
background: var(--accent-soft);
border-radius: 6px;
font-weight: 600;
text-decoration: none;
}
.lezioni-mie .quando .badge { align-self: flex-start; margin-top: 3px; }
/* E quando quel collegamento non c'è, si dice — al posto del pulsante,
dove il pulsante si cercava. Prima spariva senza una parola. */
.lezione-senza-link {
display: flex;
gap: 8px;
align-items: flex-start;
margin: 0;
padding: 10px 12px;
border-radius: 8px;
background: var(--orange-background);
color: var(--orange);
font-size: 13.5px;
line-height: 1.45;
}
.lezione-senza-link > i { flex: none; font-size: 16px; }
.corsi-miei { display: grid; gap: 10px; padding: 4px 24px 20px; }
.corso-mio {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
flex-wrap: wrap;
padding: 16px 18px;
border: 1px solid var(--border);
border-radius: 10px;
text-decoration: none;
color: var(--text);
background: var(--surface);
}
.corso-mio:hover { border-color: var(--accent); background: var(--accent-soft); }
.corso-mio strong { font-size: 15.5px; font-weight: 600; }
.corso-mio .stato { font-size: 13px; color: var(--text-soft); }
/* A che punto e' il corso: sta sotto lo stato, piu' piccolo, perche' e'
il contorno della risposta e non la risposta. */
.corso-mio .avanzamento { color: var(--muted); font-size: 12.5px; }
.corso-mio.is-sospeso { border-color: var(--orange); background: var(--orange-background); }
.corso-mio.is-sospeso:hover { border-color: var(--orange); }
.corso-mio .stato.is-sospeso {
color: var(--orange);
font-weight: 550;
display: inline-flex;
align-items: center;
gap: 6px;
}
.materiali-miei li {
display: flex;
align-items: center;
gap: 14px;
padding: 14px 24px;
border-bottom: 1px solid var(--border);
}
.materiali-miei li:last-child { border-bottom: 0; }
/* Alternate anche qui: un elenco di registrazioni e slide con lo stesso
titolo ripetuto si legge male tutto bianco. Nelle lezioni no: li' il
colore dice gia' qualcosa — «passata», «oggi» — e due significati
sullo stesso sfondo non stanno. */
.materiali-miei li:nth-child(even) { background: var(--riga-alterna); }
/* I corsi del docente, nella sua pagina iniziale: una riga per corso,
col nome a sinistra e la strada per il registro a destra. */
.corsi-del-docente { list-style: none; margin: 0; padding: 0; }
.corsi-del-docente li {
display: flex;
gap: 14px;
align-items: center;
justify-content: space-between;
padding: 13px 24px;
border-top: 1px solid var(--border);
}
.corsi-del-docente li:nth-child(even) { background: var(--riga-alterna); }
.corsi-del-docente li > span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.corsi-del-docente strong { font-size: 14px; font-weight: 500; }
@media (max-width: 620px) {
.corsi-del-docente li { padding: 13px 16px; }
}
.materiali-miei > li > i { font-size: 22px; color: var(--muted); flex: none; }
.materiali-miei li > span { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.materiali-miei strong { font-weight: 600; font-size: 14.5px; overflow-wrap: anywhere; }
.frequenza-numero {
font-size: 30px;
font-weight: 650;
letter-spacing: -.02em;
color: var(--green);
font-variant-numeric: tabular-nums;
}
.frequenza-numero.is-bassa { color: var(--orange); }
@media (max-width: 720px) {
.prossime-lezioni li,
.lezioni-mie li { grid-template-columns: 1fr; }
.lezioni-mie .presenza { justify-self: start; }
}
/* La frequenza settimanale, quando si apre un corso di gruppo. */
.frequenza-righe { display: flex; flex-direction: column; gap: 4px; padding: 4px 24px 20px; }
.frequenza-riga {
display: flex; align-items: center; gap: 12px;
padding: 7px 10px; border-radius: 8px;
}
.frequenza-riga.is-attiva { background: var(--accent-soft); }
.frequenza-giorno { display: flex; align-items: center; gap: 8px; min-width: 130px; cursor: pointer; }
.frequenza-riga .input-small { max-width: 130px; }
/* Il testo di un documento firmato: monospaziato e a larghezza fissa,
perché è un documento e non una pagina — e perché così si vede subito
che non è un campo modificabile. */
.documento {
margin: 0;
padding: 24px 28px;
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
font-size: 13px;
line-height: 1.7;
white-space: pre-wrap;
overflow-wrap: anywhere;
color: var(--text);
background: var(--surface-soft);
border-top: 1px solid var(--border);
max-width: 100%;
}
.prova-firma {
display: flex; gap: 11px; align-items: flex-start;
margin: 0; padding: 15px 24px;
border-top: 1px solid var(--border);
background: var(--green-background);
font-size: 13.5px; color: var(--text-soft);
}
.prova-firma i { color: var(--green); font-size: 18px; flex: none; margin-top: 1px; }
.prova-firma.is-rifiutata { background: var(--red-background); }
.prova-firma.is-rifiutata i { color: var(--red); }
/* Il pulsante che manda davvero, sopra quelli che copiano. */
.email-manda {
display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
padding: 16px 0 4px;
}
.email-manda .field-hint { margin: 0; max-width: 66ch; }
/* La tariffa si modifica dalla cella: è il posto in cui ci si accorge
che manca. */
.tariffa-cella {
list-style: none;
cursor: pointer;
border-bottom: 1px dashed var(--border-strong);
display: inline-block;
font-size: 13.5px;
}
.tariffa-cella::-webkit-details-marker { display: none; }
.tariffa-cella.is-quasi { color: var(--orange); font-weight: 550; border-bottom-color: var(--orange); }
/* ── Il pulsante piccolo ─────────────────────────────────────────────
Ventotto viste lo usano da sempre e non era mai stato definito: erano
pulsanti a grandezza intera dentro colonne strette, che sfondavano il
riquadro e finivano tagliati. */
.button-small {
padding: 5px 11px;
font-size: 12.5px;
gap: 6px;
border-radius: 7px;
white-space: nowrap;
}
.button-small i { font-size: 14px; }
/* Nella tabella dei compensi il pannello resta sospeso: una tabella non
si allarga in mezzo a una riga senza spostare tutte le colonne. */
.tabella .blocca-modulo {
position: absolute;
right: 0;
z-index: 30;
width: 320px;
}
.tabella .blocca-menu { position: relative; }
/* La conferma che non cancella niente: nessuna parola da digitare. */
.confirm-parola[hidden] { display: none !important; }
/* I corsi di un contratto, in fila. Il numero invece del trascinamento:
si cambia con la tastiera e si legge da uno screen reader. */
.corsi-in-fila {
list-style: none;
margin: 0;
padding: 4px 24px 8px;
display: flex;
flex-direction: column;
gap: 8px;
counter-reset: fila;
}
.corsi-in-fila li {
display: grid;
grid-template-columns: auto 34px 1fr auto;
gap: 14px;
align-items: center;
padding: 12px 14px;
border: 1px solid var(--border);
border-radius: 10px;
background: var(--surface-soft);
}
.corsi-in-fila .posto {
display: grid;
place-items: center;
width: 28px;
height: 28px;
border-radius: 50%;
background: var(--accent-soft);
color: var(--accent-text);
font-weight: 650;
font-size: 13px;
font-variant-numeric: tabular-nums;
}
.corsi-in-fila .quale { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.corsi-in-fila .quale strong { font-size: 14.5px; font-weight: 600; }
/* La riga che si sta trascinando, e quella appena spostata: senza un
segnale, con le frecce l'occhio resta sul pulsante — che nel
frattempo si e' spostato sotto il dito. */
.corsi-in-fila li.sta-volando { opacity: .4; }
.corsi-in-fila li.appena-spostata {
border-color: var(--accent);
transition: border-color .7s ease;
}
@media (prefers-reduced-motion: reduce) {
.corsi-in-fila li.appena-spostata { transition: none; }
}
/* Un corso che c'e' ma non si tocca: l'amministrazione non ha ancora
dato l'ok. Grigio e non rosso — non e' un guasto, e' un turno che non
e' ancora arrivato. */
.corso-fermo {
display: flex;
gap: 14px;
align-items: flex-start;
margin-bottom: 18px;
padding: 16px 18px;
border: 1px solid var(--border-strong);
border-left: 4px solid var(--muted);
border-radius: 10px;
background: var(--surface-soft);
}
.corso-fermo > i { font-size: 20px; color: var(--muted); line-height: 1.2; }
.corso-fermo strong { display: block; font-size: 15px; }
.corso-fermo p { margin: 4px 0 0; font-size: 13.5px; color: var(--text-soft); max-width: 78ch; }
.corso-fermo .corso-fermo-cosa { margin-top: 8px; color: var(--muted); }
.corso-fermo-riga {
margin: 2px 0 0;
font-size: 12.5px;
color: var(--muted);
}
/* La riga di un corso fermo: si legge, non si apre. Sbiadita quanto
basta a distinguerla da quelle su cui si lavora, non tanto da
sembrare disattivata per sbaglio. */
.course-row.is-fermo,
.worklist-row.is-fermo { opacity: .72; }
.course-row.is-fermo .course-row-title .is-fermo,
.worklist-title.is-fermo {
display: inline-flex;
align-items: center;
gap: 7px;
color: var(--muted);
cursor: default;
}
.worklist-title.is-fermo { font-weight: 600; }
.worklist-title.is-fermo > i,
.course-row-title .is-fermo > i { font-size: 15px; }
/* In che ordine si fanno i corsi: si sposta la riga, non si scrive un
numero. La presa a sinistra, il posto in chiaro, le frecce per chi
preferisce il clic — e il numero vero viaggia nascosto. */
.ordine-cella {
display: flex;
align-items: center;
gap: 6px;
white-space: nowrap;
}
.ordine-presa {
display: grid;
place-items: center;
color: var(--muted);
cursor: grab;
font-size: 16px;
line-height: 1;
}
.ordine-presa:active { cursor: grabbing; }
.ordine-posto {
min-width: 18px;
text-align: center;
font-variant-numeric: tabular-nums;
font-weight: 600;
font-size: 13px;
}
.ordine-frecce { display: flex; flex-direction: column; gap: 1px; }
.ordine-frecce button {
display: grid;
place-items: center;
width: 20px;
height: 15px;
padding: 0;
background: none;
border: 1px solid transparent;
border-radius: 4px;
color: var(--muted);
cursor: pointer;
font-size: 12px;
line-height: 1;
}
.ordine-frecce button:hover:not(:disabled) {
background: var(--surface-soft);
border-color: var(--border);
color: var(--text);
}
.ordine-frecce button:disabled { opacity: .3; cursor: default; }
.js-riga-corso.sta-volando { opacity: .4; }
.js-riga-corso.appena-spostata > td {
background: var(--surface-soft);
transition: background .7s ease;
}
@media (prefers-reduced-motion: reduce) {
.js-riga-corso.appena-spostata > td { transition: none; }
}
/* Le rate nel wizard: aggiungere, togliere, e il conto che torna. */
.rate-comandi {
display: flex;
align-items: center;
gap: 18px;
flex-wrap: wrap;
padding: 14px 24px 20px;
}
/* Dentro «Soldi e tempi» le rate sono un campo della griglia, e i
margini li mette già il campo: quelli della tappa qui rientrerebbero
due volte. */
.js-solo-rate-interne .table-wrap { margin-top: 8px; }
.js-solo-rate-interne .rate-comandi { padding: 12px 0 0; }
.rate-conto { font-size: 13.5px; color: var(--text-soft); max-width: 70ch; }
.rate-conto.is-tardi { color: var(--red); font-weight: 550; }
.rate-conto.is-bene { color: var(--green); }
.tabella-rate td { vertical-align: middle; }
/* La spunta che accetta il di più: compare solo quando c'è un di più,
e deve leggersi come una decisione, non come un'opzione fra tante. */
.rate-maggiorazione { display: flex; gap: 10px; align-items: flex-start; margin-top: 12px;
padding: 12px 14px; border: 1px solid var(--orange); border-radius: 10px;
background: var(--orange-background); cursor: pointer; }
.rate-maggiorazione[hidden] { display: none; }
.rate-maggiorazione input { margin-top: 2px; }
.rate-maggiorazione span { display: block; }
.rate-maggiorazione strong { display: block; font-size: 14px; color: var(--orange); }
.rate-maggiorazione small { display: block; margin-top: 2px; font-size: 13px; color: var(--text-soft); max-width: 70ch; }
/* Un'etichetta che leggono solo i lettori di schermo. Un campo con il
solo testo dentro non ha un nome, e chi non vede il riquadro non sa
cosa ci va scritto. */
.solo-per-chi-legge {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
/* Il rimedio accanto al fatto, dentro il riquadro verde. */
.esito-annulla { margin-left: auto; }
/* ── Lo scadenzario ──────────────────────────────────────────────────
Quello che l'amministrazione teneva sul quaderno: data, cliente e
importo; se e' stato sollecitato e quando; e le parole del cliente.
Le tre cose stanno sulla stessa riga, che e' tutta la differenza. */
.scad-totale { font-size: 13.5px; color: var(--text-soft); }
.scad-totale strong { font-size: 16px; color: var(--text); font-variant-numeric: tabular-nums; }
.scad-filtri { padding: 14px 18px; margin-bottom: 14px; }
.scad-viste {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-bottom: 12px;
}
.scad-vista {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 6px 12px;
border: 1px solid var(--border);
border-radius: 999px;
color: var(--text-soft);
font-size: 13px;
text-decoration: none;
}
.scad-vista span {
min-width: 20px;
padding: 0 5px;
border-radius: 999px;
background: var(--surface-soft);
font-size: 12px;
font-variant-numeric: tabular-nums;
text-align: center;
}
.scad-vista:hover { background: var(--surface-soft); }
.scad-vista.is-adesso {
background: var(--accent-soft);
border-color: var(--accent);
color: var(--accent-text);
font-weight: 600;
}
.scad-vista.is-tardi span { background: var(--red); color: #fff; }
.scad-vista.is-adesso.is-tardi { border-color: var(--red); }
.scad-cerca { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.scad-cerca .select { max-width: 320px; }
.scad-cerca .input { max-width: 260px; }
.scad-elenco { display: flex; flex-direction: column; gap: 8px; }
.scad-riga {
display: grid;
grid-template-columns: 24px 104px minmax(220px, 1.4fr) 130px minmax(230px, 1fr) auto;
gap: 20px;
align-items: start;
padding: 16px 20px;
background: var(--surface);
border: 1px solid var(--border);
border-left: 3px solid var(--border-strong);
border-radius: 10px;
line-height: 1.45;
}
.scad-riga.is-tardi { border-left-color: var(--red); }
.scad-quando { display: flex; flex-direction: column; gap: 2px; }
.scad-quando strong { font-size: 14px; font-variant-numeric: tabular-nums; }
.scad-quando span { font-size: 12.5px; color: var(--muted); }
.scad-riga.is-tardi .scad-quando span { color: var(--red); font-weight: 550; }
.scad-chi { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.scad-chi > a { font-size: 14.5px; font-weight: 600; text-decoration: none; }
.scad-chi > a:hover { text-decoration: underline; }
.scad-accordo,
.scad-nota {
margin: 4px 0 0;
padding: 7px 10px;
border-radius: 8px;
background: var(--surface-soft);
font-size: 13px;
line-height: 1.45;
max-width: 70ch;
}
.scad-accordo.is-tardi { background: var(--red-soft, var(--surface-soft)); color: var(--red); }
.scad-accordo i, .scad-nota i { margin-right: 5px; }
.scad-quanto { display: flex; flex-direction: column; gap: 2px; text-align: right; }
.scad-quanto strong { font-size: 15px; font-variant-numeric: tabular-nums; }
.scad-tentativi { display: flex; flex-direction: column; gap: 9px; align-items: flex-start; }
.scad-fatto { display: flex; flex-direction: column; gap: 3px; align-items: flex-start; }
.scad-fatto .muted { line-height: 1.4; }
.scad-azioni { display: flex; gap: 8px; align-items: flex-start; }
.scad-azioni .button { white-space: nowrap; }
/* Sotto una certa larghezza le sei colonne non ci stanno più: importo e
stato scendono sotto il nome invece di stringersi fino a spezzare le
parole a metà. */
@media (max-width: 1300px) {
.scad-riga { grid-template-columns: 24px 104px minmax(0, 1fr) auto; }
.scad-quanto { grid-column: 3 / 4; align-items: flex-start; text-align: left; }
.scad-tentativi { grid-column: 3 / -1; }
}
@media (max-width: 720px) {
.scad-riga { grid-template-columns: 24px minmax(0, 1fr); gap: 12px; }
.scad-quando, .scad-chi, .scad-quanto, .scad-tentativi, .scad-azioni { grid-column: 2 / -1; }
}
/* Le due finestre: incasso e accordo. */
.scad-finestra {
position: fixed;
inset: 0;
z-index: 60;
display: grid;
place-items: center;
padding: 20px;
}
.scad-velo { position: absolute; inset: 0; background: rgba(15, 18, 25, .45); }
.scad-riquadro {
position: relative;
width: min(520px, 100%);
max-height: 90vh;
overflow-y: auto;
padding: 22px 24px;
background: var(--surface);
border: 1px solid var(--border-strong);
border-radius: 14px;
box-shadow: 0 24px 60px rgba(15, 18, 25, .25);
}
.scad-riquadro h2 { margin: 0 0 6px; font-size: 18px; }
.scad-avviso {
display: flex;
gap: 9px;
margin: 12px 0 16px;
padding: 11px 13px;
border: 1px solid var(--border-strong);
border-left: 3px solid var(--red);
border-radius: 9px;
background: var(--surface-soft);
font-size: 13px;
line-height: 1.45;
}
.scad-soggetto {
display: flex;
justify-content: space-between;
gap: 12px;
margin: 14px 0;
padding: 10px 12px;
border-radius: 9px;
background: var(--surface-soft);
}
.scad-comandi { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; }
/* La barra della mattina: l'estratto conto arriva in blocco, e la data
si scrive una volta sola per tutti i movimenti del giorno. */
.scad-mattina { padding: 14px 18px; margin-bottom: 12px; }
.scad-mattina-data {
display: flex;
flex-wrap: wrap;
gap: 8px;
align-items: center;
}
.scad-mattina-data label { font-weight: 550; font-size: 14px; }
.scad-mattina-data .input { max-width: 170px; }
.scad-mattina-nota { margin: 8px 0 0; font-size: 13px; color: var(--text-soft); max-width: 80ch; }
.scad-conti {
display: flex;
flex-wrap: wrap;
gap: 12px;
align-items: baseline;
margin: 0 0 10px;
font-size: 14px;
}
.scad-conti strong { font-variant-numeric: tabular-nums; }
.scad-conti .muted { font-size: 13px; }
.scad-spunta-tutte { margin: 0 0 8px; font-size: 13px; color: var(--text-soft); }
.scad-spunta-tutte label { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; }
/* Il confine fra chi è in ritardo e chi non lo è ancora: con trenta
righe di fila il punto si perde. */
.scad-confine {
display: flex;
align-items: center;
gap: 12px;
margin: 6px 0;
font-size: 12px;
color: var(--muted);
text-transform: lowercase;
}
.scad-confine::before,
.scad-confine::after {
content: '';
flex: 1;
height: 1px;
background: var(--border);
}
.scad-spunta { display: flex; align-items: flex-start; padding-top: 2px; }
.scad-spunta input { width: 17px; height: 17px; cursor: pointer; }
.scad-recapiti { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 1px; }
.scad-recapiti i { margin-right: 4px; }
/* La barra in fondo: compare solo quando c'è qualcosa di spuntato. */
.scad-barra {
position: sticky;
bottom: 12px;
z-index: 20;
display: flex;
flex-wrap: wrap;
gap: 12px;
align-items: center;
margin-top: 14px;
padding: 13px 18px;
background: var(--surface);
border: 1px solid var(--border-strong);
border-radius: 12px;
box-shadow: 0 10px 30px rgba(15, 18, 25, .16);
}
.scad-barra-conto { display: flex; flex-direction: column; gap: 2px; margin-right: auto; }
.scad-barra-conto strong { font-size: 14.5px; font-variant-numeric: tabular-nums; }
.scad-chiudi {
position: absolute;
top: 12px;
right: 12px;
display: grid;
place-items: center;
width: 30px;
height: 30px;
padding: 0;
background: none;
border: 1px solid transparent;
border-radius: 8px;
color: var(--muted);
cursor: pointer;
font-size: 16px;
}
.scad-chiudi:hover { background: var(--surface-soft); border-color: var(--border); }
/* Cosa parte da solo, e quando. Un automatismo che non si vede è un
automatismo di cui non ci si fida. */
.scad-partenza {
display: flex;
flex-direction: column;
gap: 3px;
align-items: flex-start;
padding: 8px 10px;
border-radius: 8px;
border-left: 2px solid var(--border-strong);
background: var(--surface-soft);
font-size: 12.5px;
line-height: 1.4;
color: var(--text-soft);
}
.scad-partenza > span { display: block; }
.scad-partenza i { margin-right: 5px; color: var(--muted); }
.scad-nonmandare {
padding: 0;
background: none;
border: 0;
border-bottom: 1px dotted currentColor;
color: var(--red);
cursor: pointer;
font: inherit;
}
/* La sequenza delle email: una riga per passo, modificabile sul posto. */
.sequenza-riga {
display: flex;
flex-wrap: wrap;
gap: 8px;
align-items: center;
}
.sequenza-numero {
display: grid;
place-items: center;
width: 26px;
height: 26px;
border-radius: 50%;
background: var(--accent-soft);
color: var(--accent-text);
font-size: 12.5px;
font-weight: 650;
}
.sequenza-riga .select { max-width: 230px; }
.sequenza-riga .input-stretto { max-width: 78px; }
.sequenza-testo { min-width: 230px; }
.sequenza-spunta { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }
.sequenza-chiaro {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin: 8px 0 0;
font-size: 13px;
color: var(--text-soft);
}
.sequenza-togli {
padding: 0;
background: none;
border: 0;
border-bottom: 1px dotted currentColor;
color: var(--red);
cursor: pointer;
font: inherit;
}
/* Aggiungere una rata senza rifare tutto il piano. */
.rata-aggiungi {
display: flex;
flex-wrap: wrap;
gap: 8px;
align-items: center;
padding: 12px 24px 20px;
}
.rata-aggiungi .input { max-width: 170px; }
.rata-aggiungi .input-stretto { max-width: 110px; }
/* Il piano che non torna col totale: resta in vista finché non è
sistemato, e porta con sé il modo per sistemarlo. */
.rate-non-tornano {
display: flex;
flex-wrap: wrap;
gap: 10px;
align-items: center;
margin: 0;
padding: 12px 24px;
background: var(--surface-soft);
border-left: 3px solid var(--red);
font-size: 13.5px;
}
.rate-non-tornano > i { color: var(--red); font-size: 17px; }
.rate-non-tornano > span { margin-right: auto; }
/* Le tre risposte alla domanda «dove metto la differenza». */
.quadra-scelte { display: flex; flex-direction: column; gap: 10px; margin: 16px 0 4px; }
.quadra-scelta {
display: flex;
gap: 11px;
align-items: flex-start;
padding: 12px 14px;
border: 1px solid var(--border);
border-radius: 10px;
cursor: pointer;
}
.quadra-scelta:has(input:checked) { border-color: var(--accent); background: var(--surface-soft); }
.quadra-scelta > span { display: flex; flex-direction: column; gap: 6px; min-width: 0; flex: 1; }
.quadra-scelta strong { font-size: 14px; }
.quadra-scelta em { font-size: 12.5px; color: var(--muted); font-style: normal; line-height: 1.45; }
.quadra-scelta .select { max-width: 100%; }
.quadra-riga { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 13.5px; }
.quadra-riga .input { max-width: 170px; }
/* Le schede dell'accordo: la pagina era un rotolo di quindici riquadri,
e per arrivare alle rate si passava sopra a tutto il resto. */
.schede {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-bottom: 16px;
padding-bottom: 10px;
border-bottom: 1px solid var(--border);
}
.scheda-linguetta {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 9px 15px;
background: none;
border: 1px solid transparent;
border-radius: 999px;
color: var(--text-soft);
cursor: pointer;
font: inherit;
font-size: 13.5px;
}
.scheda-linguetta:hover { background: var(--surface-soft); }
.scheda-linguetta.is-adesso {
background: var(--accent-soft);
border-color: var(--accent);
color: var(--accent-text);
font-weight: 600;
}
.scheda-linguetta i { font-size: 16px; }
@media (max-width: 620px) {
.scheda-linguetta span { display: none; }
.scheda-linguetta { padding: 9px 13px; }
}
.quadra-consigliata {
margin-left: 7px;
padding: 2px 8px;
border-radius: 999px;
background: var(--accent-soft);
color: var(--accent-text);
font-size: 11.5px;
font-weight: 600;
text-transform: lowercase;
}
/* ── Leggere prima, modificare poi ───────────────────────────────────
La scheda di un accordo si apre nove volte su dieci per leggere un
dato al telefono, non per compilarlo. Ogni sezione mostra i dati in
chiaro; il modulo sta sotto, chiuso, e si apre solo se lo si chiede o
se manca qualcosa che blocca il lavoro.
«doppione-dati» faceva già quasi questo, ma il nome viene dalla
pagina dei doppioni docenti e la usa anche quella: qui serve un nome
proprio, o chi tocca l'una rompe l'altra. */
.dati-blocco { padding: 18px 24px; }
.dati-blocco + .dati-blocco { border-top: 1px solid var(--border); }
/* Le coppie etichetta/valore. Due colonne quando ci stanno; l'etichetta
è larga 180 px perché «Indirizzo di fatturazione» dentro 96 va a capo
e sfalsa il valore. */
.dati-in-chiaro {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
gap: 0 40px;
margin: 0;
max-width: 1040px;
}
.dati-in-chiaro > div {
display: grid;
grid-template-columns: 180px minmax(0, 1fr);
gap: 4px 14px;
align-items: baseline;
padding: 7px 0;
border-bottom: 1px solid var(--border);
}
.dati-in-chiaro dt { color: var(--muted); font-size: 12.5px; line-height: 1.45; }
.dati-in-chiaro dd {
margin: 0;
color: var(--text);
font-size: 13.5px;
font-weight: 400;
line-height: 1.45;
overflow-wrap: anywhere;
}
/* Il dato che si detta al telefono: uno o due per blocco, non tutti.
Con tutto in grassetto l'occhio non ha dove posarsi. */
.dati-in-chiaro dd.dato-forte { font-size: 15px; font-weight: 600; }
.dati-in-chiaro dd.dato-forte.is-grande { font-size: 20px; letter-spacing: -.01em; }
/* Indirizzi, note, motivi di rifiuto: prendono la riga intera. */
.dati-in-chiaro > div.dato-lungo { grid-column: 1 / -1; }
/* Un dato che non c'è e che blocca il lavoro non è un trattino: è una
cosa da fare, e il posto dove farla è a un clic. */
.dati-in-chiaro > div.is-manca dt { color: var(--orange); }
.dati-in-chiaro > div.is-manca dd { color: var(--orange); font-weight: 500; }
.dato-manca { color: var(--orange); font-weight: 500; text-decoration: underline dotted; }
.dato-manca:hover { color: var(--text); }
.dati-manca {
display: inline-flex;
gap: 8px;
align-items: baseline;
margin: 14px 0 0;
padding: 8px 13px;
background: var(--orange-background);
border-radius: 8px;
color: var(--orange);
font-size: 12.5px;
font-weight: 500;
line-height: 1.45;
text-decoration: none;
}
.dati-manca > i { font-size: 15px; }
/* Chi ha scritto, quando, e i comandi di poco conto. In fondo e in
grigio: «Scollega» non ha lo stesso peso di «Modifica». */
.dati-piede {
display: flex;
flex-wrap: wrap;
gap: 8px 16px;
align-items: center;
margin: 14px 0 0;
color: var(--muted);
font-size: 12px;
}
/* Il modulo. Chiuso, con il segno che dice che si apre; arancione
quando manca qualcosa, così si vede da lontano che tocca a te. */
.dati-modifica { border-top: 1px solid var(--border); }
.dati-modifica > summary {
display: flex;
align-items: center;
gap: 8px;
padding: 12px 24px;
color: var(--accent-text);
cursor: pointer;
font-size: 13.5px;
font-weight: 550;
list-style: none;
}
.dati-modifica > summary::-webkit-details-marker { display: none; }
.dati-modifica > summary:hover { background: var(--surface-soft); }
.dati-modifica > summary::after {
content: '';
width: 7px;
height: 7px;
margin-left: auto;
border-right: 1.5px solid currentColor;
border-bottom: 1.5px solid currentColor;
transform: rotate(45deg) translateY(-2px);
transition: transform .12s ease;
}
.dati-modifica[open] > summary::after { transform: rotate(-135deg) translateY(1px); }
.dati-modifica[open] > summary {
background: var(--surface-soft);
border-bottom: 1px solid var(--border);
}
.dati-modifica.is-serve > summary { color: var(--orange); background: var(--orange-background); }
/* Il campo che manca si accende da solo quando ci si arriva dal
collegamento: nessun JavaScript, è il frammento dell'indirizzo. */
.input:target,
.select:target,
.textarea:target {
border-color: var(--accent);
box-shadow: 0 0 0 3px rgba(47, 107, 196, .2);
}
/* Una cosa sola e ovvia da fare adesso. Se ce ne sono due, non è questo
il posto: è la lista dei passi. */
.dati-adesso {
display: flex;
flex-wrap: wrap;
gap: 10px 16px;
align-items: center;
margin: 0;
padding: 12px 24px;
background: var(--accent-soft);
border-bottom: 1px solid var(--border);
color: var(--accent-text);
font-size: 13.5px;
}
.dati-adesso > i { flex: none; font-size: 18px; }
.dati-adesso > span { margin-right: auto; max-width: 70ch; }
/* Non c'è ancora niente da leggere: si dice la conseguenza del vuoto,
non «nessun dato». */
.dati-vuoto {
display: flex;
gap: 13px;
align-items: flex-start;
margin: 0;
padding: 18px 24px;
color: var(--muted);
font-size: 13.5px;
line-height: 1.55;
}
.dati-vuoto > i { flex: none; color: var(--border-strong); font-size: 22px; }
.dati-vuoto strong { display: block; color: var(--text); font-size: 14px; font-weight: 550; }
.dati-vuoto p { margin: 3px 0 0; max-width: 68ch; }
/* Dove ho appena salvato: il messaggio verde sta in cima alla pagina,
cioè lontano dal riquadro di cui parla. */
@keyframes appena-salvato {
from { background: var(--green-background); }
to { background: transparent; }
}
.is-appena-salvato { animation: appena-salvato 2.6s ease-out 1; }
@media (prefers-reduced-motion: reduce) {
.is-appena-salvato { animation: none; background: var(--green-background); }
}
/* ── L'impaginazione della scheda accordo ──────────────────────────── */
.pila-accordo { max-width: 1180px; }
.pila-accordo .card-header { padding: 20px 24px; }
.pila-accordo .definizione-modulo { padding: 20px 24px 24px; }
.pila-accordo .definizione-modulo.form-grid { max-width: 920px; gap: 16px 28px; }
@media (max-width: 900px) {
/* 180 px di etichetta su una scheda di 380 lasciano al valore lo
spazio di tre parole: l'etichetta va sopra. */
.dati-in-chiaro { grid-template-columns: 1fr; }
.dati-in-chiaro > div { grid-template-columns: 1fr; gap: 1px; padding: 8px 0; }
.dati-in-chiaro dt { font-size: 11.5px; }
.pila-accordo .definizione-modulo.form-grid { grid-template-columns: 1fr; }
.dati-blocco,
.dati-adesso,
.dati-vuoto,
.pila-accordo .card-header,
.pila-accordo .definizione-modulo,
.dati-modifica > summary { padding-left: 18px; padding-right: 18px; }
}
/* ── «Oggi»: righe intere, riordinabili, con ricerca e filtri ─────── */
.oggi-testa { flex-wrap: wrap; }
.oggi-testa > div { margin-right: auto; }
.oggi-scheda .ordine-presa { align-self: center; }
.oggi-cerca { position: relative; display: flex; align-items: center; }
.oggi-cerca > i { position: absolute; left: 10px; color: var(--muted); font-size: 15px; }
.oggi-cerca .input { width: 200px; padding-left: 32px; height: 34px; font-size: 13px; }
.oggi-filtri { display: flex; flex-wrap: wrap; gap: 5px; }
.oggi-filtro {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 5px 11px;
background: none;
border: 1px solid var(--border);
border-radius: 999px;
color: var(--text-soft);
cursor: pointer;
font: inherit;
font-size: 12.5px;
}
.oggi-filtro > span {
padding: 0 5px;
border-radius: 999px;
background: var(--surface-soft);
font-size: 11.5px;
font-variant-numeric: tabular-nums;
}
.oggi-filtro:hover { background: var(--surface-soft); }
.oggi-filtro.is-adesso {
background: var(--accent-soft);
border-color: var(--accent);
color: var(--accent-text);
font-weight: 600;
}
.oggi-scheda.sta-volando { opacity: .4; }
.oggi-scheda.appena-spostata {
border-color: var(--accent);
transition: border-color .7s ease;
}
@media (prefers-reduced-motion: reduce) {
.oggi-scheda.appena-spostata { transition: none; }
}
/* La riga: chi, poi i dati che contano, poi quello che non conta.
L'importanza si legge dalla grandezza, non dal grassetto su tutto. */
.oggi-riga {
display: grid;
grid-template-columns: minmax(200px, 1.2fr) minmax(0, 1.6fr);
gap: 6px 28px;
align-items: baseline;
}
.oggi-riga-chi { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.oggi-riga-chi strong { font-size: 14.5px; font-weight: 600; }
.oggi-riga-chi a { text-decoration: none; }
.oggi-riga-chi a:hover strong { text-decoration: underline; }
.oggi-riga-chi > span { color: var(--text-soft); font-size: 12.5px; }
.oggi-riga-dati {
display: flex;
flex-wrap: wrap;
gap: 4px 26px;
margin: 0;
}
.oggi-riga-dati > div { display: flex; flex-direction: column; gap: 1px; }
.oggi-riga-dati dt { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .04em; }
.oggi-riga-dati dd { margin: 0; font-size: 13.5px; font-variant-numeric: tabular-nums; }
.oggi-riga-dati > div.is-forte dd { font-size: 14.5px; font-weight: 600; }
.oggi-riga-dati > div.is-debole dd { color: var(--text-soft); }
.oggi-riga-dati > div.is-manca dd { color: var(--orange); font-weight: 550; }
/* Il promemoria per noi — «accordo registrato in fatturazione» — non è
un'informazione sul cliente: sta in fondo e in grigio. */
.oggi-riga-debole {
grid-column: 1 / -1;
margin: 2px 0 0;
color: var(--muted);
font-size: 12px;
}
@media (max-width: 820px) {
.oggi-riga { grid-template-columns: 1fr; }
.oggi-cerca .input { width: 100%; }
.oggi-testa > div { width: 100%; margin-right: 0; }
}
/* Ordinare e filtrare dentro una sezione di «Oggi». */
.oggi-ordina { display: flex; align-items: center; gap: 6px; }
.oggi-ordina .select { height: 34px; padding: 0 30px 0 10px; font-size: 13px; max-width: 190px; }
.oggi-verso {
display: grid;
place-items: center;
width: 34px;
height: 34px;
padding: 0;
background: none;
border: 1px solid var(--border);
border-radius: 8px;
color: var(--text-soft);
cursor: pointer;
font-size: 15px;
}
.oggi-verso:hover { background: var(--surface-soft); color: var(--text); }
.oggi-filtri-campi {
display: flex;
flex-wrap: wrap;
gap: 10px 18px;
padding: 10px 18px;
border-bottom: 1px solid var(--border);
background: var(--surface-soft);
}
.oggi-filtri-campi label { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--muted); }
.oggi-filtri-campi .select { height: 30px; padding: 0 28px 0 9px; font-size: 12.5px; max-width: 190px; }
/* ── «A che punto sono»: una tappa per ogni passo previsto ────────────
Le colonne rispondono a «cosa posso chiudere adesso»; questa risponde
all'altra domanda dell'amministrazione — «a che punto sono le quaranta
pratiche». Le tappe vuote restano: dicono «qui non è fermo nessuno», e
toglierle farebbe sembrare che quel passo non esista. */
.passi-riepilogo { margin-bottom: 16px; }
.passi-barre {
display: flex;
flex-wrap: wrap;
gap: 6px;
padding: 4px 24px 22px;
}
.passi-barra {
display: flex;
flex: 1 1 96px;
flex-direction: column;
gap: 5px;
align-items: center;
padding: 10px 6px 8px;
border: 1px solid var(--border);
border-radius: 10px;
color: var(--text-soft);
text-align: center;
text-decoration: none;
}
.passi-barra:hover { background: var(--surface-soft); border-color: var(--border-strong); }
.passi-barra.is-vuota { opacity: .5; }
.passi-barra-colonna {
display: flex;
align-items: flex-end;
width: 26px;
height: 44px;
}
.passi-barra-colonna > span {
width: 100%;
background: var(--accent);
border-radius: 4px 4px 0 0;
}
.passi-barra.is-vuota .passi-barra-colonna > span { background: var(--border-strong); }
.passi-barra strong { font-size: 16px; font-variant-numeric: tabular-nums; color: var(--text); }
.passi-barra-nome { font-size: 11px; line-height: 1.3; }
.passo-tappa { margin-bottom: 14px; }
.passo-tappa.is-vuota { opacity: .62; }
.passo-tappa.is-vuota .card-header { padding-bottom: 20px; }
.passo-soldi { font-size: 13px; color: var(--text-soft); font-variant-numeric: tabular-nums; }
.passo-righe { list-style: none; margin: 0; padding: 0; }
.passo-riga {
display: grid;
grid-template-columns: minmax(180px, 1fr) minmax(0, 2fr) auto;
gap: 8px 24px;
align-items: center;
padding: 14px 24px;
border-top: 1px solid var(--border);
}
.passo-riga.is-ferma { border-left: 3px solid var(--orange); }
.passo-chi { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.passo-chi a { text-decoration: none; }
.passo-chi strong { font-size: 14.5px; font-weight: 600; }
.passo-chi a:hover strong { text-decoration: underline; }
.passo-chi > span { color: var(--text-soft); font-size: 12.5px; }
.passo-dati { display: flex; flex-wrap: wrap; gap: 4px 22px; margin: 0; }
.passo-dati > div { display: flex; flex-direction: column; gap: 1px; }
.passo-dati dt { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .04em; }
.passo-dati dd { margin: 0; font-size: 13px; font-variant-numeric: tabular-nums; }
.passo-dati > div.is-manca dd { color: var(--orange); font-weight: 550; }
.passo-debole {
grid-column: 1 / 3;
margin: 0;
color: var(--muted);
font-size: 12px;
}
@media (max-width: 900px) {
.passo-riga { grid-template-columns: 1fr auto; }
.passo-dati { grid-column: 1 / -1; }
.passo-debole { grid-column: 1 / -1; }
}
/* Il conto sotto l'intestazione della tappa: chi ci è già passato, chi
non ci passa e perché, chi ci arriverà. È quello che rende leggibile
una tappa vuota — senza, «nessuno fermo qui» e «qui non passa nessuno»
si scrivono uguale e sono situazioni opposte. */
.passo-conti {
display: flex;
flex-wrap: wrap;
gap: 4px 18px;
margin: 0;
padding: 0 24px 14px;
color: var(--text-soft);
font-size: 12.5px;
}
.passo-conti span { display: inline-flex; align-items: center; gap: 5px; }
.passo-conti .is-spenta { color: var(--muted); }
.passo-conti i { font-size: 14px; }
.passo-tappa.is-vuota .card-header { padding-bottom: 12px; }
/* Le bande: quattro domande diverse, e non devono sembrare una lista
sola. */
.banda-testa {
display: flex;
flex-direction: column;
gap: 2px;
margin: 26px 0 12px;
padding-left: 2px;
border-left: 3px solid var(--accent);
padding: 2px 0 2px 12px;
}
.banda-testa h2 { margin: 0; font-size: 16px; font-weight: 650; }
.banda-testa p { margin: 0; max-width: 74ch; color: var(--text-soft); font-size: 12.5px; line-height: 1.5; }
.banda-testa.is-uscite { border-left-color: var(--red); }
/* Il bivio: affiancati, perché sono alternative. Uno sotto l'altro si
leggevano come una sequenza. */
.binari { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-start; }
.binario { flex: 1 1 320px; min-width: 0; }
.binario.is-vuoto { opacity: .68; }
.binario-testa {
display: flex;
flex-wrap: wrap;
gap: 4px 10px;
align-items: baseline;
margin-bottom: 8px;
padding: 0 2px;
}
.binario-testa h3 { margin: 0; font-size: 14px; font-weight: 620; }
.binario-testa em { flex: 1 1 100%; color: var(--muted); font-size: 12px; font-style: normal; }
.binario .passo-tappa { margin-bottom: 10px; }
.binario .passo-riga { grid-template-columns: 1fr auto; }
.binario .passo-dati { grid-column: 1 / -1; }
.binario .passo-debole { grid-column: 1 / -1; }
.passi-barre-stacco {
width: 1px;
align-self: stretch;
margin: 6px 4px;
background: var(--border);
}
.passi-barra.is-binario .passi-barra-colonna > span { background: var(--accent-strong, var(--accent)); }
.passi-barra.is-uscita .passi-barra-colonna > span { background: var(--red); }
.passo-tappa.is-uscita { border-left: 3px solid var(--red); }
/* Lo storico della pratica: cosa è successo, in ordine. Serve nel
momento peggiore — il cliente che sei mesi dopo dice «questo non l'ho
mai accettato». */
.storico { list-style: none; margin: 0; padding: 0; }
.storico-riga {
display: grid;
grid-template-columns: 78px 28px minmax(0, 1fr);
gap: 12px;
align-items: baseline;
padding: 11px 24px;
border-top: 1px solid var(--border);
font-size: 13.5px;
line-height: 1.5;
}
.storico-quando { display: flex; flex-direction: column; gap: 1px; }
.storico-quando strong { font-size: 12.5px; font-variant-numeric: tabular-nums; }
.storico-quando span { color: var(--muted); font-size: 11.5px; font-variant-numeric: tabular-nums; }
.storico-segno {
display: grid;
place-items: center;
width: 26px;
height: 26px;
border-radius: 50%;
background: var(--surface-soft);
color: var(--muted);
font-size: 14px;
}
.storico-cosa { overflow-wrap: anywhere; }
.storico-riga.is-soldi .storico-segno { background: var(--green-background); color: var(--green); }
.storico-riga.is-voce .storico-segno { background: var(--accent-soft); color: var(--accent-text); }
.storico-riga.is-uscita .storico-segno { background: var(--orange-background); color: var(--orange); }
.storico-riga.is-nascita .storico-segno { background: var(--accent-soft); color: var(--accent-text); }
@media (max-width: 700px) {
.storico-riga { grid-template-columns: 70px minmax(0, 1fr); }
.storico-segno { display: none; }
}
/* ── Aule online ──────────────────────────────────────────────────────
Un'aula e' una stanza sola: due corsi non possono usarla nello stesso
momento. Qui si vede chi la occupa e quando. */
/* La password si mostra su richiesta: sta su una schermata che qualcuno
puo' avere aperta alle spalle, e per sapere che c'e' non serve
leggerla. */
.password-svela summary {
color: var(--accent-text);
cursor: pointer;
font-size: 12px;
list-style: none;
}
.password-svela summary::-webkit-details-marker { display: none; }
.password-svela summary::before { content: '👁 '; }
.password-svela[open] summary { color: var(--muted); }
.password-svela code {
display: inline-block;
margin-top: 4px;
padding: 3px 8px;
background: var(--surface-soft);
border: 1px solid var(--border);
border-radius: 6px;
font-size: 13px;
user-select: all;
}
/* Con chi si scontra un'aula occupata: «occupata» da sola obbliga ad
aprire il calendario degli altri corsi uno per uno. */
.conflitti {
list-style: none;
margin: 6px 0 0;
padding: 0;
color: var(--text-soft);
font-size: 12px;
line-height: 1.6;
}
.conflitti .muted { color: var(--muted); }
tr.is-spenta td { opacity: .6; }
/* La settimana degli account: quanto sono usati, e dove c'è spazio.
Sono domande a cui si risponde guardando, non leggendo un elenco. */
.aule-settimana th { font-size: 11.5px; text-align: left; }
.aule-settimana th span { display: block; color: var(--muted); font-weight: 400; }
.aule-settimana td { vertical-align: top; min-width: 108px; }
.aule-settimana .is-oggi { background: var(--accent-soft); }
.aula-impegno {
display: block;
margin-bottom: 4px;
padding: 5px 7px;
background: var(--surface-soft);
border-left: 3px solid var(--accent);
border-radius: 4px;
font-size: 11.5px;
line-height: 1.35;
text-decoration: none;
color: var(--text);
}
.aula-impegno:hover { background: var(--accent-soft); }
.aula-impegno strong { display: block; font-variant-numeric: tabular-nums; }
.aula-impegno span { color: var(--text-soft); }
/* Il corso che non ha ancora la sua riunione: e' lavoro arretrato, e si
vede dove si sta gia' guardando. */
.aula-impegno.is-senza-stanza { border-left-color: var(--orange); }
/* ── La disponibilita', ora per ora ───────────────────────────────────
«Giovedi' l'Aula 3 e' occupata» non serve a niente: e' occupata dalle
9 alle 13, e dalle 14 in poi ci sta un altro corso. */
/* Colonne tutte della stessa larghezza: se una fascia occupata si
allarga per far entrare il nome, le ore non stanno piu' in colonna e
la griglia smette di potersi leggere in verticale. */
.aule-ore { border-collapse: collapse; width: 100%; table-layout: fixed; }
/* Con diciannove account la testata esce dallo schermo mentre si
scorre, e arrivati in fondo non si sa piu' che ora si sta guardando.
L'altezza serve: senza, il contenitore non scorre e «sticky» in
verticale non ha nulla a cui attaccarsi. */
.aule-ore-wrap { max-height: 72vh; overflow: auto; }
.aule-ore caption {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
border: 0;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
.aule-ore th,
.aule-ore td {
width: 82px;
max-width: 82px;
border: 1px solid var(--border);
padding: 0;
height: 34px;
}
/* A mezz'ora le colonne raddoppiano: tenerle a 82px vorrebbe dire due
schermate, e il pomeriggio fuori dalla vista proprio quando si sta
cercando dove incastrare un corso. */
.aule-ore.is-mezzora th,
.aule-ore.is-mezzora td { width: 46px; max-width: 46px; }
.aule-ore.is-mezzora thead th { font-size: 10px; letter-spacing: -.03em; }
/* L'inizio dell'ora piena: senza, ventisei colonne uguali sono un muro
e contarle diventa un lavoro. */
.aule-ore.is-mezzora td.is-ora,
.aule-ore.is-mezzora thead th.is-ora { border-left-color: #b6bfcd; }
.aule-ore thead th {
position: sticky;
top: 0;
z-index: 2;
padding: 5px 2px;
background: var(--surface-soft);
color: var(--text-soft);
font-size: 11.5px;
font-variant-numeric: tabular-nums;
text-align: center;
white-space: nowrap;
}
.aule-ore tbody th,
.aule-ore thead th:first-child {
position: sticky;
left: 0;
z-index: 1;
width: 158px;
max-width: 158px;
padding: 6px 12px;
background: var(--surface);
font-weight: 400;
text-align: left;
/* La colonna è stretta apposta: allargarla vorrebbe dire meno ore
in vista. Un nome lungo però la sfondava, finendo sopra la prima
fascia — per esteso resta nel suggerimento. */
overflow: hidden;
}
.aule-ore tbody th strong {
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.aule-ore thead th:first-child { z-index: 3; background: var(--surface-soft); }
/* Il bordo di chiusura: la regola generale delle tabelle toglie quello
dell'ultima riga, e la griglia resterebbe aperta in basso. */
.aule-ore tbody tr:last-child td,
.aule-ore tbody tr:last-child th { border-bottom: 1px solid var(--border); }
.aule-ore .is-libera { background: var(--surface); }
/* Seguire una cella fino al nome dell'account, a sinistra, e' la cosa
che si fa piu' spesso: la riga sotto il mouse deve accendersi. Le
celle hanno un fondo di classe, quindi la regola generale delle
tabelle non le tocca e va ripetuta qui. */
.aule-ore tbody tr:hover th,
.aule-ore tbody tr:hover td.is-libera { background: var(--surface-soft); }
.aule-ore tbody tr:hover td.is-occupata { background: #cfe0f6; }
/* L'ora occupata: un blocco pieno che si legge da lontano. Il nome del
corso si scrive solo nella prima ora, altrimenti una lezione di
quattro ore lo ripete quattro volte. */
.aule-ore .is-occupata {
background: #dbe8f8;
border-top-color: #7ba4dc;
border-bottom-color: #7ba4dc;
border-left-color: transparent;
}
/* Due cose sullo stesso account alla stessa ora: una delle due non
entrera' in aula, ed e' un errore che costa una lezione. */
.aule-ore .is-doppia {
box-shadow: inset 0 0 0 2px var(--red);
}
.aule-ore .is-occupata.is-inizio {
border-left: 3px solid var(--accent);
padding-left: 6px;
padding-right: 6px;
}
.aule-ore .is-occupata.is-inizio.is-senza-stanza { border-left-color: var(--orange); }
/* Dentro la cella ci va la sigla, e ci sta: il titolo per esteso
diventerebbe «Gruppo Impie…», che non distingue il secondo corso dal
terzo. Il nome intero e' nel suggerimento. */
.aule-ore .is-occupata a {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
padding: 0 4px;
color: var(--text);
font-size: 11.5px;
font-weight: 600;
line-height: 1.25;
overflow: hidden;
text-align: center;
text-decoration: none;
text-overflow: ellipsis;
white-space: nowrap;
}
.aule-ore .is-occupata a:hover { text-decoration: underline; }
/* Un centinaio di link in griglia: senza anello di focus, da tastiera
si naviga alla cieca. */
.aule-ore .is-occupata a:focus-visible {
outline: 2px solid var(--accent);
outline-offset: -3px;
}
.aule-ore tr.is-spenta th strong { color: var(--muted); font-weight: 500; }
/* Quello che serve a chi legge con la voce e non con gli occhi: una
cella vuota non dice «libera», il colore da solo non e' un'informazione. */
.aule-nascosto {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
/* Le sigle per esteso, sotto la griglia: e' la vera legenda, ed e' la
risposta che si legge al telefono senza passare il mouse su niente. */
.aule-elenco { padding: 0 24px 20px; }
.aule-elenco h3 { margin: 0 0 10px; font-size: 13px; font-weight: 600; }
/* Una riga per voce, e le tre informazioni incolonnate. Affiancate a
due a due e separate da dei punti, l'aula e l'ora finivano ogni riga
in un posto diverso: per leggerle bisognava cercarle. */
.aule-elenco ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 2px; }
.aule-elenco li {
display: grid;
grid-template-columns: minmax(0, 1fr) 130px 150px;
gap: 12px;
align-items: baseline;
padding: 5px 0;
border-bottom: 1px solid var(--border);
font-size: 12.5px;
}
.aule-elenco li:last-child { border-bottom: 0; }
.aule-elenco-cosa { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.aule-elenco-cosa strong { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aule-elenco-cosa em { color: var(--muted); font-style: normal; font-size: 11px; white-space: nowrap; }
.aule-elenco-dove,
.aule-elenco-quando { color: var(--text-soft); font-size: 11.5px; white-space: nowrap; }
@media (max-width: 720px) {
.aule-elenco li { grid-template-columns: 1fr; gap: 2px; }
.aule-elenco-cosa strong { white-space: normal; }
}
/* La striscia dei giorni: si sceglie quale guardare sapendo gia' dove
c'e' movimento. */
.aule-giorni {
display: flex;
flex-wrap: wrap;
gap: 6px;
padding: 0 24px 16px;
}
.aule-giorno {
display: flex;
flex-direction: column;
gap: 1px;
min-width: 74px;
padding: 7px 10px;
border: 1px solid var(--border);
border-radius: 9px;
color: var(--text);
text-align: center;
text-decoration: none;
}
.aule-giorno:hover { border-color: var(--border-strong); background: var(--surface-soft); }
.aule-giorno strong { font-size: 12px; }
.aule-giorno span { color: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.aule-giorno em { color: var(--accent-text); font-size: 11px; font-style: normal; }
.aule-giorno.is-vuoto em { color: var(--muted); }
.aule-giorno.is-oggi { border-color: var(--border-strong); }
.aule-giorno.is-scelto {
background: var(--accent-soft);
border-color: var(--accent);
}
/* Dentro il menu dei puntini: l'azione che distrugge si vede che
distrugge, e dove non si puo' fare si spiega invece di sparire. */
.action-menu-nota {
display: block;
padding: 8px 12px;
max-width: 220px;
color: var(--muted);
font-size: 11.5px;
line-height: 1.45;
}
/* I corsi che usano un account, sotto i suoi numeri. */
.aula-corso { margin-top: 4px; font-size: 12px; }
.aula-corso a { text-decoration: none; }
.aula-corso a:hover { text-decoration: underline; }
/* Il numero della riunione: si detta al telefono, quindi si legge. */
.stanza-numero { font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.stanza-link {
display: inline-block;
max-width: 260px;
overflow: hidden;
text-overflow: ellipsis;
vertical-align: bottom;
white-space: nowrap;
color: var(--text-soft);
font-size: 12px;
}
/* Quanto e' carico un account, in confronto agli altri: dieci numeri in
colonna non dicono se il parco e' pieno o scarico. */
.aula-carico {
display: block;
width: 100%;
max-width: 90px;
height: 4px;
margin-top: 5px;
background: var(--border);
border-radius: 2px;
overflow: hidden;
}
.aula-carico > span { display: block; height: 100%; background: var(--accent); }
.aule-legenda {
margin: 0;
padding: 12px 24px 18px;
color: var(--muted);
font-size: 12px;
}
/* Il lavoro che aspetta nell'altra scheda. */
.aule-tab-conto {
display: inline-block;
margin-left: 6px;
padding: 1px 7px;
background: var(--orange-background);
border-radius: 999px;
color: var(--orange);
font-size: 11.5px;
font-weight: 600;
}
/* I dati di accesso: scoperti tutti insieme, e richiusi da soli. */
.aula-svela {
padding: 0;
background: none;
border: 0;
color: var(--accent-text);
cursor: pointer;
font-size: 12px;
}
.aula-svela:hover { text-decoration: underline; }
.aula-accesso dl { margin: 6px 0 0; display: grid; gap: 3px; }
.aula-accesso dl > div { display: grid; grid-template-columns: 68px minmax(0, 1fr); gap: 8px; align-items: baseline; }
.aula-accesso dt { color: var(--muted); font-size: 11px; }
.aula-accesso dd { margin: 0; font-size: 12.5px; overflow-wrap: anywhere; }
.aula-accesso code { font-size: 12.5px; user-select: all; }
.aula-accesso .aula-nota dd { color: var(--text-soft); }
.aula-copia {
margin-left: 6px;
padding: 0 5px;
background: var(--surface-soft);
border: 1px solid var(--border);
border-radius: 5px;
color: var(--muted);
cursor: pointer;
font-size: 10.5px;
}
.aula-copia:hover { color: var(--text); border-color: var(--border-strong); }
/* Dove non si puo' cancellare si scrive perche', invece di mettere un
pulsante spento che sul telefono non spiega niente. */
.aula-nocancella {
display: block;
margin-top: 6px;
max-width: 190px;
color: var(--muted);
font-size: 11.5px;
line-height: 1.4;
}
/* Le istruzioni di una configurazione: si leggono una volta e si
seguono, quindi numerate e spaziate. */
.istruzioni {
margin: 0;
padding: 0 24px 22px 44px;
color: var(--text);
font-size: 13.5px;
line-height: 1.65;
}
.istruzioni li { margin-bottom: 10px; }
.istruzioni code {
padding: 1px 6px;
background: var(--surface-soft);
border: 1px solid var(--border);
border-radius: 5px;
font-size: 12.5px;
}
/* Occupato da qualcosa che non e' una lezione di Paideaxis: un corso
partito prima, una riunione fissa. Occupa uguale, ma si distingue —
su quello non si puo' intervenire da qui, e dentro non ci si scrive
niente: il tratteggio dice «occupato», il nome sta nel suggerimento. */
.aule-ore .is-impegnata {
background: repeating-linear-gradient(
45deg,
#f1f3f6,
#f1f3f6 4px,
#c4cbd6 4px,
#c4cbd6 5px
);
}
/* Dentro non ci va niente: il tratteggio dice «occupato», il nome sta
nel suggerimento. */
/* La pagina che carica aule e impegni in blocco. */
.importa-perche { padding: 0 24px 20px; max-width: 74ch; color: var(--text); font-size: 13.5px; line-height: 1.65; }
.importa-perche p { margin: 0 0 10px; }
.importa-modulo { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding: 14px 24px 22px; }
.importa-modulo .input { max-width: 340px; }
.modello-colonne code { font-size: 12.5px; }
.modello-colonne td:first-child { white-space: nowrap; }
.righe-saltate { margin: 6px 0; padding-left: 18px; font-size: 12.5px; line-height: 1.6; }
/* Chiudere un impegno: la data di fine e il «togli», sulla riga. */
.impegno-chiudi { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.impegno-chiudi .input-small { max-width: 150px; height: 30px; font-size: 12.5px; }
.impegno-azioni { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.impegno-azioni form { display: contents; }
/* La sigla del corso, dove serve accanto al nome per intero. */
.aula-sigla {
display: inline-block;
margin-right: 6px;
padding: 1px 6px;
background: var(--surface-soft);
border: 1px solid var(--border);
border-radius: 5px;
color: var(--text-soft);
font-size: 11px;
font-weight: 600;
}
/* La ricerca libera sopra la griglia: «il Solidworks di Rossi quando si
fa?» e' una domanda che la griglia, un giorno per volta, non regge. */
.aule-cerca { padding: 16px 24px; }
/* A ricerca vuota e' una barra, non una scheda: chi apre la pagina per
sapere chi e' libero adesso non deve trovarsi la griglia sotto la
piega per colpa di un campo vuoto. */
.aule-cerca.is-vuota { padding: 10px 24px; }
.aule-cerca-riga {
display: flex;
flex-wrap: wrap;
gap: 10px;
align-items: center;
}
.aule-cerca-riga > i { color: var(--text-soft); font-size: 18px; }
.aule-cerca-riga .input { flex: 1 1 320px; }
.aule-cerca-nulla { margin: 14px 0 0; }
.aule-cerca .table-wrap { margin-top: 16px; }
/* Un gruppo di scelte esclusive: ora o mezz'ora sulla griglia, «da
sistemare / fatte / tutti» sulle stanze. Il nome e' neutro apposta —
si chiamava .aule-grana, e chi l'avesse ritoccata per la griglia
avrebbe spostato anche il filtro delle stanze. Vive in app.css e non
si chiama .vista-scelta perche' quella sta in recruiting.css, che qui
non viene caricato. */
.scelta-segmento,
.aule-grana {
display: inline-flex;
gap: 2px;
padding: 2px;
background: var(--grey-background);
border-radius: 8px;
}
.scelta-segmento > span,
.aule-grana > span {
padding: 4px 6px 4px 10px;
color: var(--text-soft);
font-size: 12px;
font-weight: 550;
}
.scelta-segmento a,
.aule-grana a {
padding: 4px 12px;
border-radius: 6px;
color: var(--text-soft);
font-size: 12.5px;
font-weight: 550;
text-decoration: none;
}
.scelta-segmento a.is-active,
.aule-grana a.is-active {
background: var(--surface);
color: var(--text);
box-shadow: 0 1px 3px rgba(20, 30, 50, .1);
}
/* Il motivo per cui un pulsante e' spento, scritto dove il pulsante e'.
Un comando disattivato senza spiegazione manda a cercare la causa
dove non c'e', e la risposta finisce al telefono. */
.perche-no {
display: flex;
gap: 12px;
align-items: flex-start;
max-width: 72ch;
margin: 0 0 16px;
padding: 14px 16px;
background: var(--surface-soft);
border: 1px solid var(--border);
border-left: 3px solid var(--text-soft);
border-radius: 8px;
}
.perche-no > i { margin-top: 1px; color: var(--text-soft); font-size: 18px; }
.perche-no strong { display: block; margin-bottom: 4px; font-size: 13.5px; }
.perche-no p { margin: 0 0 6px; color: var(--text-soft); font-size: 13px; line-height: 1.6; }
.perche-no p:last-child { margin-bottom: 0; }
/* ── Le schede delle aule online ─────────────────────────────────────
Quattro mestieri, e la ricerca che vale per tutti: la domanda al
telefono arriva mentre si sta facendo altro. */
.aule-testa {
display: flex;
flex-wrap: wrap;
gap: 12px;
align-items: center;
justify-content: space-between;
margin-bottom: 18px;
}
.aule-testa .worklist-tabs { margin: 0; }
.aule-testa-destra {
display: flex;
flex-wrap: wrap;
gap: 10px;
align-items: center;
}
.aule-cerca-testa {
display: flex;
gap: 8px;
align-items: center;
flex: 0 1 300px;
}
.aule-cerca-testa .input { flex: 1; height: 34px; font-size: 13px; }
/* Gli impegni, raggruppati per account: senza il nome sopra, quaranta
righe di fila non dicono di chi sono. */
.impegni-filtri {
display: flex;
flex-wrap: wrap;
gap: 10px;
align-items: center;
padding: 0 24px 16px;
}
.impegni-filtri .input { max-width: 240px; height: 34px; font-size: 13px; }
.impegni-solo { display: flex; gap: 6px; align-items: center; color: var(--text-soft); font-size: 13px; }
/* Un'aula e cosa la occupa, in una scheda che si apre. Il contenitore
e il suo contenuto nello stesso posto: è così che la differenza fra
«aula» e «impegno» si vede invece di doverla spiegare. */
.aula-scheda { border-top: 1px solid var(--border); }
.aula-scheda:first-of-type { border-top: 0; }
.aula-scheda > summary {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
padding: 14px 24px;
cursor: pointer;
list-style: none;
}
.aula-scheda > summary::-webkit-details-marker { display: none; }
.aula-scheda > summary:hover { background: var(--surface-soft); }
.aula-scheda > summary strong { font-size: 14.5px; font-weight: 600; }
.aula-freccia { color: var(--muted); transition: transform .15s ease; }
.aula-scheda[open] > summary .aula-freccia { transform: rotate(90deg); }
.aula-dentro { padding: 4px 24px 20px; display: grid; gap: 20px; }
.aula-parte h3 {
margin: 0 0 8px;
color: var(--text-soft);
font-size: 12px;
font-weight: 600;
letter-spacing: .04em;
text-transform: uppercase;
}
/* La definizione accanto al dato, sempre la stessa: sei definizioni in
sei punti insegnano meno di una ripetuta sei volte. */
.aula-spiega { margin: 0 0 10px; color: var(--text-soft); font-size: 12.5px; line-height: 1.6; max-width: 78ch; }
.aula-elenco { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.aula-elenco li {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
font-size: 13.5px;
}
.aula-link {
display: inline-flex;
align-items: center;
gap: 6px;
color: var(--muted);
font-size: 12px;
word-break: break-all;
}
.aula-piede { display: flex; align-items: center; gap: 8px; padding-top: 4px; }
.impegni-gruppo { padding: 0 0 8px; border-top: 1px solid var(--border); }
.impegni-gruppo:first-of-type { border-top: 0; }
/* L'intestazione dell'account: si preme tutta, quindi si deve vedere
che si preme. Il conteggio sta qui perché è quello che fa decidere
se aprirlo. */
.impegni-gruppo > summary {
display: flex;
align-items: center;
gap: 10px;
padding: 12px 24px;
cursor: pointer;
list-style: none;
}
.impegni-gruppo > summary::-webkit-details-marker { display: none; }
.impegni-gruppo > summary:hover { background: var(--surface-soft); }
.impegni-gruppo > summary strong { font-size: 13.5px; font-weight: 600; }
/* La freccia gira: dice se quel che c'è sotto è aperto o chiuso senza
doverlo scoprire premendo. */
.impegni-freccia { color: var(--muted); transition: transform .15s ease; }
.impegni-gruppo[open] > summary .impegni-freccia { transform: rotate(90deg); }
.impegni-restanti {
margin: 0;
padding: 10px 24px 4px;
color: var(--text-soft);
font-size: 13px;
}
/* Il collegamento degli allievi, sotto il nome del corso: si legge e si
copia senza aprire nient'altro. */
.impegno-collegamento {
display: flex;
align-items: center;
gap: 6px;
margin-top: 6px;
}
.impegno-collegamento label {
color: var(--muted);
font-size: 11px;
white-space: nowrap;
}
.impegno-collegamento .input { max-width: 260px; }
/* La finestra che propone l'aula invece di farla cercare. */
.aula-popup {
width: min(520px, calc(100vw - 32px));
padding: 24px;
border: 1px solid var(--border);
border-radius: 14px;
background: var(--surface);
color: var(--text);
box-shadow: 0 24px 60px rgba(20, 30, 50, .22);
}
.aula-popup::backdrop { background: rgba(20, 30, 50, .38); }
.aula-popup h2 { margin: 0 34px 16px 0; font-size: 17px; font-weight: 600; }
.aula-popup-chiudi { position: absolute; top: 14px; right: 14px; }
.aula-popup-chiudi button {
padding: 4px;
border: 0;
background: none;
color: var(--text-soft);
cursor: pointer;
font-size: 18px;
line-height: 1;
}
.aula-popup-dati { display: grid; gap: 12px; margin: 0 0 16px; }
.aula-popup-dati dt { color: var(--text-soft); font-size: 11.5px; letter-spacing: .03em; text-transform: uppercase; }
.aula-popup-dati dd { margin: 2px 0 0; font-size: 14.5px; font-weight: 600; overflow-wrap: anywhere; }
.aula-popup-nota {
margin: 0 0 16px;
padding: 10px 12px;
background: var(--surface-soft);
border-left: 3px solid var(--orange);
border-radius: 6px;
color: var(--text-soft);
font-size: 13px;
line-height: 1.55;
}
.aula-popup-azioni { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.aula-popup-perche { margin: 4px 0 0; color: var(--text-soft); font-size: 12.5px; }
/* Spento ma raggiungibile: un comando tolto dall'ordine di tabulazione
porta via anche la sua spiegazione. */
.button.is-spento { opacity: .5; cursor: not-allowed; }
/* I pagamenti, visti da chi paga: il conto in cima e le righe sotto. */
.conto-rate {
display: grid;
gap: 18px;
grid-template-columns: repeat(auto-fit, minmax(105px, 1fr));
padding: 20px 24px;
}
.conto-rate dt {
color: var(--text-soft);
font-size: 11.5px;
letter-spacing: .04em;
text-transform: uppercase;
}
.conto-rate dd {
margin: 4px 0 0;
font-size: 22px;
font-weight: 600;
font-variant-numeric: tabular-nums;
}
.conto-rate .is-aperto dd { color: var(--orange); }
/* La regola generale di «.is-tardi» mette in grassetto: su una riga
intera rimprovera piu' del badge, e il badge lo dice gia'. */
.rate-mie tr.is-tardi { font-weight: 400; }
.rate-mie tr.is-tardi td { border-left-color: var(--orange); }
.rate-mie tr.is-tardi td:first-child { box-shadow: inset 3px 0 0 var(--orange); }
td.importo { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
/* Le scadenze dopo la prima, dentro il promemoria: si legge la fila
intera invece di tornare qui ogni mese. */
.altre-scadenze { display: block; margin-top: 4px; color: var(--text-soft); font-size: 13px; }
.promemoria-tutto { display: inline-block; margin-top: 6px; font-size: 13px; font-weight: 600; }
/* Le rate sul telefono: la colonna che dice se sei a posto non puo'
finire fuori schermo dietro uno scorrimento che non si vede. */
@media (max-width: 560px) {
.rate-mie thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.rate-mie tbody tr { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; padding: 12px 16px; }
.rate-mie tbody td { border: 0; padding: 0; }
.rate-mie tbody td:nth-child(1) { order: 1; }
.rate-mie tbody td:nth-child(4) { order: 2; text-align: right; }
.rate-mie tbody td:nth-child(2) { order: 3; color: var(--text-soft); font-size: 13px; }
.rate-mie tbody td:nth-child(3) { order: 4; text-align: right; font-size: 16px; }
.rate-mie tbody tr + tr { border-top: 1px solid var(--border); }
.rate-mie tbody td .badge { white-space: normal; }
}
/* Dalla pagina del corso si rimanda al conto vero, che sta altrove. */
.rate-rimando {
display: flex;
flex-wrap: wrap;
gap: 14px;
align-items: center;
justify-content: space-between;
padding: 18px 24px;
}
.rate-rimando p { margin: 3px 0 0; font-size: 13px; }
/* «ATTENZIONE: aula non disponibile». Non e' un avviso fra i tanti: da
qui si decide se due classi finiranno nella stessa stanza. */
.aula-occupata {
margin: 0 0 18px;
padding: 16px 18px;
background: var(--orange-background, #fdf6ec);
border: 2px solid var(--orange);
border-radius: 10px;
}
.aula-occupata p { margin: 0 0 8px; font-size: 13.5px; line-height: 1.6; }
.aula-occupata p:last-child { margin-bottom: 0; }
/* Chi è impegnato in quell'ora. Stesso tono dell'aula occupata — è la
stessa situazione, ci si ferma e si decide — ma qui c'è da scegliere,
quindi le righe sono caselle e non un elenco da leggere. */
.conflitti-persone {
margin: 0 0 18px;
padding: 16px 18px;
background: var(--orange-background, #fdf6ec);
border: 2px solid var(--orange);
border-radius: 10px;
}
.conflitti-persone h3 {
display: flex;
align-items: center;
gap: 8px;
margin: 0 0 8px;
font-size: 15px;
font-weight: 600;
}
.conflitti-persone h3 i { font-size: 20px; }
.conflitti-persone:focus { outline: 2px solid var(--orange); outline-offset: 3px; }
.conflitti-persone p { margin: 0 0 10px; font-size: 13.5px; line-height: 1.6; }
.conflitti-elenco { margin: 0 0 10px; padding: 0; list-style: none; display: grid; gap: 8px; }
.conflitti-elenco label {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
gap: 10px;
align-items: start;
padding: 10px 12px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 8px;
font-size: 13.5px;
line-height: 1.55;
cursor: pointer;
}
.conflitti-elenco input { margin-top: 3px; }
.conflitti-elenco em { color: var(--muted); font-style: normal; font-size: 12px; }
/* Cosa succede se resta spuntata: sotto, e più quieto della riga —
è la conseguenza, non il fatto. */
.conflitti-cosa { display: block; margin-top: 2px; color: var(--text-soft); font-size: 12.5px; }
.conflitti-persone .conflitti-nota { margin-bottom: 0; font-size: 12.5px; color: var(--text-soft); }
/* L'anteprima di quello che leggeranno: si legge come un'email, non
come un campo di un modulo. */
.anteprima-email { margin: 0 24px 18px; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.anteprima-email .oggetto {
padding: 12px 16px;
background: var(--surface-soft);
border-bottom: 1px solid var(--border);
font-weight: 600;
}
.anteprima-email pre {
margin: 0;
padding: 16px;
font-family: inherit;
font-size: 13.5px;
line-height: 1.65;
white-space: pre-wrap;
overflow-wrap: anywhere;
}
.anteprima-azioni { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding: 0 24px 22px; }
.anteprima-azioni form { display: flex; gap: 10px; align-items: center; }
.di-nuovo { display: flex; gap: 6px; align-items: center; color: var(--text-soft); font-size: 13px; }
/* Il titolo dell'avviso e' un titolo, non un div: chi naviga per
intestazioni deve poterlo trovare. */
.aula-occupata h3 {
display: flex;
gap: 8px;
align-items: center;
margin: 0 0 8px;
color: var(--orange);
font-size: 15px;
font-weight: 700;
}
.aula-occupata h3 i { font-size: 20px; }
.aula-occupata:focus { outline: 2px solid var(--orange); outline-offset: 3px; }
.anteprima-azioni .field-hint { flex: 1 1 260px; }
/* Una conferma che non distrugge: si scrive la parola lo stesso, ma il
rosso resta per quello che non si puo' disfare. */
.confirm-modal.is-normale .confirm-icon { background: var(--accent-soft); color: var(--accent); }
/* La fascia di chi sta guardando con gli occhi di un altro: in cima a
tutto, perche' dimenticarsene e' il modo di lasciare una traccia a
nome di qualcun altro. */
/* Fissa, non «sticky»: l'intestazione e la barra laterale sono anche
loro attaccate in alto, e sovrapponendosi le coprivano il titolo. Lo
spazio che occupa si dichiara una volta e lo leggono le altre due. */
:root { --fascia-sguardo: 0px; }
body.con-fascia-sguardo { --fascia-sguardo: 37px; padding-top: var(--fascia-sguardo); }
body.con-fascia-sguardo .header { top: var(--fascia-sguardo); }
body.con-fascia-sguardo .sidebar { top: var(--fascia-sguardo); height: calc(100vh - var(--fascia-sguardo)); }
.fascia-sguardo {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 60;
display: flex;
flex-wrap: wrap;
gap: 12px;
align-items: center;
justify-content: center;
padding: 8px 16px;
background: #4a3b12;
color: #fdf6ec;
font-size: 13px;
}
.fascia-sguardo span { display: flex; gap: 8px; align-items: center; }
.fascia-sguardo strong { font-weight: 600; }
.fascia-sguardo button {
padding: 4px 12px;
border: 1px solid rgba(253, 246, 236, .4);
border-radius: 6px;
background: transparent;
color: inherit;
cursor: pointer;
font-size: 12.5px;
font-weight: 600;
}
.fascia-sguardo button:hover { background: rgba(253, 246, 236, .12); }
/* Registrare l'aula di un corso partito prima di Paideaxis: si scrive
quello che c'e', non si sceglie fra proposte. */
.registra-aula { display: grid; gap: 16px; max-width: 640px; padding: 0 24px 22px; }
/* Il fieldset non deve sembrare una scatola dentro la scatola. */
.impegni-da-chiudere { margin: 0; padding: 0; border: 0; }
.impegni-da-chiudere legend { padding: 0; font-size: 13px; font-weight: 600; }
.impegno-scelta {
display: flex;
gap: 9px;
align-items: flex-start;
margin-top: 8px;
padding: 10px 12px;
background: var(--surface-soft);
border: 1px solid var(--border);
border-radius: 8px;
font-size: 13px;
line-height: 1.5;
}
.impegno-scelta input { margin-top: 2px; }
/* ── La guida ────────────────────────────────────────────────────────
Il «?» in cima porta alla pagina della schermata in cui sei. */
.aiuto {
display: inline-flex;
width: 34px;
height: 34px;
align-items: center;
justify-content: center;
border: 1px solid var(--border);
border-radius: 9px;
color: var(--text-soft);
font-size: 18px;
text-decoration: none;
}
.aiuto:hover { border-color: var(--border-strong); background: var(--surface); color: var(--text); }
.guida { display: grid; gap: 20px; grid-template-columns: 240px minmax(0, 1fr); align-items: start; }
/* Scorre per conto suo: un indice appiccicato più alto della finestra
si taglia in fondo, e le ultime voci non si raggiungono in nessun modo. */
.guida-indice { position: sticky; top: 84px; max-height: calc(100vh - 104px); overflow-y: auto; }
.guida-indice form { margin-bottom: 12px; }
.guida-indice .riga { display: flex; gap: 6px; }
.guida-indice .riga .input { flex: 1; min-width: 0; }
.guida-indice .input { height: 34px; font-size: 13px; }
.guida-indice ul { margin: 6px 0 0; padding: 0; list-style: none; display: grid; gap: 2px; }
/* L'intestazione del gruppo: si legge come un'etichetta, non come una
voce cliccabile, altrimenti si prova a premerla. */
.guida-gruppo {
margin: 16px 0 2px;
padding: 0 10px;
color: var(--muted);
font-size: 11px;
font-weight: 600;
letter-spacing: .06em;
text-transform: uppercase;
}
.guida-gruppo:first-of-type { margin-top: 10px; }
.guida-indice a {
display: block;
padding: 7px 10px;
border-radius: 8px;
color: var(--text-soft);
font-size: 13.5px;
text-decoration: none;
}
.guida-indice a:hover { background: var(--surface-soft); color: var(--text); }
.guida-indice a.is-active { background: var(--accent-soft); color: var(--text); font-weight: 600; }
/* Il testo si legge come un testo: una colonna stretta, respiro fra i
paragrafi, i titoli che si distinguono senza gridare. */
.guida-pagina { padding: 26px 30px; max-width: 74ch; }
.guida-pagina h1 { margin: 0 0 4px; font-size: 22px; font-weight: 600; }
.guida-quando { margin: 0 0 18px; color: var(--muted); font-size: 12.5px; }
.guida-pagina h2 { margin: 26px 0 8px; font-size: 17px; font-weight: 600; }
.guida-pagina p { margin: 0 0 12px; font-size: 14.5px; line-height: 1.7; }
/* Un manuale operativo è fatto di procedure, e una procedura è un
elenco numerato: senza queste due righe l'ordinato prendeva il
rientro di default del browser e non stava in colonna con il resto. */
.guida-pagina ul,
.guida-pagina ol { margin: 0 0 14px; padding-left: 20px; }
.guida-pagina ol ul,
.guida-pagina ol ol { margin-top: 6px; }
.guida-pagina li { margin-bottom: 6px; font-size: 14.5px; line-height: 1.65; }
.guida-pagina h3 { margin: 20px 0 6px; font-size: 15px; font-weight: 600; }
/* Le tabelle dei campi: scorrono da sole invece di allargare la pagina
e mandare in orizzontale tutto il testo intorno. */
.guida-pagina table { display: block; overflow-x: auto; margin: 0 0 16px; font-size: 14px; }
.guida-pagina th,
.guida-pagina td { padding: 7px 10px; text-align: left; vertical-align: top;
border-bottom: 1px solid var(--border); }
.guida-pagina th { font-weight: 600; white-space: nowrap; }
.guida-pagina hr { margin: 24px 0; border: 0; border-top: 1px solid var(--border); }
.guida-pagina strong { font-weight: 600; }
.guida-pagina code { padding: 1px 5px; background: var(--surface-soft); border-radius: 4px; font-size: 13px; }
.guida-chiedi { padding: 18px 22px; margin-top: 18px; }
.guida-chiedi label { display: block; margin-bottom: 8px; font-size: 13px; font-weight: 600; }
.guida-chiedi .riga { display: flex; gap: 8px; }
.guida-chiedi .riga .input { flex: 1; min-width: 0; }
.guida-chiedi .riga .button { min-width: 108px; }
.guida-risposta {
margin-top: 14px;
padding: 14px 16px;
background: var(--surface-soft);
border-left: 3px solid var(--accent);
border-radius: 8px;
font-size: 14px;
line-height: 1.65;
white-space: pre-wrap;
}
.guida-rimandi { margin: 10px 0 0; font-size: 13px; }
@media (max-width: 900px) {
.guida { grid-template-columns: 1fr; }
.guida-indice { position: static; }
}
/* ── Le carte per scegliere ──────────────────────────────────────────
Una domanda alla volta, con le risposte come carte da premere: si
usano all'apertura di un corso e al caricamento di un accordo. Erano
scritte dentro una pagina sola, e la seconda che ne ha avuto bisogno
avrebbe dovuto copiarle. */
.avvio { max-width: 900px; }
.avvio-domanda {
padding: 22px;
margin-bottom: 16px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
}
.avvio-testa { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 18px; }
.avvio-numero {
width: 30px;
height: 30px;
display: grid;
place-items: center;
flex: 0 0 30px;
color: #fff;
background: var(--accent);
border-radius: 50%;
font-size: 14px;
font-weight: 600;
}
.avvio-testa h2 { margin: 2px 0 4px; font-size: 18px; }
.avvio-testa p { margin: 0; color: var(--muted); font-size: 13px; }
.avvio-scelte {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
gap: 12px;
}
.avvio-scelta { display: block; cursor: pointer; }
.avvio-scelta { position: relative; }
.avvio-scelta input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; pointer-events: none; }
.avvio-carta {
display: grid;
gap: 5px;
height: 100%;
padding: 18px 16px;
background: var(--surface-soft);
border: 1px solid var(--border);
border-radius: var(--radius);
transition: border-color .12s ease, background-color .12s ease;
}
.avvio-carta i { color: var(--muted); font-size: 24px; }
.avvio-carta strong { font-size: 14.5px; }
.avvio-carta em { color: var(--muted); font-size: 12px; font-style: normal; line-height: 1.5; }
.avvio-scelta:hover .avvio-carta { border-color: var(--border-strong); background: var(--surface); }
/* La scelta fatta si vede: senza, si arriva in fondo senza
sapere piu' cosa si era risposto. */
.avvio-scelta input:checked + .avvio-carta {
background: var(--accent-soft);
border-color: var(--accent);
}
.avvio-scelta input:checked + .avvio-carta i,
.avvio-scelta input:checked + .avvio-carta strong { color: var(--accent-text); }
.avvio-scelta input:focus-visible + .avvio-carta {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
.avvio-foot { display: flex; justify-content: space-between; gap: 12px; }
/* La porta chiusa dell'area allievo: non un errore, una spiegazione. */
.area-sospesa { padding: 44px 28px; text-align: center; max-width: 62ch; margin: 0 auto; }
.area-sospesa > i { font-size: 40px; color: var(--orange); }
.area-sospesa h2 { margin: 14px 0 10px; font-size: 19px; }
.area-sospesa p { margin: 0 0 12px; font-size: 14px; color: var(--text-soft); }
.area-sospesa p strong { color: var(--text); }
.area-sospesa-nota { font-size: 12.5px; }
.area-sospesa form { margin-top: 18px; }
/* ── Accesso negato, raccontato ──────────────────────────────────────
Un «403 Forbidden» dice due cose che non servono — un numero e una
parola inglese — e nessuna di quelle che servono: cosa stavi aprendo,
perche' e' chiuso, chi te lo apre. Chi lo vede pensa di aver rotto
qualcosa, e la telefonata comincia con «mi dà errore».
Quindi niente rosso e niente icona d'allarme: questa non e' una cosa
andata storta, e' una porta che non e' tua. */
.negato { padding: 40px 32px; max-width: 68ch; margin: 0 auto; }
/* La testa è centrata, il resto no: quello che sta sotto sono dati da
leggere riga per riga, e il testo centrato si legge peggio. */
.negato-testa { text-align: center; margin-bottom: 22px; }
.negato-testa > i { font-size: 42px; color: var(--text-soft); }
.negato h2 { margin: 10px 0 6px; font-size: 20px; letter-spacing: .02em; }
.negato-calma { margin: 0; font-size: 14.5px; color: var(--text-soft); }
.negato-fatti {
margin: 0 0 18px;
padding: 14px 16px;
border: 1px solid var(--border);
border-radius: 10px;
background: var(--surface-soft);
}
.negato-fatti > div { display: flex; flex-wrap: wrap; gap: 8px; padding: 3px 0; }
.negato-fatti dt { min-width: 122px; font-size: 12px; color: var(--text-soft); }
.negato-fatti dd { margin: 0; font-size: 13.5px; }
.negato-fatti code { font-size: 12.5px; word-break: break-all; }
.negato-perche {
display: flex;
gap: 9px;
align-items: flex-start;
margin: 0 0 18px;
padding: 12px 14px;
border-radius: 9px;
background: var(--accent-soft);
font-size: 13.5px;
}
.negato-perche > i { color: var(--accent); flex: none; font-size: 17px; }
.negato-perche.is-tiepido { background: var(--orange-background); }
.negato-perche.is-tiepido > i { color: var(--orange); }
.negato-chi { margin: 0 0 22px; font-size: 13.5px; }
.negato-chi ul { margin: 7px 0 0; padding-left: 18px; line-height: 1.7; }
/* Nella pagina «non trovato» l'elenco sono tre spiegazioni, non tre
nomi: ognuna ha una riga in grassetto e una che la spiega, e
serve aria fra l'una e l'altra. */
.negato-chi li > strong { display: block; color: var(--text); }
.negato-chi li + li { margin-top: 7px; }
.negato-nota { margin: 9px 0 0; font-size: 12.5px; color: var(--text-soft); }
/* Un testo, non un pulsante.
Non è l'azione della pagina: la pagina non ha un'azione, dice una cosa
e basta. Un pulsante pieno al centro sembrerebbe la cosa da fare,
mentre quella da fare — scrivere a chi può aprirti — sta più su. */
.negato-vie { text-align: center; margin-top: 4px; }
.negato-vie a {
font-size: 13.5px;
color: var(--text-soft);
text-decoration: underline;
text-underline-offset: 3px;
}
.negato-vie a:hover { color: var(--text); }
/* ── Sto leggendo i contratti ────────────────────────────────────────
Un'attesa muta di due minuti non si distingue da una pagina bloccata,
e chi guarda ricarica — che qui vorrebbe dire ricominciare da capo.
Quindi si dice a che punto siamo, con un numero e una barra. */
.lettura-in-corso { padding: 44px 32px; max-width: 56ch; margin: 0 auto; text-align: center; }
.lettura-in-corso > i { font-size: 40px; color: var(--accent); }
.lettura-in-corso h2 { margin: 12px 0 8px; font-size: 19px; }
.lettura-in-corso p { margin: 0 0 18px; font-size: 14px; color: var(--text-soft); }
.lettura-in-corso .muted { margin: 14px 0 0; }
.lettura-barra {
height: 8px;
border-radius: 999px;
background: var(--grey-background);
overflow: hidden;
}
.lettura-barra > span {
display: block;
height: 100%;
border-radius: 999px;
background: var(--accent);
transition: width .3s ease;
}
/* ── Il nome della stanza su Zoom ────────────────────────────────────
Sta in mezzo a dati che si leggono e basta: il campo deve dire di
essere un campo, senza diventare l'azione principale della scheda. */
.rinomina-stanza { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border); }
.rinomina-stanza > label { display: block; margin-bottom: 6px; font-size: 12.5px; color: var(--text-soft); }
.rinomina-riga { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.rinomina-riga input {
flex: 1 1 320px;
min-width: 0;
padding: 8px 11px;
border: 1px solid var(--border-strong);
border-radius: 8px;
font-size: 14px;
font-family: inherit;
background: var(--surface);
color: var(--text);
}
.rinomina-riga input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.rinomina-stanza .field-hint { display: block; margin-top: 6px; }
/* ── Rifare il calendario da zero ────────────────────────────────────
Sta sotto l'avviso di «hai già un calendario» perché è la risposta a
quell'avviso: non un'azione qualsiasi della pagina, e nemmeno la
principale. */
.svuota-calendario {
display: flex;
flex-wrap: wrap;
gap: 16px;
align-items: center;
justify-content: space-between;
padding: 18px 22px;
margin-bottom: 18px;
}
.svuota-calendario > div { flex: 1 1 380px; min-width: 0; }
.svuota-calendario strong { font-size: 15px; }
.svuota-calendario p { margin: 6px 0 0; font-size: 13.5px; color: var(--text-soft); }
.svuota-calendario form { flex: none; }
/* ── La conferma prima di annullare una lezione ──────────────────────
Parte un'email a otto persone: chi preme deve vedere prima quante
sono. Il riquadro è volutamente stretto — si legge in tre secondi,
che è il tempo che uno gli dà. */
.conferma-annullo {
max-width: 30rem;
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: 24px;
background: var(--surface);
color: var(--text);
}
.conferma-annullo::backdrop { background: rgba(15, 23, 35, .45); }
.conferma-annullo h3 { margin: 0 0 10px; font-size: 17px; }
.conferma-annullo p { margin: 0 0 12px; font-size: 14px; color: var(--text-soft); }
.conferma-chi {
margin: 0 0 16px;
padding: 10px 14px;
list-style: none;
border-radius: 9px;
background: var(--surface-soft);
font-size: 13.5px;
max-height: 11rem;
overflow-y: auto;
}
.conferma-chi li + li { margin-top: 4px; }
.conferma-nessuno {
display: flex;
gap: 8px;
align-items: flex-start;
padding: 10px 12px;
border-radius: 9px;
background: var(--orange-background);
color: var(--orange);
}
.conferma-azioni { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; }
/* ── Messaggi al telefono: il pannello ───────────────────────────────
I campi delle due piattaforme non convivono: si mostra quello scelto,
perché vederli tutti insieme fa sembrare che servano tutti. */
.stato-messaggi { padding: 4px 24px 22px; display: flex; flex-direction: column; gap: 10px; }
.campi-messaggi {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 16px;
padding: 4px 24px 22px;
}
.campi-messaggi .field-full { grid-column: 1 / -1; }
.errore-scorso {
margin: 0;
padding: 12px 14px;
border-radius: 9px;
background: var(--red-background);
color: var(--red);
font-size: 12.5px;
white-space: pre-wrap;
overflow-x: auto;
}
.prova-messaggio {
display: flex;
flex-wrap: wrap;
gap: 10px;
padding: 4px 24px 8px;
}
.prova-messaggio .input { flex: 1 1 220px; min-width: 0; }
/* ── L'elenco dei messaggi ───────────────────────────────────────────
A sinistra cosa è e quando parte, a destra dove mandarlo: le due cose
si leggono insieme, altrimenti si incolla un indirizzo nella riga
sbagliata. */
.elenco-messaggi { display: flex; flex-direction: column; padding: 4px 24px 18px; }
.messaggio-riga {
display: grid;
grid-template-columns: minmax(240px, 1fr) minmax(260px, 1fr);
gap: 18px;
padding: 16px 0;
align-items: start;
}
.messaggio-riga + .messaggio-riga { border-top: 1px solid var(--border); }
.messaggio-chi .field-hint { margin-top: 8px; }
.messaggio-chi code { font-size: 12px; }
.messaggio-dove .field + .field { margin-top: 10px; }
.field-hint.is-tiepido { color: var(--orange); }
@media (max-width: 720px) {
.messaggio-riga { grid-template-columns: 1fr; }
}
/* ── Scegliere chi convocare ─────────────────────────────────────────
La spunta sta col nome: separarli vorrebbe dire contare le righe per
capire quale casella è di chi. */
.convocati-scelta { display: inline-flex; align-items: center; gap: 9px; cursor: pointer; }
.convocati-scelta input { flex: none; }
.convocati-azioni {
display: flex;
flex-wrap: wrap;
gap: 12px;
align-items: center;
padding: 6px 24px 20px;
}
.convocati-azioni .field-hint { flex: 1 1 260px; margin: 0; }
/* ── La conferma dell'annullamento, chiesta dal server ───────────────
Non è un riquadro sopra la pagina: è la pagina. Chi ci arriva ha già
premuto una volta, e deve poter tornare indietro senza cercare. */
.conferma-pagina { padding: 26px 28px; max-width: 60ch; }
.conferma-fatto {
display: flex;
gap: 12px;
align-items: flex-start;
padding-bottom: 16px;
margin-bottom: 16px;
border-bottom: 1px solid var(--border);
}
.conferma-fatto > i { font-size: 26px; color: var(--red); flex: none; }
.conferma-fatto strong { font-size: 16px; }
.conferma-fatto p { margin: 4px 0 0; font-size: 14px; color: var(--text-soft); }
.conferma-pagina .conferma-chi { margin-bottom: 18px; }
.conferma-pagina .conferma-azioni { margin-top: 18px; }
/* ————— L'area dell'allievo: elenchi lunghi e dita sul vetro ————— */
/* Le schede sopra un elenco dentro una scheda, allineate alle righe. */
/* Sotto la riga di confine della testata serve aria: le schede
attaccate al filo sembravano parte dell'intestazione. */
.lezioni-filtro { margin: 18px 24px 16px; }
/*
* La scheda del corso non e' piu' un collegamento unico.
*
* Dentro un non ci puo' stare un altro , e li' dentro serve il
* pulsante per entrare in aula: spostate le lezioni sotto, «Entra»
* finirebbe sotto la piega proprio nei cinque minuti in cui si apre
* l'area. Il collegamento del titolo si allarga a coprire il riquadro,
* cosi' resta cliccabile tutto com'era.
*/
.corso-mio { position: relative; }
.corso-mio .corso-nome { color: inherit; text-decoration: none; }
.corso-mio .corso-nome::after { content: ""; position: absolute; inset: 0; border-radius: 10px; }
/*
* «Entra nel corso» e' un'insegna, non un secondo comando.
*
* Porta dove porta gia' il riquadro: tenerlo sopra il collegamento —
* con z-index — vorrebbe dire un pulsante che si preme e non fa
* niente, perche' e' uno . Sta sotto, e il clic lo prende il
* riquadro.
*/
.corso-mio .entra { margin-left: auto; pointer-events: none; }
/* La riga di oggi si riconosce da lontano, senza leggere l'etichetta. */
.lezioni-mie li.is-oggi-mia { background: var(--accent-soft); box-shadow: inset 3px 0 0 var(--accent); }
/*
* I materiali sotto la loro lezione.
*
* Erano un elenco unico in ordine di data: la registrazione di un
* giorno e le slide dello stesso giorno finivano vicine per caso.
*/
.materiali-per-lezione { display: grid; }
.lezione-materiali + .lezione-materiali { border-top: 1px solid var(--border); }
.lezione-materiali-testa {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 4px 10px;
padding: 14px 24px 2px;
}
.lezione-materiali-testa strong { font-size: 13.5px; font-weight: 600; }
/* Dentro il gruppo le righe non ripetono il bordo del gruppo. */
.lezione-materiali .materiali-miei li:first-child { border-top: 0; }
/*
* Sotto le dita, non sotto un mouse.
*
* Quest'area si apre dal telefono in corridoio, in piedi, trenta
* secondi prima di entrare: un bersaglio da 28 pixel si manca.
*/
@media (max-width: 720px) {
.worklist-tab,
.pager .button,
.lezioni-mie .lezione-collegamento,
.materiali-miei .button-small {
min-height: 44px;
display: inline-flex;
align-items: center;
}
.lezioni-filtro { display: flex; margin: 14px 16px 12px; }
.lezioni-filtro .worklist-tab { flex: 1; justify-content: center; text-align: center; }
.lezione-materiali-testa { padding: 14px 16px 2px; }
}
/*
* Gli attestati, su telefono, diventano riquadri.
*
* Quattro colonne in 360 pixel fanno una tabella che si scorre di lato.
* L'etichetta di ogni cella arriva da «data-voce».
*
* Le rate avevano gia' il loro trattamento, poco piu' su, a 560px: una
* griglia con l'importo a destra. Ci avevo aggiunto queste stesse regole
* e le due si pestavano i piedi — le celle finivano a due a due su una
* riga, con le etichette in mezzo. Quando una cosa e' gia' risolta, la
* seconda soluzione e' il problema.
*/
@media (max-width: 620px) {
.table-wrap:has(.attestati-miei) { overflow-x: visible; }
.attestati-miei thead {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
overflow: hidden;
clip-path: inset(50%);
}
.attestati-miei, .attestati-miei tbody, .attestati-miei tr, .attestati-miei td {
display: block;
width: auto;
}
.attestati-miei tr {
padding: 12px 14px;
border: 1px solid var(--border);
border-radius: 10px;
}
.attestati-miei tr + tr { margin-top: 10px; }
.attestati-miei tr:hover { background: none; }
.attestati-miei td {
display: flex;
gap: 14px;
align-items: baseline;
justify-content: space-between;
padding: 4px 0;
border: 0;
text-align: right;
}
.attestati-miei td::before {
content: attr(data-voce);
flex: none;
color: var(--muted);
font-size: 12px;
text-align: left;
}
}
/* ————— Il supporto a ticket ————— */
/*
* L'elenco delle richieste.
*
* Una riga per richiesta: cosa chiede e a che punto e'. Il numero e
* l'area stanno sotto, piccoli: servono quando si telefona, non quando
* si scorre.
*/
.ticket-elenco { list-style: none; margin: 0; padding: 0; }
.ticket-elenco li + li { border-top: 1px solid var(--border); }
.ticket-riga {
display: flex;
gap: 14px;
align-items: center;
justify-content: space-between;
padding: 14px 24px;
color: inherit;
text-decoration: none;
}
.ticket-riga:hover { background: var(--surface-soft); }
.ticket-elenco li:nth-child(even) .ticket-riga { background: var(--riga-alterna); }
.ticket-elenco li:nth-child(even) .ticket-riga:hover { background: var(--grey-background); }
.ticket-chi { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ticket-chi strong { font-size: 14px; font-weight: 500; }
/* I campi di una richiesta nuova, uno sotto l'altro: sono quattro e la
fretta di chi scrive non merita due colonne. */
.ticket-campi { display: grid; gap: 18px; }
/* Un campo e il suo comando sulla stessa riga: «sposta in quest'area»
e' una frase sola, e spezzarla su due righe la fa sembrare due cose. */
.input-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.input-row .select { flex: 1 1 220px; }
/*
* La conversazione.
*
* I messaggi nostri da una parte, i suoi dall'altra: si capisce chi ha
* parlato senza leggere il nome. Le note interne hanno il fondo giallo
* e lo dicono — perche' chi scrive deve sapere che quella riga l'altro
* non la vedra' mai.
*/
.ticket-conversazione { display: grid; gap: 14px; padding: 20px 24px; }
.ticket-messaggio {
max-width: 80%;
padding: 12px 14px;
border: 1px solid var(--border);
border-radius: 12px;
background: var(--surface);
}
/* Chi guarda la pagina sta a destra.
Prima le due classi si chiamavano «suo» e «nostro», e dicevano il
reparto invece della posizione: dalla pagina dell'allievo i suoi
messaggi finivano a sinistra e quelli di Punto Net a destra, cioe'
l'opposto di ogni applicazione di messaggi che ha in mano. */
.ticket-messaggio.e-sinistra { justify-self: start; border-bottom-left-radius: 4px; }
.ticket-messaggio.e-destra {
justify-self: end;
border-bottom-right-radius: 4px;
background: var(--accent-soft);
border-color: var(--accent-soft);
}
.ticket-messaggio.e-interno {
justify-self: stretch;
max-width: none;
background: var(--orange-background);
border-color: var(--orange-background);
}
.ticket-messaggio-chi {
display: flex;
flex-wrap: wrap;
gap: 8px;
align-items: baseline;
margin-bottom: 5px;
font-size: 12px;
color: var(--text-soft);
}
.ticket-messaggio-chi strong { font-weight: 500; color: var(--text); }
.ticket-messaggio p { margin: 0; font-size: 13.5px; line-height: 1.6; white-space: pre-wrap; }
.ticket-allegati { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.ticket-allegato {
display: inline-flex;
gap: 6px;
align-items: center;
padding: 5px 9px;
border: 1px solid var(--border-strong);
border-radius: 8px;
background: var(--surface);
color: var(--text-soft);
font-size: 12px;
text-decoration: none;
}
.ticket-allegato:hover { border-color: var(--accent); color: var(--accent-text); }
/* Le schede rapide in cima alla coda: quante ne aspettano per area. */
.ticket-schede { display: flex; flex-wrap: wrap; gap: 10px; padding: 4px 24px 18px; }
.ticket-scheda {
flex: 1 1 180px;
padding: 13px 15px;
border: 1px solid var(--border);
border-radius: 12px;
background: var(--surface);
color: inherit;
text-decoration: none;
}
.ticket-scheda:hover { border-color: var(--accent); background: var(--accent-soft); }
.ticket-scheda.e-scelta { border-color: var(--accent); background: var(--accent-soft); }
.ticket-scheda strong { display: block; font-size: 22px; font-weight: 600; }
.ticket-scheda span { display: block; font-size: 12.5px; color: var(--text-soft); }
.ticket-scheda .urgenti { color: var(--red); font-weight: 500; }
/* Il motivo dell'urgenza, dentro la scheda della richiesta.
E' l'unica cosa che chi risponde non puo' ricostruire da solo, e
decide se risponde adesso o dopo pranzo: non puo' uscire grigio
piccolo come i metadati che ha accanto. */
.ticket-urgenza {
display: flex;
align-items: center;
gap: 8px;
margin: 10px 0 0;
padding: 8px 11px;
border-radius: 8px;
color: var(--red);
background: var(--red-background);
font-size: 13px;
font-weight: 500;
max-width: 60ch;
}
/* Si marca la riga, non una parola in mezzo al titolo: su venti righe
alternate un distintivo da 11,5 px non emerge. */
.ticket-riga.e-urgente { border-left: 3px solid var(--red); padding-left: 21px; }
.ticket-perche { font-size: 12.5px; font-weight: 500; color: var(--red); }
@media (max-width: 620px) {
/* Senza «wrap», i metadati vanno a capo quattro volte mentre il
distintivo resta ancorato a destra e schiaccia il titolo. */
.ticket-riga { padding: 14px 16px; flex-wrap: wrap; align-items: flex-start; }
.ticket-riga.e-urgente { padding-left: 13px; }
.ticket-schede { padding: 4px 16px 14px; }
.ticket-conversazione { padding: 16px; }
.ticket-messaggio { max-width: 92%; }
}
/*
* Le aree del supporto.
*
* Si modificano in riga: sono tre o quattro, e aprire una schermata a
* parte per cambiare una parola e' un giro che non serve. Il nome e la
* descrizione stanno uno sopra l'altro perche' il nome e' quello che
* legge chi apre una richiesta e la descrizione e' la riga che lo
* aiuta a scegliere: vederli insieme e' vedere quello che vede lui.
*/
.aree-supporto .area-riga {
display: grid;
gap: 6px;
max-width: 380px;
}
.aree-supporto .area-riga input[name="name"] { font-weight: 600; }
.aree-supporto .area-riga input,
.aree-supporto select {
width: 100%;
padding: 7px 10px;
border: 1px solid var(--border);
border-radius: 8px;
background: var(--surface);
color: inherit;
font-size: 14px;
}
.aree-supporto select { max-width: 220px; }
.aree-supporto .area-comandi {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 8px;
}
/* Spenta non vuol dire sparita: si legge ancora, ma si vede che non e'
in uso. */
.aree-supporto .area-spenta > td { opacity: 0.6; }
@media (max-width: 760px) {
.aree-supporto .area-riga,
.aree-supporto select { max-width: none; }
.aree-supporto .area-comandi { justify-content: flex-start; }
}
/*
* Le richieste d'accesso di chi arriva da fuori.
*
* Non e' una tabella: ogni riga porta un messaggio scritto a mano, un
* corso che spesso in Paideaxis non esiste e due decisioni da prendere.
* In colonne strette diventerebbe illeggibile proprio dove serve
* leggere — «l'ho fatto a Salerno nel 2024, la docente era Santolini»
* e' l'unica cosa che permette di ritrovare quella persona.
*/
.accessi-elenco { list-style: none; margin: 0; padding: 0; }
.accessi-elenco li + li { border-top: 1px solid var(--border); }
.accesso-riga {
display: flex;
gap: 18px;
align-items: flex-start;
justify-content: space-between;
padding: 16px 24px;
}
.accessi-elenco li:nth-child(even) .accesso-riga { background: var(--riga-alterna); }
.accesso-chi { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.accesso-chi strong { font-size: 14.5px; font-weight: 500; }
.accesso-chi a { color: inherit; }
.accesso-corso {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 12.5px;
color: var(--text-soft);
}
.accesso-corso em { color: var(--muted); font-style: normal; }
/* Quello che ha scritto lui, riportato com'e': gli a capo li ha messi
per dire qualcosa, e schiacciarli su una riga sola toglie il senso. */
.accesso-messaggio {
margin: 4px 0 0;
padding: 9px 11px;
max-width: 70ch;
border-radius: 9px;
background: var(--surface-soft);
font-size: 13px;
line-height: 1.55;
white-space: pre-wrap;
}
.accesso-comandi {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 8px;
flex-shrink: 0;
}
/* Chiuso, il rifiuto e' una parola. Aperto, e' un campo di testo — e se
ogni riga ne avesse uno aperto, la pagina sembrerebbe fatta per dire
di no. */
.accesso-rifiuto > summary {
display: inline-block;
padding: 4px 2px;
color: var(--muted);
font-size: 12.5px;
cursor: pointer;
list-style: none;
}
.accesso-rifiuto > summary::-webkit-details-marker { display: none; }
.accesso-rifiuto > summary:hover { color: var(--red); }
.accesso-rifiuto form {
display: grid;
gap: 8px;
justify-items: stretch;
width: min(340px, 70vw);
margin-top: 6px;
padding: 12px;
border: 1px solid var(--border);
border-radius: 10px;
background: var(--surface);
text-align: left;
}
.accesso-rifiuto label { font-size: 12.5px; color: var(--text-soft); }
.accesso-rifiuto textarea {
width: 100%;
padding: 8px 10px;
border: 1px solid var(--border);
border-radius: 8px;
background: var(--surface);
color: inherit;
font: inherit;
font-size: 13px;
resize: vertical;
}
@media (max-width: 760px) {
.accesso-riga { flex-direction: column; padding: 14px 16px; }
.accesso-comandi { align-items: flex-start; flex-direction: row; flex-wrap: wrap; }
.accesso-rifiuto form { width: 100%; }
}
/*
* La prova a vuoto, e le email da smistare.
*
* La prova sta accanto all'interruttore di proposito: accendere un
* meccanismo che legge la posta senza avere davanti quello che ne esce
* e' la ragione per cui questi meccanismi fanno paura.
*/
.prova-a-vuoto {
margin: 0 24px 22px;
padding: 16px 18px;
border: 1px dashed var(--border);
border-radius: 12px;
background: var(--surface-soft);
}
.prova-a-vuoto form { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.prova-a-vuoto .help { max-width: 62ch; }
.prova-esito { margin-top: 14px; }
.prova-esito p { margin: 0 0 8px; font-size: 13.5px; }
.prova-esito ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 7px; }
.prova-esito li {
display: flex;
align-items: baseline;
flex-wrap: wrap;
gap: 8px;
padding: 8px 10px;
border-radius: 8px;
background: var(--surface);
font-size: 13px;
}
.smistare-elenco { list-style: none; margin: 0; padding: 0; }
.smistare-elenco li { padding: 16px 24px; }
.smistare-elenco li + li { border-top: 1px solid var(--border); }
.smistare-elenco li:nth-child(even) { background: var(--riga-alterna); }
/* L'email a sinistra, cosa farne a destra.
Prima i due pulsanti stavano in cima a destra, lontani dal testo che
dovevano riguardare, e sotto restava mezza pagina vuota: lo spazio
c'era, ma non diceva niente. */
.smistare-elenco li {
display: grid;
grid-template-columns: minmax(0, 1fr) 260px;
gap: 24px;
align-items: start;
}
.smistare-email { min-width: 0; }
.smistare-email > strong { display: block; font-size: 14.5px; font-weight: 500; }
.smistare-email > .muted { display: block; margin-top: 2px; }
.smistare-azioni { display: grid; gap: 4px; justify-items: start; }
.smistare-azioni .help { margin: 0 0 10px; }
.smistare-azioni form { width: 100%; }
/* Il testo com'e' arrivato: e' l'unica cosa che permette di capire chi
ha scritto quando l'indirizzo non ce lo dice.
La riga a sinistra invece del riquadro: un bordo su quattro lati lo
faceva sembrare un pezzo di programma, e quello e' l'italiano di una
persona. */
.smistare-testo {
margin: 10px 0 0;
padding: 2px 0 2px 14px;
max-width: 78ch;
border-left: 3px solid var(--border);
color: var(--text-soft);
font-size: 13px;
line-height: 1.6;
white-space: pre-wrap;
}
/* Il resto dell'email dietro a un clic: una lunga, aperta, spinge in
fondo alla pagina le altre cinque che aspettano. */
.smistare-tutto > summary {
display: inline-block;
margin-top: 8px;
padding: 2px 0;
color: var(--accent-text, var(--text-soft));
font-size: 12.5px;
cursor: pointer;
list-style: none;
text-decoration: underline;
text-underline-offset: 3px;
}
.smistare-tutto > summary::-webkit-details-marker { display: none; }
.smistare-tutto[open] > summary { display: none; }
@media (max-width: 760px) {
.prova-a-vuoto { margin: 0 16px 18px; }
.smistare-elenco li { padding: 14px 16px; grid-template-columns: 1fr; gap: 14px; }
.smistare-azioni { justify-items: stretch; }
}
/* Un comando che non pesa: segna una riga, non manda niente a nessuno.
Accanto a un pulsante pieno, due pulsanti uguali farebbero sembrare i
due gesti della stessa portata. */
.bottone-scarno {
padding: 6px 4px;
border: 0;
background: none;
color: var(--muted);
font: inherit;
font-size: 13px;
cursor: pointer;
text-decoration: underline;
text-underline-offset: 3px;
}
.bottone-scarno:hover { color: var(--text); }
/* Le etichette sopra i campi di una riga di controlli. «.input-row» non
ne aveva nessuna: l'etichetta e la tendina finivano sulla stessa riga
come testo corrente, senza gerarchia. */
.input-row label { display: flex; flex-direction: column; gap: 6px; flex: 1 1 220px; }
.input-row label > span {
color: var(--text-soft);
font-size: 12px;
font-weight: 500;
}
.prova-a-vuoto .help { max-width: 68ch; margin: 0 0 12px; }
.prova-comandi { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
/*
* Le regole «indirizzo → area».
*
* Si leggono come frasi, non come tabella: «le email scritte a
* contabilita@ → Amministrazione». Una tabella a tre colonne direbbe
* la stessa cosa costringendo a rileggere l'intestazione ogni volta.
*/
.regole-elenco { list-style: none; margin: 0; padding: 0 24px; }
.regole-elenco li {
display: flex;
align-items: center;
gap: 14px;
padding: 12px 0;
}
.regole-elenco li + li { border-top: 1px solid var(--border); }
.regola-cosa { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.regola-cosa strong { font-size: 14px; font-weight: 500; }
.regola-freccia { color: var(--muted); font-size: 18px; flex-shrink: 0; }
.regola-area { flex-shrink: 0; }
.regola-comandi { display: flex; gap: 12px; flex-shrink: 0; margin-left: auto; }
/* Spenta non vuol dire sparita: si legge ancora, ma si vede che non
sta facendo niente. */
.regole-elenco .regola-spenta { opacity: 0.55; }
.regole-nota { padding: 0 24px; margin: 4px 0 18px; }
@media (max-width: 760px) {
.regole-elenco { padding: 0 16px; }
.regole-elenco li { flex-wrap: wrap; gap: 8px; }
.regola-freccia { display: none; }
.regola-comandi { margin-left: 0; width: 100%; }
.regole-nota { padding: 0 16px; }
}
/* Da dove e' arrivata una richiesta nata da un'email, e perche' e'
finita in quest'area: le due cose che servono per decidere se
spostarla. */
.ticket-provenienza {
display: flex;
align-items: baseline;
gap: 8px;
margin: 8px 0 0;
max-width: 70ch;
color: var(--text-soft);
font-size: 12.5px;
line-height: 1.5;
}
/* La priorita', messa da chi risponde.
Sta fra il distintivo dello stato e «Ci penso io» perche' sono le tre
cose che si fanno guardando la richiesta dall'alto, prima di leggerla. */
.ticket-priorita {
display: flex;
align-items: center;
gap: 7px;
}
.ticket-priorita label { color: var(--text-soft); font-size: 12px; font-weight: 500; }
.ticket-priorita .select { min-width: 96px; padding-top: 5px; padding-bottom: 5px; font-size: 13px; }
/* Il corso: e' la prima cosa che chiede chi risponde al telefono, e
finora stava in mezzo a cinque frammenti grigi separati da «·». */
.ticket-corso-riga {
display: flex;
align-items: baseline;
gap: 8px;
margin: 8px 0 0;
max-width: 70ch;
font-size: 13px;
line-height: 1.5;
color: var(--text);
}
.ticket-corso-riga i { color: var(--muted); }
/* Nella coda non serve un riquadro: basta che non sia grigio come il
resto della riga. */
.ticket-corso { color: var(--text-soft); font-weight: 500; }
@media (max-width: 620px) {
.ticket-priorita label { display: none; }
}
/* Cosa ha imparato lo smistamento: si legge come le regole, perche' e'
la stessa cosa detta da un esempio invece che da un indirizzo. */
.imparate-elenco { list-style: none; margin: 0; padding: 0 24px; }
.imparate-elenco li {
display: flex;
align-items: center;
gap: 14px;
padding: 12px 0;
}
.imparate-elenco li + li { border-top: 1px solid var(--border); }
.imparata-cosa { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1 1 auto; }
.imparata-cosa strong { font-size: 14px; font-weight: 500; }
.imparata-nota { font-size: 12.5px; color: var(--text-soft); }
/* Fuori dalle ultime quaranta: resta leggibile, ma si vede che non
conta piu'. */
.imparate-elenco .non-rilegge { opacity: 0.5; }
@media (max-width: 760px) {
.imparate-elenco { padding: 0 16px; }
.imparate-elenco li { flex-wrap: wrap; gap: 8px; }
.imparate-elenco .regola-comandi { margin-left: 0; width: 100%; }
}