/* PRIME COND — stile dell'app, del portale e delle pagine pubbliche */
:root {
  --primario: #0d2a52; --primario-scuro: #081d3a; --accento: #f0a81e;
  --sfondo: #f3f5f9; --carta: #fff; --testo: #172033; --tenue: #5b6675; --bordo: #e3e7ee;
  --ok: #24864f; --att: #b87c05; --ko: #d4501c; --info: #1a6cb3;
  --raggio: 14px; --ombra: 0 1px 2px rgba(16,24,40,.04), 0 4px 14px -6px rgba(16,24,40,.10);
  --sans: Inter, "Segoe UI", system-ui, -apple-system, sans-serif;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 15px; }
body { font-family: var(--sans); background: var(--sfondo); color: var(--testo); line-height: 1.5; -webkit-font-smoothing: antialiased; }
a { color: var(--info); text-decoration: none; }
img { max-width: 100%; }
svg.ic { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* ---- struttura dell'app ---- */
.app { display: grid; grid-template-columns: 256px minmax(0, 1fr); min-height: 100vh; }
.lato { background: linear-gradient(180deg, #fbfcfe, #f6f8fb); border-right: 1px solid var(--bordo); display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; overflow-y: auto; }
.marchio { display: flex; align-items: center; gap: 10px; padding: 16px 18px 14px; border-bottom: 1px solid var(--bordo); color: var(--testo); }
.marchio .logo { width: 40px; height: 40px; border-radius: 12px; background: linear-gradient(135deg, var(--primario), #1c4a8a); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 15px; overflow: hidden; flex: none; box-shadow: 0 4px 10px -4px rgba(13,42,82,.5); }
.marchio .logo img { width: 100%; height: 100%; object-fit: cover; }
.marchio b { display: block; font-size: 14.5px; line-height: 1.2; }
.marchio small { display: block; font-size: 11.5px; color: var(--tenue); }
.selettore { padding: 12px 14px; border-bottom: 1px solid var(--bordo); }
.selettore label { display: block; font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--tenue); font-weight: 600; margin-bottom: 6px; }
.nav { padding: 8px 10px; display: flex; flex-direction: column; gap: 2px; flex: 1; }
.nav .sez { font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--tenue); font-weight: 600; padding: 14px 10px 4px; }
.nav a { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 9px; color: var(--testo); font-size: 14px; font-weight: 500; position: relative; }
.nav a svg { color: var(--tenue); width: 26px; height: 26px; padding: 5px; border-radius: 7px; background: #fff; border: 1px solid var(--bordo); }
.nav a:hover { background: #fff; }
.nav a.attivo { background: #fff; color: var(--primario); box-shadow: var(--ombra); }
.nav a.attivo::before { content: ""; position: absolute; left: -10px; top: 8px; bottom: 8px; width: 3px; border-radius: 3px; background: var(--accento); }
.nav a.attivo svg { color: #fff; background: var(--primario); border-color: var(--primario); }
.nav a .conta { margin-left: auto; background: var(--accento); color: #1c2733; font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 999px; }
.utente { border-top: 1px solid var(--bordo); padding: 12px 14px; display: flex; align-items: center; gap: 10px; font-size: 13px; }
.utente .tondo { width: 32px; height: 32px; border-radius: 50%; background: var(--primario); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 12px; flex: none; }
.utente b { display: block; font-size: 13px; } .utente small { color: var(--tenue); }
.utente a.esci { margin-left: auto; color: var(--tenue); }
.principale { min-width: 0; display: flex; flex-direction: column; }
.testata-app { height: 64px; background: rgba(255,255,255,.85); backdrop-filter: blur(8px); border-bottom: 1px solid var(--bordo); display: flex; align-items: center; gap: 16px; padding: 0 28px; position: sticky; top: 0; z-index: 20; }
.testata-app h1 { font-size: 19px; font-weight: 650; letter-spacing: -.015em; }
.testata-app .briciole { font-size: 12.5px; color: var(--tenue); }
.testata-app .destra { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.cerca { display: flex; align-items: center; gap: 8px; background: var(--sfondo); border: 1px solid var(--bordo); border-radius: 8px; padding: 6px 10px; font-size: 13px; color: var(--tenue); min-width: 220px; }
.burger { display: none; width: 40px; height: 40px; align-items: center; justify-content: center; border: 1px solid var(--bordo); border-radius: 8px; background: #fff; cursor: pointer; color: var(--testo); }
.contenuto { padding: 26px 28px 40px; max-width: 1280px; width: 100%; }
.banner-assistenza { background: #fff3d6; border-bottom: 1px solid #f0d290; color: #6b4c00; padding: 8px 24px; font-size: 13.5px; display: flex; gap: 12px; align-items: center; }
.banner-assistenza a { margin-left: auto; font-weight: 600; color: #6b4c00; border: 1px solid #d6b15c; padding: 4px 10px; border-radius: 6px; background: #fff; }

/* ---- messaggi ---- */
.messaggi { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; }
.messaggio { padding: 10px 14px; border-radius: 8px; font-size: 14px; border: 1px solid; background: #fff; }
.messaggio.success { border-color: #bfe3cc; background: #eaf7ee; color: #1f6b3f; }
.messaggio.error { border-color: #f3c4b0; background: #fdeee7; color: #9a3a1a; }
.messaggio.info { border-color: #c7dcf0; background: #eaf2fb; color: #1a4d80; }
.messaggio.warning { border-color: #f0d290; background: #fff3d6; color: #6b4c00; }

/* ---- componenti ---- */
.card { background: #fff; border: 1px solid var(--bordo); border-radius: var(--raggio); box-shadow: var(--ombra); }
.card .testa { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--bordo); }
.card .testa h2 { font-size: 15px; font-weight: 650; letter-spacing: -.01em; }
.card .corpo { padding: 18px; }
.card .piede { padding: 12px 18px; border-top: 1px solid var(--bordo); font-size: 13px; color: var(--tenue); }
.card + .card { margin-top: 16px; }
.griglia { display: grid; gap: 16px; }
.griglia.c2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.griglia.c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.griglia.c4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.griglia.principale-lato { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); align-items: start; }
.griglia.principale-lato > .card + .card { margin-top: 0; }
.stat { padding: 18px 20px; position: relative; overflow: hidden; }
.stat::after { content: ""; position: absolute; right: -18px; top: -18px; width: 70px; height: 70px; border-radius: 50%; background: color-mix(in srgb, var(--primario) 6%, #fff); }
.stat .n { font-size: 30px; font-weight: 650; letter-spacing: -.025em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.stat .e { font-size: 13px; color: var(--tenue); margin-top: 4px; }
.stat .n.ko { color: var(--ko); } .stat .n.att { color: var(--att); } .stat .n.ok { color: var(--ok); }
.azioni-rapide { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.azione-r { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 16px 8px; border: 1px solid var(--bordo); border-radius: 12px; background: #fff; color: var(--testo); font-size: 12.5px; font-weight: 500; text-align: center; transition: transform .12s, box-shadow .12s; }
.azione-r:hover { border-color: var(--primario); color: var(--primario); transform: translateY(-2px); box-shadow: var(--ombra); }
.azione-r i { width: 40px; height: 40px; border-radius: 12px; background: linear-gradient(135deg, color-mix(in srgb, var(--primario) 12%, #fff), color-mix(in srgb, var(--accento) 18%, #fff)); color: var(--primario); display: flex; align-items: center; justify-content: center; }
.tabella { width: 100%; border-collapse: collapse; font-size: 14px; }
.tabella th { text-align: left; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--tenue); font-weight: 600; padding: 11px 14px; border-bottom: 1px solid var(--bordo); background: #f8fafc; }
.tabella td { padding: 10px 12px; border-bottom: 1px solid var(--bordo); vertical-align: middle; }
.tabella tr:last-child td { border-bottom: 0; }
.tabella tr.cliccabile:hover td { background: #fafbfc; }
.tabella .d { color: var(--tenue); font-size: 13px; }
.tabella .num { text-align: right; font-variant-numeric: tabular-nums; }
.tabella a.titolo { color: var(--testo); font-weight: 600; }
.badge { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 9px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge.ok { background: #e6f4ea; color: #1f6b3f; } .badge.att { background: #fff3d6; color: #8a5b00; } .badge.ko { background: #fdeee7; color: #9a3a1a; }
.badge.info { background: #eaf2fb; color: #1a4d80; } .badge.neutra { background: #eef0f3; color: #4b5563; }
.pill { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 999px; background: var(--sfondo); border: 1px solid var(--bordo); font-size: 12px; color: var(--tenue); white-space: nowrap; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 38px; padding: 0 16px; border-radius: 9px; font-weight: 600; font-size: 14px; border: 1px solid var(--bordo); cursor: pointer; white-space: nowrap; font-family: inherit; background: #fff; color: var(--testo); }
.btn:hover { border-color: #c9ced6; }
.btn.primario { background: linear-gradient(180deg, #16386b, var(--primario)); color: #fff; border-color: var(--primario); box-shadow: 0 2px 6px -2px rgba(13,42,82,.5); } .btn.primario:hover { filter: brightness(1.1); }
.btn.accento { background: var(--accento); color: #1c2733; border-color: var(--accento); }
.btn.pericolo { color: var(--ko); border-color: #f3c4b0; }
.btn.piccolo { height: 30px; padding: 0 10px; font-size: 12.5px; }
.btn.largo { width: 100%; }
.btn svg { width: 16px; height: 16px; }
.btn-riga { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.inline { display: inline; }

/* ---- moduli ---- */
.gruppo { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.gruppo label { font-size: 13px; font-weight: 600; color: var(--testo); }
.gruppo small { font-size: 12px; color: var(--tenue); }
.gruppo small.err { color: var(--ko); }
.gruppo.riga { flex-direction: row; align-items: center; gap: 10px; }
.gruppo.riga label { font-weight: 500; }
.campo { width: 100%; height: 40px; border: 1px solid var(--bordo); border-radius: 9px; padding: 0 12px; font: inherit; font-size: 14px; color: var(--testo); background: #fff; outline: none; }
textarea.campo { height: auto; padding: 10px 12px; resize: vertical; line-height: 1.5; }
.campo:focus { border-color: var(--primario); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primario) 15%, transparent); }
.campo-file { height: auto; padding: 8px; }
input[type=color].campo { padding: 2px 4px; width: 80px; }
.spunta { width: 18px; height: 18px; accent-color: var(--primario); }
.form-griglia { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
.form-griglia .largo { grid-column: span 2; }
.form-azioni { display: flex; gap: 10px; align-items: center; margin-top: 8px; flex-wrap: wrap; }
.errori { background: #fdeee7; color: #9a3a1a; border: 1px solid #f3c4b0; border-radius: 8px; padding: 8px 12px; font-size: 13.5px; margin-bottom: 14px; }
.vuoto { text-align: center; padding: 40px 20px; color: var(--tenue); font-size: 14px; }
.vuoto b { display: block; color: var(--testo); font-size: 15px; margin-bottom: 4px; }
.timeline { display: flex; flex-direction: column; gap: 14px; }
.evento { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 12px; }
.evento .punto { width: 36px; height: 36px; border-radius: 50%; background: var(--sfondo); border: 1px solid var(--bordo); display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; color: var(--tenue); }
.evento.risposta .punto { background: color-mix(in srgb, var(--primario) 12%, #fff); color: var(--primario); border-color: transparent; }
.evento .bolla { background: #fff; border: 1px solid var(--bordo); border-radius: 10px; padding: 10px 14px; font-size: 14px; white-space: pre-wrap; }
.evento.risposta .bolla { border-color: color-mix(in srgb, var(--primario) 30%, #fff); background: color-mix(in srgb, var(--primario) 4%, #fff); }
.evento .meta { font-size: 12px; color: var(--tenue); margin-bottom: 4px; }
.filtri { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 16px; }
.filtri .campo { width: auto; height: 36px; }
.scheda-tab { display: inline-flex; align-items: center; height: 34px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--bordo); background: #fff; font-size: 13px; font-weight: 500; color: var(--tenue); }
.scheda-tab.attiva { background: var(--primario); color: #fff; border-color: var(--primario); }
.intest-pagina { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 18px; flex-wrap: wrap; }
.intest-pagina h2 { font-size: 22px; font-weight: 650; letter-spacing: -.015em; }
.occhio-piccolo { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--att); font-weight: 700; margin-bottom: 2px; }
.intest-pagina p { color: var(--tenue); font-size: 14px; max-width: 640px; }
.lista-semplice { list-style: none; display: flex; flex-direction: column; }
.lista-semplice li { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--bordo); font-size: 14px; }
.lista-semplice li:first-child { border-top: 0; }
.lista-semplice .d { color: var(--tenue); font-size: 13px; }
.lista-semplice .fine { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--sfondo); border: 1px solid var(--bordo); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; color: var(--tenue); flex: none; }
.sem { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.sem.ok { background: var(--ok); } .sem.att { background: var(--accento); } .sem.ko { background: var(--ko); } .sem.neutra { background: #c9ced6; }
.barra-p { height: 8px; border-radius: 999px; background: var(--sfondo); overflow: hidden; }
.barra-p i { display: block; height: 100%; background: var(--primario); border-radius: 999px; }
.griglia-letture { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.riga-lettura { display: grid; grid-template-columns: minmax(0, 1fr) 130px 22px; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--bordo); border-radius: 10px; background: #fff; }
.riga-lettura b { font-size: 14px; } .riga-lettura small { display: block; color: var(--tenue); font-size: 12px; }
.riga-lettura .campo { height: 36px; text-align: right; }
.paginazione { display: flex; gap: 6px; justify-content: center; margin-top: 18px; font-size: 13px; }
.paginazione a, .paginazione span { padding: 6px 10px; border: 1px solid var(--bordo); border-radius: 8px; background: #fff; color: var(--testo); }
.paginazione span.attuale { background: var(--primario); color: #fff; border-color: var(--primario); }
.testo-ai { white-space: pre-wrap; font-size: 14px; line-height: 1.55; }
.nota-ai { border: 1px dashed #e6d3a3; border-radius: 10px; padding: 12px 14px; background: #fffdf7; font-size: 13.5px; }
.nota-ai b { display: flex; align-items: center; gap: 6px; color: var(--att); margin-bottom: 6px; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.etichetta { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--tenue); font-weight: 600; }
.dl { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 8px 12px; font-size: 14px; }
.dl dt { color: var(--tenue); } .dl dd { margin: 0; }
.guida-sez { margin-bottom: 28px; } .guida-sez h2 { font-size: 20px; margin-bottom: 8px; } .guida-sez p, .guida-sez li { font-size: 15px; color: var(--testo); } .guida-sez ul { padding-left: 20px; }

/* ---- il cruscotto ---- */
.hero { background: linear-gradient(135deg, var(--primario-scuro), #163d78 60%, #1f5aa8); color: #fff; border-radius: 18px; padding: 26px 28px; display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; box-shadow: 0 16px 34px -18px rgba(13,42,82,.7); position: relative; overflow: hidden; }
.hero::before { content: ""; position: absolute; right: -60px; top: -80px; width: 260px; height: 260px; border-radius: 50%; background: rgba(240,168,30,.18); }
.hero h2 { font-size: 24px; font-weight: 650; letter-spacing: -.02em; position: relative; }
.hero p { color: rgba(255,255,255,.78); font-size: 14px; margin-top: 4px; position: relative; }
.hero .btn { position: relative; }
.hero .btn:not(.primario) { background: rgba(255,255,255,.12); color: #fff; border-color: rgba(255,255,255,.25); }
.hero .btn.primario { background: var(--accento); color: #1c2733; border-color: var(--accento); box-shadow: none; }

/* ---- l'area PRIME ---- */
.prime-hero { background: linear-gradient(135deg, #0b1f3f, #14305e 55%, #1c4a8a); color: #fff; border-radius: 18px; padding: 26px 28px; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 20px; align-items: center; box-shadow: 0 16px 34px -18px rgba(13,42,82,.7); }
.prime-hero .occhio { font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--accento); font-weight: 700; margin-bottom: 6px; }
.prime-hero h2 { font-size: 24px; font-weight: 650; letter-spacing: -.02em; }
.prime-hero p { color: rgba(255,255,255,.78); font-size: 14px; margin-top: 8px; max-width: 520px; }
.prime-hero .numeri { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.prime-hero .numeri div { background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.14); border-radius: 12px; padding: 12px 14px; }
.prime-hero .numeri b { display: block; font-size: 22px; font-weight: 650; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.prime-hero .numeri b.ko { color: #ffb08a; } .prime-hero .numeri b.att { color: #ffd77a; }
.prime-hero .numeri span { font-size: 11.5px; color: rgba(255,255,255,.7); }
.piastrelle { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: 18px; }
.piastrella { display: flex; flex-direction: column; gap: 10px; padding: 18px; border-radius: 16px; background: #fff; border: 1px solid var(--bordo); color: var(--testo); box-shadow: var(--ombra); transition: transform .12s, box-shadow .12s; min-height: 132px; }
.piastrella:hover { transform: translateY(-2px); box-shadow: 0 10px 24px -12px rgba(16,24,40,.25); }
.piastrella i { width: 40px; height: 40px; border-radius: 12px; background: var(--primario); color: #fff; display: flex; align-items: center; justify-content: center; }
.piastrella b { font-size: 15px; font-weight: 650; letter-spacing: -.01em; margin-top: auto; }
.piastrella span { font-size: 12.5px; color: var(--tenue); }
.piastrella.spenta { background: #f8fafc; border-style: dashed; color: var(--tenue); }
.piastrella.spenta i { background: #e6eaf1; color: var(--tenue); }
.piastrella.spenta b { color: var(--tenue); font-weight: 600; }
.piastrella.spenta span { color: var(--att); font-weight: 600; }
.matrice th { white-space: nowrap; }
.cella { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 8px; font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.cella.ok { background: #e6f4ea; color: #1f6b3f; } .cella.att { background: #fff3d6; color: #8a5b00; } .cella.ko { background: #fdeee7; color: #9a3a1a; } .cella.neutra { background: #eef0f3; color: #4b5563; }

/* ---- portale del condòmino ---- */
.portale-body { background: #e9ecf0; }
.portale { max-width: 560px; margin: 0 auto; min-height: 100vh; display: flex; flex-direction: column; background: var(--sfondo); box-shadow: 0 0 40px rgba(16,24,40,.08); }
.portale-testa { background: var(--primario); color: #fff; padding: 18px 20px 22px; display: flex; align-items: center; gap: 12px; }
.portale-testa .logo { width: 40px; height: 40px; border-radius: 10px; background: rgba(255,255,255,.15); display: flex; align-items: center; justify-content: center; font-weight: 700; overflow: hidden; }
.portale-testa .logo img { width: 100%; height: 100%; object-fit: cover; }
.portale-testa b { display: block; font-size: 15px; } .portale-testa small { opacity: .8; font-size: 12px; }
.portale-testa a.esci { margin-left: auto; color: #fff; opacity: .85; font-size: 13px; }
.portale-corpo { padding: 18px 16px 24px; flex: 1; }
.portale-nav { position: sticky; bottom: 0; background: #fff; border-top: 1px solid var(--bordo); display: grid; grid-template-columns: repeat(4, 1fr); padding: 8px 6px calc(8px + env(safe-area-inset-bottom)); }
.portale-nav a { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 11px; color: var(--tenue); font-weight: 500; padding: 4px; }
.portale-nav a.attivo { color: var(--primario); }
.portale-nav svg { width: 22px; height: 22px; }
.saluto { font-size: 22px; font-weight: 600; letter-spacing: -.01em; margin-bottom: 2px; }
.sotto-saluto { color: var(--tenue); font-size: 14px; }
.azioni-portale { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin: 16px 0; }
.azione-p { display: flex; flex-direction: column; gap: 8px; padding: 16px; border-radius: 14px; background: linear-gradient(135deg, var(--primario), #1c4a8a); color: #fff; font-weight: 600; font-size: 14px; box-shadow: 0 10px 20px -14px rgba(13,42,82,.8); }
.azione-p.chiara { background: #fff; color: var(--testo); border: 1px solid var(--bordo); }
.azione-p svg { width: 22px; height: 22px; }
.avviso { border: 1px solid var(--bordo); border-radius: 12px; padding: 14px 16px; background: #fff; margin-bottom: 10px; }
.avviso .meta { font-size: 12px; color: var(--tenue); margin-bottom: 4px; }
.avviso b { display: block; font-size: 15px; margin-bottom: 6px; }
.avviso p { font-size: 14px; }
.avviso p + p { margin-top: 8px; }

/* ---- pagine pubbliche ---- */
.pubblico { min-height: 100vh; display: grid; place-items: center; padding: 24px; background: linear-gradient(180deg, #e9eef5, var(--sfondo)); }
.scatola { width: 100%; max-width: 420px; background: #fff; border: 1px solid var(--bordo); border-radius: 16px; padding: 32px; box-shadow: 0 20px 50px rgba(16,24,40,.08); }
.scatola .marchio { padding: 0 0 18px; border: 0; justify-content: center; }
.scatola h1 { font-size: 20px; font-weight: 600; margin-bottom: 4px; text-align: center; }
.scatola p.sotto { font-size: 13.5px; color: var(--tenue); text-align: center; margin-bottom: 22px; }
.errore { background: #fdeee7; color: #9a3a1a; border: 1px solid #f3c4b0; border-radius: 8px; padding: 8px 12px; font-size: 13.5px; margin-bottom: 14px; }
.piede-pubblico { text-align: center; font-size: 12.5px; color: var(--tenue); margin-top: 18px; }
.landing { max-width: 1320px; margin: 0 auto; padding: 0 24px 40px; }
.landing .barra { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 68px; }
/* La fascia blu tiene il titolo e il modulo: le serve respiro dentro, se no il testo
   finisce contro il bordo e l overflow: hidden del riquadro se lo mangia. */
.landing .hero { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(360px, .95fr); gap: 44px;
  align-items: center; padding: 54px 52px; }
.landing h1 { font-size: 44px; line-height: 1.1; letter-spacing: -.02em; font-weight: 600; }
.landing h1 em { font-style: italic; color: var(--att); }
/* sul blu il grigio dei testi secondari non si legge: qui vince il bianco velato */
.landing .hero .etichetta { color: rgba(255,255,255,.72); }
.landing p.lead { font-size: 17.5px; color: rgba(255,255,255,.86); margin: 18px 0 26px; max-width: 540px; position: relative; }
.landing .hero .riga-demo { color: rgba(255,255,255,.7); position: relative; }
.landing .punti { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 8px 0 40px; }
.landing .punto { background: #fff; border: 1px solid var(--bordo); border-radius: 12px; padding: 18px; }
.landing .punto b { display: block; margin-bottom: 4px; } .landing .punto p { font-size: 13.5px; color: var(--tenue); }
.landing .modulo-prova { background: #fff; border: 1px solid var(--bordo); border-radius: 16px; padding: 26px; box-shadow: 0 20px 50px rgba(16,24,40,.08); }
.landing .modulo-prova h2 { font-size: 18px; margin-bottom: 4px; } .landing .modulo-prova p { font-size: 13.5px; color: var(--tenue); margin-bottom: 16px; }

/* ---- console ---- */
.console-testa { background: var(--primario-scuro); color: #fff; }
.console-testa .dentro { max-width: 1200px; margin: 0 auto; padding: 0 24px; height: 60px; display: flex; align-items: center; gap: 24px; }
.console-testa .nome { font-weight: 700; letter-spacing: .04em; }
.console-testa nav { display: flex; gap: 6px; }
.console-testa nav a { color: rgba(255,255,255,.8); padding: 6px 10px; border-radius: 6px; font-size: 14px; font-weight: 500; }
.console-testa nav a.attivo, .console-testa nav a:hover { background: rgba(255,255,255,.12); color: #fff; }
.console-testa .destra { margin-left: auto; font-size: 13px; color: rgba(255,255,255,.8); display: flex; gap: 12px; align-items: center; }
.console-testa .destra a { color: #fff; }
.console-corpo { max-width: 1200px; margin: 0 auto; padding: 24px; }

/* ---- telefono ---- */
@media (max-width: 900px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  .lato { position: fixed; inset: 0 auto 0 0; width: 280px; z-index: 40; transform: translateX(-100%); transition: transform .2s; box-shadow: 0 0 40px rgba(0,0,0,.2); }
  .lato.aperto { transform: none; }
  .velo { position: fixed; inset: 0; background: rgba(16,24,40,.4); z-index: 35; }
  .burger { display: inline-flex; }
  .testata-app { padding: 0 16px; gap: 10px; } .cerca, .testata-app .briciole { display: none; }
  .testata-app h1 { font-size: 16px; }
  .contenuto { padding: 16px; }
  .griglia.c2, .griglia.c3, .griglia.c4, .griglia.principale-lato, .form-griglia, .griglia-letture { grid-template-columns: minmax(0, 1fr); }
  .form-griglia .largo { grid-column: span 1; }
  .griglia.c4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .azioni-rapide { grid-template-columns: repeat(2, 1fr); }
  .piastrelle { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .prime-hero { grid-template-columns: minmax(0, 1fr); } .prime-hero .numeri { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tabella .nascondi { display: none; }
  /* sullo stretto la barra in alto non ci sta su una riga: va a capo invece di accavallarsi */
  .landing .barra { height: auto; flex-wrap: wrap; padding: 12px 0; gap: 10px; }
  .landing .barra .marchio small { display: none; }
  .landing .barra .btn { padding: 8px 12px; font-size: 13.5px; }
  .landing .hero { grid-template-columns: minmax(0, 1fr); padding: 30px 22px; } .landing h1 { font-size: 32px; } .landing .punti { grid-template-columns: 1fr; }
  .console-testa .dentro { height: auto; flex-wrap: wrap; padding: 10px 16px; gap: 10px; } .console-corpo { padding: 16px; }
}

/* la fascia della dimostrazione: si vede, ma non ruba la scena al prodotto */
.fascia-demo { background: #fff6e5; border: 1px solid #f0d9a8; color: #6b4e12; border-radius: 10px;
  padding: 11px 14px; font-size: 13.5px; line-height: 1.45; margin-bottom: 14px; }
.fascia-demo b { color: #4d3708; }
.fascia-demo a { color: #6b4e12; text-decoration: underline; }
.riga-demo { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 14px;
  font-size: 13.5px; color: var(--tenue); }

/* Sulla landing il riquadro bianco del modulo copre a meta' il cerchio decorativo e quello
   che resta sembra una macchia: lo si porta in basso a sinistra, dove c e' blu libero. */
.landing .hero::before { right: auto; left: -120px; top: auto; bottom: -180px;
  width: 520px; height: 520px;
  background: radial-gradient(circle, rgba(240,168,30,.20), rgba(240,168,30,0) 68%); }

/* la riga di conferma di una cancellazione: campo, bottone rosso e via di fuga sulla stessa riga */
.riga-conferma { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.riga-conferma .btn.pericolo { background: var(--ko); color: #fff; border-color: var(--ko); }

/* ---- la pagina del fornitore: si apre sul telefono, in piedi, con una mano sola ---- */
.incarico { max-width: 540px; margin: 0 auto; padding: 18px 16px 40px; }
.incarico .testata { display: flex; align-items: center; gap: 11px; margin-bottom: 16px; }
.incarico .testata .logo { width: 42px; height: 42px; border-radius: 11px; background: var(--primario); color: #fff;
  display: flex; align-items: center; justify-content: center; font-weight: 700; overflow: hidden; flex: none; }
.incarico .testata .logo img { width: 100%; height: 100%; object-fit: cover; }
.incarico .testata b { display: block; line-height: 1.2; }
.incarico .testata small { color: var(--tenue); font-size: 12.5px; }
.incarico .card { margin-bottom: 14px; }
.incarico .dove { color: var(--tenue); font-size: 14px; margin-top: 6px; }
.incarico .testo { margin-top: 12px; font-size: 15px; line-height: 1.5; }
.incarico h2 { font-size: 18px; margin-bottom: 6px; }
.incarico .aiuto { color: var(--tenue); font-size: 13.5px; line-height: 1.45; margin-bottom: 14px; }
.incarico .campo-etichetta { display: block; font-size: 12.5px; font-weight: 600; margin: 12px 0 5px; }
.incarico .campo-etichetta span { font-weight: 400; color: var(--tenue); }
.incarico .campo.grande { height: 46px; font-size: 16px; }
.incarico .bottoni { display: grid; gap: 10px; margin-top: 16px; }
.incarico .btn.grande { height: 50px; font-size: 16px; justify-content: center; }
.incarico .piede { text-align: center; color: var(--tenue); font-size: 12.5px; margin-top: 18px; }

/* lo stato dell incarico sulla scheda della pratica */
.gruppo.consiglio { background: #f4f8fd; border: 1px solid #d7e5f5; border-radius: 10px; padding: 12px; }
.gruppo.incarico-stato { border: 1px solid var(--bordo); border-radius: 10px; padding: 12px; }
.gruppo.incarico-stato .riga-stato { display: flex; align-items: center; gap: 8px; margin-top: 4px; }

/* le risposte pronte per la data sulla pagina del fornitore */
.incarico .rapide { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.incarico .rapida { border: 1px solid var(--bordo); background: #fff; border-radius: 999px;
  padding: 9px 14px; font-size: 14px; font-family: inherit; cursor: pointer; color: var(--testo); }
.incarico .rapida:hover { border-color: var(--primario); }
.incarico .rapida.scelta { background: var(--primario); border-color: var(--primario); color: #fff; }

/* gli elenchi a scelta multipla (i condomini serviti dal fornitore) devono respirare:
   con l altezza dei campi normali se ne vedono due e sembra un menu a tendina rotto */
select[multiple] { height: auto; min-height: 150px; padding: 8px 10px; }
select[multiple] option { padding: 3px 2px; }

/* ---- rifiniture per il telefono, trovate misurando (prove/controllo_schermate.py) ---- */
@media (max-width: 900px) {
  /* I bottoni della testata non andavano a capo e spingevano la pagina di lato: su un
     telefono si finiva a scorrere in orizzontale per leggere una riga. */
  .testata-app { height: auto; min-height: 60px; flex-wrap: wrap; padding: 10px 16px; }
  .testata-app .destra { margin-left: auto; flex-wrap: wrap; justify-content: flex-end; }

  /* Le tabelle larghe scorrono dentro la loro scheda, non trascinano tutta la pagina. */
  .card .corpo:has(> table.tabella) { overflow-x: auto; }

  /* Sotto i 34 px col pollice non si prende: i bottoni piccoli qui non sono piccoli. */
  .btn.piccolo { height: 38px; padding: 0 14px; font-size: 13.5px; }
  .btn-riga { gap: 8px; row-gap: 8px; flex-wrap: wrap; }
}

/* Le etichette delle sezioni erano a 10,5 px: leggibili da chi le ha scritte, non da tutti. */
.etichetta { font-size: 11.5px; }

/* Il campo «scegli file» porta con sé un testo lungo che sullo stretto sfonda la riga.
   Non si può stilare dentro, ma gli si può impedire di spingere fuori quello che ha intorno. */
input[type="file"] { max-width: 100%; min-width: 0; }
@media (max-width: 900px) {
  .btn-riga input[type="file"] { flex: 1 1 100%; }
}

/* Gli ultimi testi sotto gli 11,5 px: l'orario dei messaggi e l'occhiello delle sezioni.
   Sono etichette, non prosa, ma undici pixel su un telefono al sole non si leggono. */
.occhio, .occhio-piccolo, .messaggio .ora, .filo .ora { font-size: 11.5px; }

@media (max-width: 900px) {
  /* Due riquadri per riga su un telefono stretto: «625,00 €» andava a capo e finiva
     sotto il cerchio decorativo. Il numero si stringe un po' e resta su una riga. */
  .stat .n { font-size: 25px; white-space: nowrap; }
  /* Le tabelle scorrono dentro la scheda invece di schiacciare le colonne:
     una riga leggibile che si fa scorrere batte quattro colonne illeggibili. */
  .card .corpo:has(> table.tabella) > table.tabella { min-width: 520px; }
}
  /* il cerchio decorativo passava sopra la cifra: sullo stretto si fa più piccolo */
@media (max-width: 900px) {
  .stat::after { width: 46px; height: 46px; right: -14px; top: -14px; }
  .tabella .num { white-space: nowrap; }
}

/* ---- Il portale del condòmino: più grande di tutto il resto, e non per sbaglio.
   Qui non c'è un impiegato addestrato davanti a un monitor: c'è una persona di settant'anni
   in piedi in cortile, col telefono in una mano. Dodici pixel lì non sono piccoli, sono
   illeggibili, e un bottone da venti pixel non si prende. Misure da prove/controllo_schermate.py. ---- */
.portale-testa small { font-size: 13px; }
.portale-testa a.esci { font-size: 14px; padding: 10px 12px; margin: -10px -12px -10px auto; }
.portale .avviso .meta,
.portale .evento .meta,
.portale .lista-semplice .d,
.portale .etichetta { font-size: 13px; }
.portale .etichetta { letter-spacing: .06em; }
.portale .sotto-saluto { font-size: 15px; }
.portale .btn.largo { height: 50px; font-size: 16px; }
.portale .btn.piccolo { height: 40px; font-size: 14px; padding: 0 14px; }
.portale .campo { min-height: 46px; font-size: 16px; }   /* 16px: sotto, iOS ingrandisce da solo */
.portale textarea.campo { min-height: 110px; }
.portale .pill, .portale .badge { font-size: 13px; padding: 4px 10px; }
.portale .azione-p { font-size: 15px; padding: 18px; }
.portale-nav a { font-size: 12px; padding: 6px 4px; min-height: 52px; justify-content: center; }
.portale .gruppo small { font-size: 13px; }