/* CRM di Beatrice: stessi colori e font del sito, pensato per lo schermo grande dello studio */
@font-face { font-family: "Source Sans 3"; font-weight: 200 900; font-display: swap; src: url(font/source-sans-3-latin.woff2) format("woff2"); }

:root {
  --bg: #f4f2ec; --surface: #fff; --sunk: #f1efe8; --ink: #1f2a1a; --ink2: #4d5648; --muted: #747b6e;
  --line: #e3e0d6; --green: #4f7a28; --green-dark: #3b5d1c; --green-soft: #e8f0d9;
  --peach-soft: #fbeee4; --terra: #c26a3e; --warn: #a8501c; --grey-soft: #ecebe6; --blue-soft: #e4ebf5;
  --r: 14px;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 16px/1.5 "Source Sans 3", system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
h1, h2, h3 { margin: 0; line-height: 1.2; letter-spacing: -0.01em; }
h1 { font-size: 30px; font-weight: 700; }
h2 { font-size: 19px; font-weight: 700; margin-bottom: 14px; }
h3 { font-size: 16px; font-weight: 700; }
p { margin: 0; }
a { color: var(--green); }
.muto { color: var(--muted); }
.piccolo { font-size: 14px; }
button, input, select, textarea { font: inherit; color: inherit; }

/* barra in alto */
.barra { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 28px; padding: 10px 28px; background: rgba(244, 242, 236, .94); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.marchio img { display: block; height: 32px; width: auto; }
.barra nav { display: flex; align-items: center; gap: 18px; }
.barra nav a { color: var(--ink2); text-decoration: none; font-weight: 600; }
.barra nav a.attivo { color: var(--ink); }
.barra nav a.btn { color: #fff; }
.esci { margin-left: auto; display: flex; gap: 12px; align-items: center; }

.pagina { max-width: 1320px; margin: 0 auto; padding: 26px 28px 80px; }
.avvisi { margin-bottom: 18px; }
.avviso { background: var(--green-soft); color: var(--green-dark); padding: 10px 16px; border-radius: 10px; font-weight: 600; }

/* bottoni */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; background: var(--green); color: #fff; border: 0; border-radius: 999px; padding: 11px 20px; font-weight: 700; text-decoration: none; cursor: pointer; }
.btn:hover { background: var(--green-dark); }
.btn.piccolo { padding: 7px 14px; font-size: 15px; }
.btn.secondario { background: var(--surface); color: var(--ink); border: 1.5px solid var(--line); }
.btn.secondario:hover { border-color: var(--green); }
.link { background: none; border: 0; padding: 0; color: var(--green); font-weight: 600; cursor: pointer; }
.link.rosso { color: var(--warn); }
:focus-visible { outline: 3px solid #e9a77f; outline-offset: 2px; }

/* moduli */
label { display: grid; gap: 5px; font-weight: 600; font-size: 14.5px; color: var(--ink2); }
input:not([type=checkbox]):not([type=radio]), select, textarea { width: 100%; border: 1.5px solid var(--line); border-radius: 10px; padding: 9px 11px; background: #fff; font-weight: 400; font-size: 16px; color: var(--ink); }
textarea { resize: vertical; min-height: 44px; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--green); outline-offset: 0; border-color: transparent; }
.due { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.azioni { display: flex; gap: 18px; align-items: center; margin-top: 6px; }
.spunta { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.spunta input { width: 18px; height: 18px; accent-color: var(--green); }
fieldset { border: 0; padding: 0; margin: 0; }
legend { font-weight: 700; font-size: 14.5px; color: var(--ink2); margin-bottom: 6px; padding: 0; }

.riquadro { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 22px 24px; }
.riquadro + .riquadro { margin-top: 16px; }
.riquadro.stretto { max-width: 420px; margin: 9vh auto 0; display: grid; gap: 16px; }
.riquadro.medio { max-width: 640px; margin: 0 auto; display: grid; gap: 16px; }
.logo-accesso { height: 44px; width: auto; justify-self: start; }
.qr { display: flex; justify-content: center; padding: 8px; background: #fff; }
.codice { font-size: 26px !important; letter-spacing: .3em; text-align: center; }
.accesso { padding: 0 16px; }

/* etichette di stato */
.stato { display: inline-block; font-size: 13px; font-weight: 700; padding: 2px 10px; border-radius: 99px; }
.stato.in_corso { background: var(--green-soft); color: var(--green-dark); }
.stato.terminato { background: var(--blue-soft); color: #2d4a73; }
.stato.droppato { background: var(--grey-soft); color: #5e625a; }
.etichetta { font-size: 12.5px; font-weight: 700; padding: 1px 8px; border-radius: 99px; }
.etichetta.grigia { background: var(--peach-soft); color: var(--warn); }
.attenzione { color: var(--warn); }

.banda { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; justify-content: space-between; background: var(--peach-soft); border-radius: var(--r); padding: 14px 20px; margin-bottom: 18px; color: var(--ink2); }
.banda b { color: var(--ink); }

/* elenco */
.testa-elenco { display: flex; justify-content: space-between; align-items: end; gap: 24px; flex-wrap: wrap; margin-bottom: 20px; }
.mese { display: flex; gap: 10px; }
.mese div { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 10px 16px; min-width: 120px; }
.mese b { display: block; font-size: 22px; }
.mese span { font-size: 13.5px; color: var(--muted); }
.filtri { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.schede-stato { display: flex; gap: 4px; background: var(--sunk); padding: 4px; border-radius: 12px; flex-wrap: wrap; }
.schede-stato a { padding: 7px 14px; border-radius: 9px; text-decoration: none; color: var(--ink2); font-weight: 600; }
.schede-stato a span { color: var(--muted); font-weight: 400; }
.schede-stato a.attivo { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgba(0,0,0,.06); }
.cerca input { width: 300px; }
.tabella { width: 100%; border-collapse: collapse; background: var(--surface); border-radius: var(--r); overflow: hidden; border: 1px solid var(--line); }
.tabella th { text-align: left; font-size: 13.5px; color: var(--muted); font-weight: 600; padding: 11px 16px; border-bottom: 1px solid var(--line); background: #fbfaf7; }
.tabella td { padding: 12px 16px; border-bottom: 1px solid var(--line); }
.tabella tbody tr { cursor: pointer; }
.tabella tbody tr:hover { background: #fafbf6; }
.tabella tr:last-child td { border-bottom: 0; }
.tabella td a { color: var(--ink); text-decoration: none; }
.num { text-align: right; font-variant-numeric: tabular-nums; }
.vuoto { text-align: center; padding: 60px 20px; color: var(--muted); display: grid; gap: 14px; justify-items: center; }

/* scheda */
.indietro { display: inline-block; margin-bottom: 10px; text-decoration: none; font-weight: 600; }
.testa-scheda { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 20px; }
.testa-scheda h1 span { font-weight: 400; }
.dati { display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: center; margin-top: 8px; color: var(--ink2); }
.riassunto { display: flex; gap: 10px; }
.riassunto div { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 10px 16px; }
.riassunto b { display: block; font-size: 22px; }
.riassunto span { font-size: 13.5px; }
.giu { color: var(--green); }
.su { color: var(--warn); }
.colonne { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 20px; align-items: start; }
.titolo-sezione { margin: 30px 0 12px; }
.promemoria { background: var(--green-soft); border-radius: 10px; padding: 12px 16px; margin-bottom: 18px; color: var(--green-dark); }
.promemoria p { white-space: pre-line; margin-top: 4px; color: var(--ink); }

.form-visita { display: grid; gap: 18px; }
.riga-visita { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; align-items: end; }
.riga-visita.pagamento { grid-template-columns: 130px 170px 1fr auto; }
.misure { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; }
.misure legend { grid-column: 1 / -1; }
.misura span, .euro { position: relative; display: block; }
.misura i, .euro i { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); font-style: normal; color: var(--muted); font-size: 14px; pointer-events: none; }
.misura input, .euro input { padding-right: 34px; text-align: right; font-variant-numeric: tabular-nums; }
.domande { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.domande .largo { grid-column: 1 / -1; }

.visita header { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.visita h3 .muto { font-weight: 400; }
.soldi { font-size: 14.5px; color: var(--ink2); }
.valori { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-bottom: 10px; color: var(--ink2); font-size: 15px; }
.visita dl { display: grid; grid-template-columns: 170px 1fr; gap: 6px 16px; margin: 0; }
.visita dt { color: var(--muted); font-size: 14.5px; }
.visita dd { margin: 0; white-space: pre-line; }
.modifica { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 10px; }
.modifica summary { cursor: pointer; color: var(--green); font-weight: 600; }
.modifica form { margin-top: 14px; }

.laterale .riquadro h3 { font-size: 14px; color: var(--muted); font-weight: 600; margin: 12px 0 2px; }
.grafico { width: 100%; height: auto; display: block; }
.grafico .griglia { stroke: #ecebe4; }
.grafico .asse { font-size: 12px; fill: var(--muted); font-family: inherit; }
.kcal b { font-size: 28px; }
.pre { white-space: pre-line; margin-top: 6px; }
details.riquadro > summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; }
details.riquadro > summary::-webkit-details-marker { display: none; }
details.riquadro > summary h2 { margin: 0; }
details.riquadro > summary::after { content: "›"; font-size: 22px; color: var(--muted); transition: transform .15s; }
details.riquadro[open] > summary::after { transform: rotate(90deg); }
details.riquadro[open] > summary { margin-bottom: 14px; }
.anagrafica, .stato-form { display: grid; gap: 12px; }
.scelte { display: flex; gap: 6px; flex-wrap: wrap; }
.scelta { display: block; }
.scelta input { position: absolute; opacity: 0; }
.scelta span { display: inline-block; padding: 7px 14px; border-radius: 99px; border: 1.5px solid var(--line); font-weight: 600; cursor: pointer; }
.scelta input:checked + span { background: var(--ink); color: #fff; border-color: var(--ink); }
.scelta input:focus-visible + span { outline: 3px solid #e9a77f; }
.registro ul { margin: 0; padding-left: 18px; font-size: 14.5px; display: grid; gap: 4px; }

@media (max-width: 1080px) {
  .colonne { grid-template-columns: 1fr; }
  .misure { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 680px) {
  .barra { padding: 10px 16px; gap: 14px; }
  .barra .muto, .barra nav a:not(.btn), .solo-largo { display: none; }
  .marchio img { height: 26px; }
  .pagina { padding: 18px 16px 60px; }
  .due, .domande, .riga-visita, .riga-visita.pagamento { grid-template-columns: 1fr; }
  .misure { grid-template-columns: repeat(2, 1fr); }
  .visita dl { grid-template-columns: 1fr; }
  .cerca input { width: 100%; }
  .cerca { width: 100%; }
  .mese div { min-width: 0; flex: 1; }
  .tabella th:nth-child(3), .tabella td:nth-child(3), .tabella th:nth-child(5), .tabella td:nth-child(5), .tabella th:nth-child(7), .tabella td:nth-child(7) { display: none; }
}

/* ---- piano alimentare ---- */
.pagina.larga { max-width: 1680px; }
.testa-piano { display: flex; justify-content: space-between; align-items: end; gap: 20px; flex-wrap: wrap; margin-bottom: 16px; }
.testa-piano h1 span { font-weight: 400; }
.testa-piano select { width: auto; padding: 2px 6px; font-size: 15px; }
.testa-piano .azioni form { margin: 0; }
.riepilogo-piano { display: grid; grid-template-columns: 1.2fr repeat(3, 1fr); gap: 14px 20px; align-items: start; margin-bottom: 16px; }
.riepilogo-piano > p { grid-column: 1 / -1; }
.kpi { position: relative; display: grid; gap: 2px; padding-bottom: 8px; }
.kpi b { font-size: 24px; }
.kpi span { font-size: 14px; color: var(--muted); }
.kpi em { font-style: normal; font-weight: 700; font-size: 14px; }
.kpi em.ok { color: var(--green); } .kpi em.fuori { color: var(--warn); }
.kpi i { position: absolute; left: 0; bottom: 0; height: 4px; border-radius: 4px; background: var(--green); }
.macro-c i { background: #d9a441; } .macro-p i { background: var(--terra); } .macro-g i { background: #8a9a5b; }
.area-piano { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 16px; align-items: start; }
.griglia-wrap { overflow-x: auto; }
.settimana { width: 100%; min-width: 900px; border-collapse: separate; border-spacing: 4px; table-layout: fixed; }
.settimana th { font-size: 13.5px; color: var(--muted); font-weight: 600; text-align: center; padding: 4px; }
.settimana tbody th { width: 92px; text-align: left; color: var(--ink); font-size: 14.5px; }
.settimana tbody th small { display: block; font-weight: 400; color: var(--muted); font-size: 12.5px; }
.settimana td { padding: 0; vertical-align: stretch; height: 1px; }
.cella { width: 100%; height: 100%; min-height: 74px; display: flex; flex-direction: column; justify-content: center; gap: 2px; text-align: center; background: var(--surface); border: 1.5px solid var(--line); border-radius: 10px; padding: 8px 6px; font-size: 13.5px; line-height: 1.3; cursor: pointer; color: var(--ink); }
.cella:hover { border-color: var(--green); }
.cella.scelta { border-color: var(--ink); box-shadow: 0 0 0 2px var(--ink) inset; }
.cella .vuota { color: #c3c6bb; font-size: 22px; }
.nota-giorno { min-height: 74px; height: 100%; font-size: 13.5px; }
.t-carne { background: #fbe3d6 !important; } .t-pesce { background: #dee9f6 !important; } .t-uova { background: #fdf2c9 !important; }
.t-legumi { background: #e3efd9 !important; } .t-formaggi { background: #ece4f4 !important; } .t-libero { background: #fbe8f3 !important; }
.legenda { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; font-size: 13px; }
.legenda span { padding: 2px 10px; border-radius: 99px; }
.pannello { position: sticky; top: 64px; max-height: calc(100vh - 80px); overflow-y: auto; }
.pannello header { display: flex; justify-content: space-between; align-items: baseline; }
.pannello h2 { margin-bottom: 4px; }
.stato-salvo { font-size: 13px; color: var(--muted); }
.valori-pasto { color: var(--ink2); margin-bottom: 12px; font-size: 15px; }
.gruppo-macro { border-top: 1px solid var(--line); padding: 10px 0; }
.gruppo-macro h3 { font-size: 13.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin-bottom: 6px; }
.m-carboidrati h3 { color: #a87a1f; } .m-proteine h3 { color: var(--terra); } .m-grassi h3 { color: #6b7a3c; } .m-verdura_frutta h3 { color: var(--green); }
.voce { display: grid; grid-template-columns: 1fr auto; gap: 4px 6px; padding: 8px; border-radius: 10px; background: var(--sunk); margin-bottom: 6px; }
.voce .etichetta { font-weight: 600; }
.voce .alimento { font-size: 14px; }
.voce .qta { display: flex; gap: 4px; }
.voce .quantita { width: 70px; text-align: right; }
.voce .unita { width: 74px; padding-left: 6px; padding-right: 2px; }
.voce .togli { grid-row: 1; grid-column: 2; border: 0; background: none; font-size: 20px; color: var(--muted); cursor: pointer; width: 32px; }
.voce .togli:hover { color: var(--warn); }
.voce .kcal-voce { grid-column: 1 / -1; color: var(--muted); font-size: 12.5px; min-height: 0; }
.voce input, .voce select { padding: 6px 8px; font-size: 14.5px; }
.voce .alimento { grid-column: 1; }
.voce .qta { grid-column: 2; grid-row: 2; }
.aggiungi { font-size: 14.5px; }
.strumenti { border-top: 1px solid var(--line); padding-top: 12px; display: grid; gap: 10px; }
.riga-strumento { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 14.5px; }
.riga-strumento > span:first-child { font-weight: 600; color: var(--ink2); min-width: 64px; }
.riga-strumento select, .riga-strumento input:not([type=checkbox]) { width: auto; flex: 1; min-width: 120px; padding: 6px 8px; font-size: 14.5px; }
.giorni-copia { display: flex; gap: 3px; }
.giorni-copia label { display: block; }
.giorni-copia input { position: absolute; opacity: 0; }
.giorni-copia span { display: inline-block; width: 30px; text-align: center; padding: 4px 0; border-radius: 8px; border: 1.5px solid var(--line); font-weight: 600; cursor: pointer; font-size: 13px; }
.giorni-copia input:checked + span { background: var(--ink); color: #fff; border-color: var(--ink); }
.giorni-copia .questo span { background: var(--green-soft); border-color: var(--green-soft); cursor: default; }
.azioni-pasto { justify-content: space-between; }
.intestazione-piano { margin-top: 16px; }
.elimina-piano { margin-top: 14px; }
.piani-paziente { display: grid; gap: 8px; margin-top: 10px; }
.piani-paziente form { margin: 0; }
@media (max-width: 1200px) { .area-piano { grid-template-columns: 1fr; } .pannello { position: static; max-height: none; } .riepilogo-piano { grid-template-columns: 1fr 1fr; } }
/* le regole generali sugli input hanno specificità (0,2,1): qui serve almeno altrettanto */
.voce { grid-template-columns: minmax(0, 1fr) 150px; }
.voce input.etichetta, .voce input.alimento { width: 100%; min-width: 0; }
.voce .qta { width: 150px; }
.voce .qta input.quantita { width: 64px; flex: none; }
.voce .qta select.unita { width: auto; flex: 1; min-width: 0; }
.voce button.togli { justify-self: end; }

/* ---- lavagna ---- */
.stato.contatto { background: var(--peach-soft); color: var(--warn); }
.area-lavagna { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 16px; align-items: start; }
.lavagna { display: grid; grid-template-columns: repeat(5, minmax(190px, 1fr)); gap: 12px; overflow-x: auto; padding-bottom: 6px; }
.colonna { background: var(--sunk); border-radius: var(--r); padding: 12px; display: flex; flex-direction: column; gap: 8px; min-height: 160px; }
.colonna h2 { font-size: 15px; margin: 2px 2px 4px; display: flex; justify-content: space-between; }
.colonna h2 span { color: var(--muted); font-weight: 600; }
.c-rischio { background: #f8ece4; }
.persona { display: grid; gap: 3px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; text-decoration: none; color: var(--ink); }
.persona:hover { border-color: var(--green); }
.persona .prossimo { font-size: 14px; color: var(--ink2); }
.etichette { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; }
.tag { font-style: normal; font-size: 12px; font-weight: 600; padding: 1px 8px; border-radius: 99px; background: var(--grey-soft); color: #5e625a; }
.tag.caldo { background: #fbe0d2; color: var(--warn); }
.tag.attesa { background: #fdf2c9; color: #7a5b10; }
.vuota-col { color: var(--muted); font-size: 14px; text-align: center; padding: 10px 0; }
.aggiungi-col { font-size: 14.5px; text-align: center; margin-top: 2px; }
.agenda-settimana h3 { font-size: 13.5px; color: var(--muted); font-weight: 600; margin: 14px 0 6px; text-transform: capitalize; }
.agenda-settimana h3:first-of-type { margin-top: 0; }
.app { display: grid; grid-template-columns: 48px 1fr; gap: 8px; padding: 8px 10px; border-radius: 10px; text-decoration: none; color: var(--ink); }
.app:hover { background: var(--sunk); }
.app.oggi { background: var(--green-soft); }
.app span small { display: block; color: var(--muted); font-size: 13px; }
.conclusi { margin-top: 16px; border-top: 1px solid var(--line); padding-top: 12px; }
.agenda-scheda .app-fissato { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; padding: 8px 10px; background: var(--green-soft); border-radius: 10px; margin-bottom: 8px; }
.agenda-scheda .app-fissato small { display: block; color: var(--ink2); }
.agenda-scheda details { margin: 8px 0 12px; }
.agenda-scheda summary { cursor: pointer; list-style: none; }
.agenda-scheda summary::-webkit-details-marker { display: none; }
.fissa, .prossimo-form { display: grid; gap: 10px; margin-top: 10px; }
.riga-input { display: flex; gap: 6px; }
.spazio { margin: -8px 0 14px; }
@media (max-width: 1200px) { .area-lavagna { grid-template-columns: 1fr; } }

.striscia-demo { background: #1f2a1a; color: #e9ecdf; text-align: center; font-size: 14px; padding: 6px 16px; }

/* ---- scheda paziente (dal prototipo di ottobre, mockup/scheda-paziente.html) ---- */
html { scroll-behavior: smooth; scroll-padding-top: 120px; }
.scheda-v { max-width: 1240px; font-variant-numeric: tabular-nums; }
.scheda-v h2 { font-size: 22px; margin: 0; }
.scheda-v h3 { font-size: 16px; font-weight: 700; margin-bottom: 4px; }
.salti { position: sticky; top: 53px; z-index: 4; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 8px 12px; margin-bottom: 22px; }
.salti a { color: var(--ink2); text-decoration: none; font-weight: 600; font-size: 15px; padding: 5px 10px; border-radius: 8px; }
.salti a:hover { background: var(--sunk); color: var(--ink); }
.salti a.indietro { color: var(--muted); margin: 0 6px 0 0; }
.salti a.btn { color: #fff; margin-left: auto; }
.switch { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 15px; cursor: pointer; white-space: nowrap; color: var(--ink2); }
.switch input { appearance: none; width: 42px; height: 24px; border-radius: 99px; background: #cfccc0; position: relative; cursor: pointer; margin: 0; transition: background .15s; }
.switch input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform .15s; }
.switch input:checked { background: var(--green); }
.switch input:checked::after { transform: translateX(18px); }
body.vista-paziente .solo-bea { display: none !important; }

.who { display: grid; grid-template-columns: 1fr auto; gap: 20px; align-items: start; margin-bottom: 8px; }
.who .meta { display: flex; flex-wrap: wrap; gap: 6px 22px; margin-top: 8px; color: var(--ink2); }
.who .meta b { color: var(--ink); }
.who .meta a { color: inherit; }
.flags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.chip { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 99px; font-size: 13.5px; font-weight: 600; background: var(--sunk); color: var(--ink2); white-space: nowrap; text-decoration: none; }
.chip.flag { background: #fdf0d2; color: #7a4a06; }
.chip.ok { background: var(--green-soft); color: #36561a; }
.tiles { display: flex; gap: 26px; }
.tile b { display: block; font-size: 26px; line-height: 1.1; }
.tile span { font-size: 13.5px; color: var(--muted); }
.tile em, .now em { font-style: normal; font-size: 13.5px; font-weight: 600; }
em.down { color: var(--green); } em.up { color: var(--warn); } em.flat { color: var(--muted); }

.scheda-v section { margin-top: 36px; }
.sez { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 14px; flex-wrap: wrap; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 20px 22px; }
.card + .card { margin-top: 16px; }
.spazio-sotto { margin: 0 0 10px; }
.nero { color: var(--ink); }
.scorri { overflow-x: auto; }

.today { display: grid; grid-template-columns: 1.35fr 1fr; gap: 18px; align-items: start; }
.fields { display: grid; gap: 16px; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.tre { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
label.lbl, .lbl { display: block; font-weight: 600; font-size: 14.5px; margin-bottom: 6px; color: var(--ink2); }
.colonna-destra { display: grid; gap: 16px; }
.colonna-destra .card + .card { margin-top: 0; }
.btn.grande { padding: 14px 22px; font-size: 17px; }
.newgoal { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.goal-list { margin: 8px 0 0; padding-left: 22px; }
.goal-list li { padding: 4px 0; }
.goal-list li button { margin-left: 8px; font-size: 18px; }
.goal-row { padding: 10px 0; border-top: 1px solid var(--line); display: grid; gap: 8px; }
.goal-row:first-of-type { border-top: 0; }
.esiti { display: flex; gap: 6px; flex-wrap: wrap; }
.esito input { position: absolute; opacity: 0; }
.esito span { display: inline-block; padding: 4px 12px; border-radius: 99px; border: 1.5px solid var(--line); font-weight: 600; font-size: 14px; cursor: pointer; }
.esito input:focus-visible + span { outline: 3px solid #e9a77f; }
.e-fatto input:checked + span { background: var(--green); border-color: var(--green); color: #fff; }
.e-in_parte input:checked + span { background: #d9a441; border-color: #d9a441; color: #fff; }
.e-non_fatto input:checked + span { background: var(--warn); border-color: var(--warn); color: #fff; }
.riproponi { display: none !important; font-size: 14px; color: var(--green-dark); }
.goal-row.da-riproporre .riproponi { display: flex !important; align-items: center; gap: 8px; }
.riproponi input { width: 18px; height: 18px; accent-color: var(--green); }
.meas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.meas .lbl { font-size: 14px; white-space: nowrap; margin-bottom: 4px; }
.meas input { text-align: right; }
.meas .d { font-size: 13.5px; margin-top: 3px; font-weight: 600; min-height: 1.4em; }
.d.down { color: var(--green); } .d.up { color: var(--warn); } .d.flat { color: var(--muted); }

.charts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.charts .card + .card { margin-top: 0; }
.chart h3 small { font-weight: 400; color: var(--muted); font-size: 13.5px; }
.chart .now { font-size: 26px; font-weight: 700; line-height: 1.2; margin: 2px 0 4px; }
.chart .now small { font-size: 14px; font-weight: 600; margin: 0 8px 0 4px; color: var(--ink2); }
.circ-pick { display: flex; flex-wrap: wrap; gap: 4px; margin: 6px 0 2px; }
.circ-pick button { border: 1.5px solid var(--line); background: #fff; border-radius: 99px; padding: 2px 9px; font-size: 13px; color: var(--ink2); cursor: pointer; }
.circ-pick button[aria-pressed="true"] { background: var(--c); border-color: var(--c); color: #fff; }
.tabella-misure { margin-top: 16px; }
.tabella-misure summary, details.modifica summary, .registro summary { cursor: pointer; color: var(--green); font-weight: 600; }
table.data { width: 100%; border-collapse: collapse; margin-top: 10px; font-size: 15px; }
table.data th, table.data td { text-align: right; padding: 7px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; }
table.data th:first-child, table.data td:first-child { text-align: left; white-space: normal; }
table.data th { font-weight: 600; color: var(--ink2); }

.plan-head { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-bottom: 10px; }
.seg { display: inline-flex; background: var(--sunk); border-radius: 10px; padding: 3px; }
.seg button { border: 0; background: none; padding: 6px 14px; border-radius: 8px; font-weight: 600; color: var(--ink2); cursor: pointer; }
.seg button[aria-pressed="true"] { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgba(31,42,26,.14); }
.budget { margin-left: auto; min-width: 300px; }
.budget .row { display: flex; justify-content: space-between; gap: 10px; font-size: 14.5px; }
.budget .row.macro { color: var(--ink2); margin-top: 6px; }
.budget .track { height: 8px; border-radius: 99px; background: var(--sunk); overflow: hidden; margin-top: 6px; }
.budget .track i { display: block; height: 100%; background: var(--green); }
.prefs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.giorni-piano { display: flex; gap: 4px; flex-wrap: wrap; margin: 6px 0 4px; }
.giorni-piano button { border: 1.5px solid var(--line); background: #fff; border-radius: 99px; padding: 4px 12px; font-weight: 600; cursor: pointer; }
.giorni-piano button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.fascia { display: grid; grid-template-columns: 170px 1fr; gap: 22px; padding: 16px 0; border-top: 1px solid var(--line); }
.fascia:first-child { border-top: 0; }
.fascia .name { font-size: 19px; font-weight: 700; }
.fascia .kc { margin-top: 6px; font-size: 14.5px; color: var(--ink2); font-weight: 600; }
.item { display: grid; grid-template-columns: 76px 74px 30px 1fr auto auto; gap: 10px; align-items: center; padding: 4px 0; }
.item .mt2 { font-size: 12.5px; font-weight: 600; color: var(--ink2); background: var(--sunk); border-radius: 99px; padding: 1px 9px; text-align: center; }
.item input.q { padding: 6px 8px; text-align: right; font-weight: 600; }
.item .u { color: var(--muted); }
.item .food { font-size: 16.5px; }
.item .rk { font-size: 14.5px; color: var(--ink2); min-width: 70px; text-align: right; }
.item .x { border: 0; background: none; color: var(--muted); font-size: 20px; line-height: 1; padding: 2px 6px; border-radius: 6px; cursor: pointer; }
.item .x:hover { background: var(--peach-soft); color: var(--warn); }
body.vista-paziente .item { grid-template-columns: 76px 74px 30px 1fr; }
.alt { display: flex; align-items: center; gap: 8px; margin-top: 8px; padding: 6px 12px; background: var(--sunk); border-radius: 10px; font-size: 15.5px; color: var(--ink2); font-weight: 400; }
.alt b { color: var(--ink); }
.alt input { border: 0 !important; background: transparent !important; padding: 4px 0 !important; }
.libero-p { background: #fbe8f3; border-radius: 10px; padding: 10px 14px; margin: 0; }
table.ptable { width: 100%; min-width: 760px; border-collapse: collapse; margin-top: 10px; table-layout: fixed; }
table.ptable th { font-size: 15px; padding: 8px 6px; border: 1px solid var(--line); }
table.ptable td { padding: 8px; border: 1px solid var(--line); text-align: center; font-size: 14.5px; line-height: 1.35; }
table.ptable td.day { width: 100px; }
.azioni-piano { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.azioni-piano form { margin: 0; }
.g-row { display: flex; gap: 12px; align-items: end; flex-wrap: wrap; margin-bottom: 8px; }
.g-row .corto { width: 120px; }
.g-row .largo { flex: 1; min-width: 220px; }
.var { display: grid; grid-template-columns: 110px 150px 1fr; gap: 14px; padding: 9px 0; border-top: 1px solid var(--line); align-items: baseline; }
.var .k { font-weight: 700; }

.ph-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 8px 0 18px; }
.ph { display: grid; gap: 6px; }
.ph-nome { font-weight: 600; font-size: 14px; color: var(--ink2); }
.ph img, .due-foto img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 12px; background: var(--sunk); }
.vuota-foto { position: relative; overflow: hidden; aspect-ratio: 3 / 4; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; border: 2px dashed var(--line); border-radius: 12px; color: var(--muted); font-size: 32px; cursor: pointer; }
.vuota-foto span { font-size: 14px; font-weight: 600; }
.vuota-foto:hover { border-color: var(--green); color: var(--green); }
.vuota-foto input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.due-foto { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.due-foto figure { margin: 0; }
.due-foto figcaption { font-size: 13px; color: var(--muted); text-align: center; margin-top: 4px; }
.manca { aspect-ratio: 3 / 4; display: flex; align-items: center; justify-content: center; text-align: center; background: var(--sunk); border-radius: 12px; color: var(--muted); font-size: 13.5px; padding: 8px; }
.nota-foto { margin-top: 6px; }
form.inline { display: inline; }

.visit { display: grid; grid-template-columns: 170px 1fr; gap: 22px; padding: 18px 0; border-top: 1px solid var(--line); }
.visit:first-child { border-top: 0; padding-top: 0; }
.visit .date { font-weight: 700; font-size: 17px; }
.visit dl { margin: 0; display: grid; grid-template-columns: 180px 1fr; gap: 6px 16px; }
.visit dt { color: var(--muted); font-size: 14.5px; }
.visit dd { margin: 0; white-space: pre-line; }
.obiettivi-storico { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.obiettivi-storico li { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.esito-mini { margin: 0; }
.pill { font-size: 13px !important; font-weight: 700; padding: 2px 10px !important; border-radius: 99px !important; border: 0 !important; width: auto !important; background: var(--sunk); color: var(--ink2); }
.pill.p-fatto { background: var(--green-soft); color: #36561a; }
.pill.p-in_parte { background: #fdf0d2; color: #7a5b10; }
.pill.p-non_fatto { background: var(--peach-soft); color: var(--warn); }
.form-modifica { display: grid; gap: 12px; margin-top: 12px; }
.corto-l { max-width: 220px; }
.ob-tempo table td:nth-child(2), .ob-tempo table th:nth-child(2) { text-align: left; }
.ans { display: grid; grid-template-columns: 180px 1fr; gap: 12px; padding: 8px 0; border-top: 1px solid var(--line); }
.ans:first-child { border-top: 0; }
.ans span:first-child { color: var(--muted); }
details.modifica { margin-top: 12px; }

.griglia-dati { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.griglia-dati .card + .card { margin-top: 0; }
.griglia-dati .largo-2 { grid-column: 1 / -1; }
.griglia-dati .registro { margin-top: 14px; }

@media (max-width: 1000px) {
  .today, .who, .two, .tre, .griglia-dati { grid-template-columns: 1fr; }
  .charts { grid-template-columns: 1fr 1fr; }
  .fascia, .visit { grid-template-columns: 1fr; gap: 8px; }
  .visit dl, .ans, .var { grid-template-columns: 1fr; gap: 2px; }
  .item { grid-template-columns: 70px 28px 1fr auto auto; }
  .item .mt2 { display: none; }
  .budget { margin-left: 0; min-width: 0; width: 100%; }
  .salti { top: 50px; }
  .salti a.btn { margin-left: 0; }
}
@media (max-width: 680px) {
  .salti { position: static; }
  .meas { grid-template-columns: repeat(2, 1fr); }
  .ph-grid { grid-template-columns: 1fr; }
  .charts { grid-template-columns: 1fr; }
  .chart svg { max-width: 460px; }
  .tiles { gap: 18px; }
}

/* questionario del paziente: si compila dal telefono, una colonna sola */
.questionario-paz { max-width: 720px; margin: 0 auto; padding: 20px 16px 64px; }
.q-modulo { display: grid; gap: 16px; }
.q-testa { padding: 8px 4px 4px; display: grid; gap: 10px; }
.q-logo { height: 40px; width: auto; justify-self: start; }
.q-testa h1 { font-size: 28px; margin-top: 10px; }
.q-testa p { font-size: 17px; color: var(--ink2); }
.q-testa .q-note { font-size: 15px; color: var(--muted); }
.q-sez { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 20px 20px 22px; }
.q-sez h2 { font-size: 21px; margin-bottom: 6px; }
.q-intro { color: var(--muted); font-size: 15px; margin-bottom: 4px; }
.q-griglia { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 14px; margin-top: 14px; }
.q-campo { grid-column: 1 / -1; }
.q-campo.mezza { grid-column: auto; }
.q-campo[hidden], .q-sez[hidden] { display: none; }
.q-campo label, .q-campo legend { font-size: 15.5px; color: var(--ink); }
.q-campo small { display: block; font-weight: 400; color: var(--muted); font-size: 14px; margin-top: 4px; }
.q-obbl { color: var(--terra); }
.q-scelte { display: flex; flex-wrap: wrap; gap: 8px; }
.q-op { display: block; font-weight: 400; }
.q-op input { position: absolute; opacity: 0; pointer-events: none; }
.q-op span { display: inline-block; padding: 8px 14px; border: 1.5px solid var(--line); border-radius: 999px; background: #fff; cursor: pointer; font-size: 15.5px; color: var(--ink); }
.q-op input:checked + span { background: var(--green-soft); border-color: var(--green); color: var(--green-dark); font-weight: 700; }
.q-op input:focus-visible + span { outline: 3px solid #e9a77f; outline-offset: 2px; }
.q-pasti { display: grid; gap: 12px; }
.q-pasto { background: var(--sunk); border-radius: 12px; padding: 12px; display: grid; gap: 8px; }
.q-pasto-testa { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.q-pasto-testa label { display: flex; align-items: center; gap: 8px; font-weight: 400; color: var(--muted); }
.q-pasto-testa input { width: 116px !important; padding: 6px 8px !important; }
.q-freq { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px 12px; }
.q-freq label { grid-template-columns: 1fr 72px; align-items: center; font-weight: 400; color: var(--ink); }
.q-freq input { text-align: center; }
.q-privacy p { font-size: 14.5px; color: var(--ink2); margin: 6px 0 14px; }
.q-consenso { align-items: flex-start; font-size: 15.5px; color: var(--ink); }
.q-consenso input { margin-top: 3px; flex: none; }
.q-invia { display: grid; gap: 8px; justify-items: start; padding: 0 4px; }
.q-invia .btn { font-size: 17px; padding: 13px 26px; }
.q-errori { background: var(--peach-soft); color: var(--warn); border-radius: var(--r); padding: 14px 20px; }
.q-errori ul { margin: 6px 0 0; padding-left: 20px; }
.q-manca input, .q-manca textarea { border-color: var(--terra) !important; }
.q-manca.q-consenso span { color: var(--warn); }
.q-fine { display: grid; gap: 12px; margin-top: 6vh; }
.q-fine h1 { font-size: 26px; margin-top: 8px; }
@media (max-width: 560px) {
  .q-griglia { grid-template-columns: 1fr; }
  .q-campo.mezza { grid-column: 1 / -1; }
  .q-sez { padding: 18px 16px 20px; }
}

/* questionario nella scheda: link da mandare e tutte le risposte */
.q-link { display: grid; gap: 10px; background: var(--sunk); border-radius: 12px; padding: 14px 16px; margin-bottom: 14px; }
.q-link .riga-input { display: flex; gap: 8px; flex-wrap: wrap; }
.q-link .riga-input input { flex: 1 1 280px; font-size: 14px; }
.q-link .azioni-link { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.q-risposte h4 { margin: 18px 0 4px; font-size: 15px; color: var(--green-dark); }
.q-risposte .ans span:last-child { white-space: pre-line; }
.ans span:last-child { white-space: pre-line; }
.tag.fatto { background: var(--green-soft); color: var(--green-dark); }
.q-anteprima { background: #fdf2c9; color: #5c450c; border-radius: 12px; padding: 12px 16px; font-size: 15px; }
.q-risposte .flags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }