* { box-sizing: border-box; }
html { background: var(--ruolo-sfondo); }
body { margin: 0; background: var(--ruolo-sfondo); color: var(--ruolo-testo); font-size: 16px; }
a { color: inherit; text-decoration-color: var(--ruolo-filetto-forte); text-underline-offset: 0.2em; }
a:hover { text-decoration-color: var(--ruolo-accento); }
.contenitore { max-width: 1180px; margin: 0 auto; padding: 0 24px; }
.testata { border-bottom: 1px solid var(--ruolo-filetto); }
.testata-barra { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; }
.logo { height: 22px; display: block; }
.logo[data-del-tema] { display: none; }
.interruttore {
display: inline-flex; border: 1px solid var(--ruolo-filetto-forte); border-radius: 999px; padding: 2px;
}
.interruttore button {
background: none; border: 0; border-radius: 999px; padding: 6px 12px; cursor: pointer;
color: var(--ruolo-secondario); font: inherit; font-size: 12px;
}
.interruttore button[aria-pressed="true"] { background: var(--ruolo-superficie); color: var(--ruolo-inchiostro); }
.etichetta { font-size: 12px; margin: 0 0 12px; display: flex; align-items: center; gap: 10px; }
.led {
width: 7px; height: 7px; border-radius: 50%; background: var(--ruolo-accento);
box-shadow: 0 0 0 4px var(--ruolo-velo-accento); flex: none;
}
.copertina { padding: 56px 24px 32px; }
.copertina h1 { font-size: clamp(44px, 7vw, 88px); margin: 0 0 24px; }
.copertina h1 .riga { display: block; }
.punto { color: var(--ruolo-accento); }
.sotto { max-width: 760px; margin: 0 0 8px; color: var(--ruolo-secondario); }
.dati-campagna, .slot-meta { display: flex; flex-wrap: wrap; padding: 0; list-style: none; }
.dati-campagna { gap: 8px 24px; margin: 24px 0 0; font-size: 13px; }
.dati-campagna b, .slot-meta b { color: var(--ruolo-meta); margin-right: 8px; }
.conteggi { display: flex; flex-wrap: wrap; gap: 8px; margin: 24px 0 0; padding: 0; list-style: none; }
.conteggi li {
border: 1px solid var(--ruolo-filetto-forte); border-radius: 999px; padding: 4px 12px; font-size: 12px;
display: inline-flex; gap: 8px; align-items: center; color: var(--ruolo-secondario);
}
.conteggi b { color: var(--ruolo-inchiostro); }
.prossimo { margin: 16px 0 0; font-size: 13px; }
.sezione { border-top: 1px solid var(--ruolo-filetto); padding: 40px 0; }
.sezione h2 { font-size: clamp(32px, 4vw, 48px); margin: 0 0 24px; }
.avvisi, .controlli { margin: 0; padding: 0; list-style: none; }
.avvisi li, .controlli li { padding: 8px 0; border-bottom: 1px solid var(--ruolo-filetto); font-size: 13px; }
.gravita { display: inline-block; min-width: 64px; color: var(--ruolo-meta); }
.gravita-errore { color: var(--ruolo-accento); }
.dove { color: var(--ruolo-meta); margin-left: 8px; }
.calendario-scorre { overflow-x: auto; }
.calendario { width: 100%; min-width: 720px; border-collapse: collapse; table-layout: fixed; }
.calendario th { text-align: left; font-size: 12px; padding: 0 8px 8px; }
.calendario td {
vertical-align: top; border: 1px solid var(--ruolo-filetto); padding: 8px; height: 112px;
background: var(--ruolo-superficie);
}
.calendario td.fuori { background: none; }
.calendario td.oggi { box-shadow: inset 0 0 0 1px var(--ruolo-accento); }
.calendario .giorno { font-size: 11px; display: block; margin-bottom: 6px; }
.calendario .oggi .giorno { color: var(--ruolo-accento); }
.chip {
display: block; text-decoration: none; border: 1px solid var(--ruolo-filetto-forte); border-radius: 6px;
padding: 4px 6px; margin-bottom: 4px; font-size: 11px; line-height: 1.35; background: var(--ruolo-sfondo);
}
.chip:hover { border-color: var(--ruolo-accento); }
.chip .stato { display: block; color: var(--ruolo-meta); }
.pallino {
display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 6px; vertical-align: 1px;
border: 1px solid var(--ruolo-secondario);
}
.pallino-in-revisione { background: var(--ruolo-accento); border-color: var(--ruolo-accento); }
.pallino-approvato { background: var(--ruolo-secondario); }
.pallino-pubblicato { background: var(--ruolo-inchiostro); border-color: var(--ruolo-inchiostro); }
.slot { border-top: 1px solid var(--ruolo-filetto); padding: 40px 0; }
.slot-testa { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 24px; }
.slot-testa h3 { font-size: clamp(28px, 3.4vw, 40px); margin: 0; }
.slot-meta { gap: 6px 18px; margin: 12px 0 0; font-size: 12px; }
.tema { margin: 12px 0 0; }
.stato-slot {
display: inline-flex; align-items: center; border: 1px solid var(--ruolo-filetto-forte); border-radius: 999px;
padding: 4px 12px; font-size: 12px; color: var(--ruolo-inchiostro);
}
.dettaglio { margin: 16px 0 0; font-size: 14px; color: var(--ruolo-secondario); }
.dettaglio p { margin: 4px 0; }
.attenzione { color: var(--ruolo-accento-forte); }
.colonne { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px); gap: 32px; margin-top: 24px; }
.colonne.senza-figure { grid-template-columns: minmax(0, 760px); }
@media (max-width: 900px) { .colonne { grid-template-columns: minmax(0, 1fr); } }
.foglio {
background: var(--ruolo-superficie); border: 1px solid var(--ruolo-filetto); border-radius: 10px;
padding: 20px 22px;
}
.foglio + .foglio { margin-top: 16px; }
.foglio h4 { margin: 0 0 12px; font-size: 12px; }
.titolo-contenuto { font-size: 24px; margin: 0 0 8px; }
.post { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 15px; line-height: 1.55; margin: 0; }
.articolo { font-size: 15px; line-height: 1.6; overflow-wrap: anywhere; }
.articolo h3, .articolo h4 { font-size: 20px; margin: 24px 0 8px; }
.articolo p, .articolo ul { margin: 0 0 12px; }
.sommario { color: var(--ruolo-secondario); margin: 0 0 16px; }
.link-invito { font-size: 12px; overflow-wrap: anywhere; margin: 12px 0 0; color: var(--ruolo-meta); }
.elenco { list-style: none; margin: 0; padding: 0; }
.elenco li { padding: 10px 0; border-top: 1px solid var(--ruolo-filetto); font-size: 13px; }
.elenco li:first-child { border-top: 0; padding-top: 0; }
.elenco .testa { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-bottom: 4px; }
.elenco .testo { color: var(--ruolo-secondario); }
.problema { color: var(--ruolo-accento-forte); }
.figure { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; }
.figure figure { margin: 0; flex: 0 0 min(100%, 360px); scroll-snap-align: start; }
.figure img { width: 100%; height: auto; display: block; border: 1px solid var(--ruolo-filetto); border-radius: 6px; }
.figure figcaption { font-size: 11px; margin-top: 6px; }
.nota { font-size: 13px; color: var(--ruolo-secondario); margin: 0; }
.nota + .figure, .nota + .pdf { margin-top: 12px; }
.pdf {
display: block; width: 100%; aspect-ratio: 4 / 5; border: 1px solid var(--ruolo-filetto); border-radius: 6px;
background: var(--ruolo-scheda);
}
.piede { border-top: 1px solid var(--ruolo-filetto); padding: 24px 0; font-size: 12px; }
@media (max-width: 600px) {
.contenitore { padding: 0 16px; }
.copertina { padding: 40px 16px 24px; }
}
/* La web interna (sessione 2.3): quello che la vista locale non ha, cioè menu, moduli, messaggi, il calendario di
tutte le campagne. Viene dopo lo stile della vista (app/campagna/anteprima.py, STILE) e usa come lei solo le
variabili dei ruoli e le classi dei tipi di brand/generati/marchio.css: tests/servizio/web/test_marchio.py. */
/* `clip` e non `hidden`: con `hidden` il body diventa un contenitore che scorre, e il piede non resta più in fondo. */
html, body { overflow-x: hidden; overflow-x: clip; }
main { min-height: 60vh; padding-bottom: 48px; }
/* Il piede resta in fondo alla finestra mentre la pagina scorre; `main` gli lascia un margine. Sotto la tendina del
menu e la barra dello slot sul telefono (z-index 10 e 5). */
.piede { position: sticky; bottom: 0; z-index: 4; padding: 14px 0; background: var(--ruolo-sfondo); }
[hidden] { display: none !important; }
/* In comune fra le pagine (ui.6): quello che è in ritardo, cioè da approvare o da pubblicare dopo la sua ora. I fogli
di una pagina sola stanno accanto a questo (oggi.css, slot.css, …), nel blocco `stile` del suo template. */
.in-ritardo { color: var(--ruolo-accento-forte); }
/* La testata: logo, menu, utente ed esci; fuori dall'app, il tema. Sotto i 760 px il menu e «Esci» vanno nel burger
(un , senza script) e tutto sta su una riga. */
.testata { position: relative; }
.testata-barra { flex-wrap: nowrap; padding-top: 10px; padding-bottom: 10px; }
.marchio { display: inline-flex; align-items: center; flex: none; }
.menu { display: flex; flex-wrap: wrap; gap: 4px 18px; font-size: 13px; }
.menu a { text-decoration: none; color: var(--ruolo-secondario); padding: 6px 0; border-bottom: 1px solid transparent; }
.menu a:hover, .menu a[aria-current="page"] { color: var(--ruolo-inchiostro); border-bottom-color: var(--ruolo-accento); }
.strumenti { display: flex; align-items: center; gap: 12px; }
.strumenti form { margin: 0; }
.icona { display: block; width: 20px; height: 20px; flex: none; }
.pulsante-icona {
display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; padding: 0;
border-radius: 999px; border: 1px solid var(--ruolo-filetto-forte); background: none; cursor: pointer;
color: var(--ruolo-secondario); text-decoration: none;
}
.pulsante-icona:hover, .pulsante-icona[aria-current="page"] { color: var(--ruolo-inchiostro); border-color: var(--ruolo-accento); }
.pulsante-icona:focus-visible, .interruttore button:focus-visible {
outline: 2px solid var(--ruolo-accento); outline-offset: 2px;
}
.burger { display: none; }
.burger > summary { list-style: none; }
.burger > summary::-webkit-details-marker { display: none; }
.burger > summary .icona + .icona, .burger[open] > summary .icona:first-child { display: none; }
.burger[open] > summary .icona + .icona { display: block; }
.burger[open] > summary { color: var(--ruolo-inchiostro); border-color: var(--ruolo-accento); }
.tendina {
position: absolute; left: 0; right: 0; top: 100%; z-index: 10; padding: 4px 0 16px;
background: var(--ruolo-sfondo); border-bottom: 1px solid var(--ruolo-filetto-forte);
}
.menu-tendina { display: grid; margin-bottom: 8px; }
.menu-tendina a {
text-decoration: none; color: var(--ruolo-secondario); font-size: 15px; padding: 14px 0 14px 14px;
border-bottom: 1px solid var(--ruolo-filetto); border-left: 2px solid transparent;
}
.menu-tendina a:hover, .menu-tendina a[aria-current="page"] { color: var(--ruolo-inchiostro); }
.menu-tendina a[aria-current="page"] { border-left-color: var(--ruolo-accento); }
.tendina .pulsante-testo { padding: 10px 0 0 16px; font-size: 15px; }
@media (max-width: 760px) {
.menu, .solo-largo { display: none; }
.burger { display: block; }
}
/* L'interruttore del tema con le icone; il nome resta per lo screen reader e nel suggerimento. */
.interruttore button { display: inline-flex; align-items: center; gap: 8px; }
.interruttore-icone button { padding: 6px 9px; }
.interruttore .icona { width: 16px; height: 16px; }
.solo-lettori {
position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/* Pulsanti e moduli. */
.pulsante, .pulsante-secondario, .pulsante-testo {
font: inherit; font-size: 14px; cursor: pointer; border-radius: 999px; padding: 10px 18px;
text-decoration: none; display: inline-flex; align-items: center; gap: 8px; line-height: 1.2;
}
.pulsante { background: var(--ruolo-inchiostro); color: var(--ruolo-sfondo); border: 1px solid var(--ruolo-inchiostro); }
.pulsante:hover { background: var(--ruolo-accento); border-color: var(--ruolo-accento); }
.pulsante-secondario {
background: none; color: var(--ruolo-inchiostro); border: 1px solid var(--ruolo-filetto-forte);
}
.pulsante-secondario:hover { border-color: var(--ruolo-accento); }
.pulsante-testo { background: none; border: 0; padding: 6px 0; color: var(--ruolo-secondario); font-size: 13px; }
.pulsante-testo:hover { color: var(--ruolo-inchiostro); }
.modulo { display: grid; gap: 14px; margin: 0; }
.modulo label { display: grid; gap: 6px; font-size: 13px; color: var(--ruolo-secondario); }
.modulo input[type="email"], .modulo input[type="password"], .modulo input[type="url"],
.modulo input[type="datetime-local"], .modulo textarea, .modulo select, .filtri select {
font: inherit; font-size: 15px; width: 100%; max-width: 100%; padding: 10px 12px; border-radius: 8px;
background: var(--ruolo-sfondo); color: var(--ruolo-testo); border: 1px solid var(--ruolo-filetto-forte);
}
.modulo textarea { min-height: 120px; resize: vertical; }
.modulo input:focus, .modulo textarea:focus, .modulo select:focus, .filtri select:focus {
outline: 2px solid var(--ruolo-accento); outline-offset: 1px;
}
.casella {
display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: start; padding: 12px;
border: 1px solid var(--ruolo-filetto-forte); border-radius: 8px; color: var(--ruolo-testo);
}
.casella input { margin-top: 3px; width: 18px; height: 18px; accent-color: var(--ruolo-accento); }
.casella .testo { color: var(--ruolo-secondario); }
.pulsanti { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
/* I messaggi dopo un'azione. */
.messaggi { padding-top: 20px; }
.messaggio {
border: 1px solid var(--ruolo-filetto-forte); border-left: 3px solid var(--ruolo-secondario); border-radius: 8px;
padding: 12px 16px; margin: 0 0 10px; background: var(--ruolo-superficie); overflow-wrap: anywhere;
}
.messaggio-errore { border-left-color: var(--ruolo-accento); }
.messaggio p { margin: 0; }
.messaggio ul { margin: 8px 0 0; padding-left: 18px; font-size: 13px; color: var(--ruolo-secondario); }
/* Le impostazioni, con gli account collegati: una scheda per piattaforma. */
.impostazione { padding: 28px 0; border-top: 1px solid var(--ruolo-filetto); }
.impostazione:first-of-type { margin-top: 24px; }
.impostazione h2 { font-size: 22px; margin: 0 0 12px; }
.impostazione .modulo { max-width: 420px; }
.account { margin-top: 24px; }
.account + .account { padding-top: 24px; border-top: 1px solid var(--ruolo-filetto); }
.account h3 { font-size: 18px; margin: 0 0 8px; }
.account .pulsanti + .nota, .account .modulo { margin-top: 16px; }
/* La pagina d'accesso: lo schermo di un oscilloscopio. Sulla superficie la griglia nel colore dei filetti, le letture
in mono agli angoli, il titolo e il modulo, che sul telefono va sotto; poi il segnale, in inchiostro. L'accento
solo sul led e sul punto del titolo (regole.accento). */
.accesso { padding-top: clamp(16px, 3.5vw, 48px); padding-bottom: clamp(24px, 4vw, 56px); }
.schermo {
display: grid; gap: clamp(28px, 3.5vw, 44px); padding: clamp(20px, 3vw, 36px); border-radius: 24px;
border: 1px solid var(--ruolo-filetto-forte); background-color: var(--ruolo-superficie);
background-image:
linear-gradient(var(--ruolo-filetto) 1px, transparent 1px),
linear-gradient(90deg, var(--ruolo-filetto) 1px, transparent 1px);
background-size: 56px 56px; background-position: -1px -1px;
}
.schermo .etichetta { margin: 0; }
.letture { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; }
.letture .led { animation: in-ascolto 2.4s ease-in-out infinite; }
@keyframes in-ascolto { 50% { box-shadow: 0 0 0 7px var(--ruolo-velo-accento); } }
@media (prefers-reduced-motion: reduce) { .letture .led { animation: none; } }
.accesso-corpo { display: flex; flex-wrap: wrap; align-items: center; gap: 40px clamp(32px, 5vw, 72px); }
.accesso-testo { flex: 999 1 480px; min-width: 0; display: grid; gap: 24px; }
.accesso h1 { font-size: clamp(52px, 7.2vw, 108px); margin: 0; }
.accesso .sotto { max-width: 44ch; font-size: 17px; margin: 0; }
.accesso .modulo {
flex: 1 1 340px; min-width: 0; max-width: 420px; gap: 18px; padding: clamp(20px, 2.4vw, 32px);
border: 1px solid var(--ruolo-filetto-forte); border-radius: 18px; background: var(--ruolo-sfondo);
}
.accesso .modulo label { gap: 8px; }
.canale { display: flex; justify-content: space-between; gap: 12px; font-size: 11px; color: var(--ruolo-meta); }
.accesso .modulo input[type="email"], .accesso .modulo input[type="password"] {
padding: 14px 16px; border-radius: 10px; background: var(--ruolo-superficie); color: var(--ruolo-inchiostro);
transition: border-color 0.2s, box-shadow 0.2s;
}
.accesso .modulo input:hover { border-color: var(--ruolo-meta); }
.accesso .modulo input:focus {
outline: none; border-color: var(--ruolo-accento); box-shadow: 0 0 0 4px var(--ruolo-velo-accento);
}
.accesso .pulsante { width: 100%; justify-content: center; min-height: 52px; margin-top: 8px; font-size: 16px; }
.accesso .trig { justify-content: center; text-align: center; font-size: 11px; }
.segnale { display: block; width: 100%; height: auto; }
.segnale .asse { fill: none; stroke: var(--ruolo-filetto-forte); stroke-width: 1; stroke-dasharray: 3 6; }
.segnale .traccia {
fill: none; stroke: var(--ruolo-inchiostro); stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round;
}
.segnale .marcatore { fill: var(--ruolo-superficie); stroke: var(--ruolo-inchiostro); stroke-width: 1.5; }
.errore-modulo { color: var(--ruolo-accento-forte); margin: 0; }
.accesso-nota { margin-top: 24px; }
/* Le testate delle pagine. */
.pagina-testa { padding-top: 40px; padding-bottom: 8px; }
.pagina-testa h1 { font-size: clamp(32px, 6vw, 56px); margin: 0 0 12px; overflow-wrap: anywhere; }
.briciole { font-size: 12px; margin: 0 0 12px; color: var(--ruolo-meta); }
.briciole a { color: var(--ruolo-secondario); }
/* Il calendario: sette colonne; sul telefono un giorno sotto l'altro, senza i giorni vuoti. */
.barra-calendario { display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; justify-content: space-between; margin: 16px 0; }
.schede { display: inline-flex; border: 1px solid var(--ruolo-filetto-forte); border-radius: 999px; padding: 2px; }
.schede a { text-decoration: none; padding: 6px 14px; border-radius: 999px; font-size: 12px; color: var(--ruolo-secondario); }
.schede a[aria-current="page"] { background: var(--ruolo-superficie); color: var(--ruolo-inchiostro); }
.sposta { display: inline-flex; gap: 8px; align-items: center; font-size: 13px; }
.sposta a { text-decoration: none; border: 1px solid var(--ruolo-filetto-forte); border-radius: 999px; padding: 6px 12px; }
.sposta a:hover { border-color: var(--ruolo-accento); }
.filtri { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; align-items: end; margin: 0 0 20px; }
.filtri label { display: grid; gap: 4px; font-size: 12px; color: var(--ruolo-meta); }
.griglia {
display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border-top: 1px solid var(--ruolo-filetto);
border-left: 1px solid var(--ruolo-filetto);
}
.griglia .intestazione {
font-size: 12px; padding: 8px; border-right: 1px solid var(--ruolo-filetto);
border-bottom: 1px solid var(--ruolo-filetto); color: var(--ruolo-meta);
}
.giorno {
min-height: 132px; padding: 8px; border-right: 1px solid var(--ruolo-filetto);
border-bottom: 1px solid var(--ruolo-filetto); background: var(--ruolo-superficie); min-width: 0;
}
.griglia-mese .giorno { min-height: 112px; }
.giorno.fuori { background: none; }
.giorno.oggi { box-shadow: inset 0 0 0 2px var(--ruolo-accento); }
.giorno .data { display: block; font-size: 11px; margin-bottom: 6px; color: var(--ruolo-meta); }
.giorno.oggi .data { color: var(--ruolo-accento); }
/* Le schede degli slot, i filtri sul telefono e il trascinamento sono in calendario.css. */
.slot:first-child { border-top: 0; padding-top: 32px; }
@media (max-width: 760px) {
.griglia { grid-template-columns: minmax(0, 1fr); }
.griglia .intestazione { display: none; }
.giorno { min-height: 0; }
.giorno.vuoto:not(.oggi) { display: none; }
.giorno .data { font-size: 13px; }
}
.nessuno { font-size: 13px; color: var(--ruolo-secondario); margin: 16px 0 0; }
/* Le campagne. */
.tessere { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 16px; }
.tessera {
display: block; text-decoration: none; background: var(--ruolo-superficie); border: 1px solid var(--ruolo-filetto);
border-radius: 10px; padding: 18px 20px;
}
.tessera:hover { border-color: var(--ruolo-accento); }
.tessera h2 { font-size: 24px; margin: 0 0 8px; overflow-wrap: anywhere; }
.tessera p { margin: 6px 0 0; font-size: 13px; color: var(--ruolo-secondario); }
.di-prova {
display: inline-block; font-size: 11px; border: 1px solid var(--ruolo-accento); color: var(--ruolo-accento-forte);
border-radius: 999px; padding: 1px 8px; vertical-align: middle;
}
.righe-slot { list-style: none; margin: 0; padding: 0; }
.righe-slot li { border-top: 1px solid var(--ruolo-filetto); }
.righe-slot a {
display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 4px 16px; padding: 14px 0;
text-decoration: none; align-items: baseline;
}
.righe-slot a:hover .id { color: var(--ruolo-accento); }
.righe-slot .id { font-size: 18px; }
.righe-slot .cosa { font-size: 13px; color: var(--ruolo-secondario); }
.righe-slot .cosa b { color: var(--ruolo-testo); }
@media (max-width: 600px) {
.righe-slot a { grid-template-columns: 48px minmax(0, 1fr); }
.righe-slot .stato-slot { grid-column: 2; justify-self: start; }
}
/* Lo slot: la storia e le note, e l'esito di una richiesta (ui.6: la pagina dello slot, con la sua barra delle azioni, sta
in slot.css). */
.storia { list-style: none; margin: 0; padding: 0; }
.storia li { padding: 10px 0; border-top: 1px solid var(--ruolo-filetto); font-size: 13px; overflow-wrap: anywhere; }
.storia li:first-child { border-top: 0; padding-top: 0; }
.storia .chi { color: var(--ruolo-meta); }
.storia .file { color: var(--ruolo-secondario); font-size: 12px; margin-top: 4px; }
.stato-richiesta { border-left: 3px solid var(--ruolo-accento); padding-left: 12px; }
.dettaglio, .foglio { overflow-wrap: anywhere; }
/* Le pagine d'errore e dei collegamenti. */
.pannello { padding-top: 40px; padding-bottom: 40px; }
.pannello > * { max-width: 680px; }
.pannello h1 { font-size: clamp(32px, 7vw, 48px); margin: 0 0 16px; }
.dati { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 16px; margin: 0 0 20px; font-size: 14px; }
.dati dt { color: var(--ruolo-meta); }
.dati dd { margin: 0; overflow-wrap: anywhere; }
/* La spesa (2.5a). */
.spesa-mesi { margin: 12px 0 0; }
.spesa-chiamate { margin-top: 16px; }