/*
 * «Prevenire per te» sul computer e sul tablet (da 768 px in su).
 *
 * Sotto i 768 px (telefono) questo foglio non vale: il layout lo carica con
 * media="(min-width: 768px)" e OGNI regola sta dentro una media query con
 * min-width (ComputerPerTeStileTest). Il telefono resta identico a prima.
 *
 * - 768-1023 px (tablet): la colonna dell'app larga 720 px, con la barra in
 *   basso larga quanto lei.
 * - da 1024 px (computer): la barra diventa una colonna a sinistra (marchio,
 *   Casa, Visite, Aria, Famiglia, Io, poi Messaggi e Avvisi con i numeri da
 *   leggere; niente 112 fisso dal 22/10/2026: lo apre Io → «Aiuto e numeri
 *   utili»); il contenuto
 *   largo fino a 1120 px per le pagine con griglie (Casa, valori, Visite,
 *   Aria, Famiglia, Io, Prevenzione...) e una colonna di 640 px per le altre
 *   (moduli, elenchi); le pagine senza barra (ingresso, primi passi) in una
 *   scheda di 560 px al centro; i fogli che sul telefono salgono dal basso
 *   diventano finestre centrate; passaggio del mouse e fuoco visibili.
 * - Le pagine si riconoscono da body[data-rotta] (il nome della rotta, scritto
 *   dal layout). Nessuna vista dei moduli cambia: solo queste regole.
 * - Colori solo dalle variabili di base.css (notte e giorno, contrasti AA);
 *   misure in rem dove conta il testo («Testo grande» ingrandisce tutto).
 */

/* =========================================================================
   Da 768 px: cio' che vale per tablet e computer
   ========================================================================= */
@media screen and (min-width: 768px) {
  /* Le pagine senza barra (ingresso, primi passi): una colonna di 560 px. */
  body.pt-corpo:not(.pt-con-barra) .pt-colonna { max-width: 560px; }
  body.pt-corpo:not(.pt-con-barra) .pt-banda.e-admin,
  body.pt-corpo:not(.pt-con-barra) .pt-banda.e-rete { max-width: 560px; }
  body.pt-corpo:not(.pt-con-barra):not([data-rotta^="per-te.aria"]) .pt-contenuto { padding-left: 28px; padding-right: 28px; }
  /* I testi legali si leggono meglio un po' piu' larghi. */
  body.pt-corpo:not(.pt-con-barra):is([data-rotta="per-te.termini"], [data-rotta="per-te.privacy"], [data-rotta="per-te.consensi.testo"], [data-rotta="per-te.cancella-account"]) .pt-colonna { max-width: 720px; }
}

@media screen and (min-width: 768px) and (hover: hover) {
  /* Mouse: chi passa sopra vede che si puo' toccare. */
  .pt-voci > a.pt-voce:hover { color: var(--pt-link); }
  .pt-voci > a.pt-voce:hover .pt-voce-valore { color: var(--pt-link); }
  .pt-btn-fantasma:hover { background: var(--pt-incavo); }
  .pt-btn-testo:hover { text-decoration: underline; }
  .pt-chip:hover { border-color: var(--pt-fantasma-bordo); }
  a.pt-scheda:hover { box-shadow: 0 0 0 1px var(--pt-bordo-forte); }
}

/* =========================================================================
   768-1023 px: tablet, una colonna piu' larga con la barra in basso
   ========================================================================= */
@media screen and (min-width: 768px) and (max-width: 1023.98px) {
  body.pt-con-barra .pt-colonna { max-width: 720px; }
  body.pt-con-barra .pt-basso { left: calc(50% - 360px); width: 720px; }
  body.pt-con-barra .pt-banda.e-admin,
  body.pt-con-barra .pt-banda.e-rete { max-width: 720px; }
  body.pt-con-barra .pt-contenuto { padding-left: 32px; padding-right: 32px; gap: 14px; }
  body.pt-con-barra .pt-barra { max-width: 560px; margin-left: auto; margin-right: auto; }
  /* La conversazione con un medico (pagina senza barra) larga quanto le altre pagine. */
  body.pt-corpo[data-rotta="per-te.messaggi.conversazione"] .pt-colonna { max-width: 720px; }
  body.pt-corpo[data-rotta="per-te.messaggi.conversazione"] .ms-scrivi { left: calc(50% - 360px); width: 720px; }
  /* I fogli dal basso: larghi quanto un modulo. */
  dialog.pt-foglio { max-width: 600px; }
}

/* =========================================================================
   Da 1024 px: il computer
   ========================================================================= */
@media screen and (min-width: 1024px) {
  body.pt-corpo { --pt-lato: 232px; --pt-lato-aria: 240px; }

  /* ---- La colonna del contenuto, a destra della barra -------------------- */
  body.pt-con-barra { background: var(--pt-pagina); }
  body.pt-con-barra .pt-colonna {
    width: auto; max-width: none; margin: 0 0 0 var(--pt-lato); box-shadow: none;
    background-size: 100% 520px;
  }
  body.pt-con-barra .pt-contenuto {
    max-width: 720px; margin: 0 auto; gap: 16px;
    padding: 36px 32px 64px;
  }
  /* Le pagine con le griglie: fino a 1120 px. */
  body.pt-con-barra:is(
    [data-rotta="per-te.casa"], [data-rotta="per-te.valori"], [data-rotta="per-te.valori.andamento"],
    [data-rotta="per-te.sonno"], [data-rotta="per-te.passi"], [data-rotta="per-te.visite"],
    [data-rotta="per-te.aria"], [data-rotta="per-te.famiglia"], [data-rotta="per-te.albero"],
    [data-rotta="per-te.io"], [data-rotta="per-te.prevenzione"],
    [data-rotta="per-te.storia"], [data-rotta="per-te.medicine"]
  ) .pt-contenuto { max-width: 1120px; }

  body.pt-con-barra .pt-banda.e-admin,
  body.pt-con-barra .pt-banda.e-rete { max-width: none; margin-left: var(--pt-lato); }

  /* ---- La barra a sinistra ------------------------------------------------ */
  body.pt-con-barra .pt-basso {
    top: 0; bottom: 0; left: 0; right: auto; width: var(--pt-lato);
    display: flex; flex-direction: column; gap: 16px;
    padding: 24px 16px 20px;
    background: var(--pt-barra-fondo);
    border-right: 1px solid var(--pt-bordo);
    overflow-y: auto; overscroll-behavior: contain;
  }
  body.pt-con-barra .pt-basso::before { display: none; }
  /* Sul computer non c'e' la tastiera del telefono: la barra resta. */
  html.tel-tastiera body.pt-con-barra .pt-basso { display: flex; }

  body.pt-con-barra .pt-barra {
    flex: 1 0 auto; display: flex; flex-direction: column; gap: 22px;
    margin: 0; border: 0; border-radius: 0; background: none; box-shadow: none;
  }
  .pt-barra-marchio[hidden] {
    display: flex !important; align-items: center; gap: 10px;
    margin: 0; padding: 2px 8px;
    font-size: 1.0625rem; font-weight: 800; letter-spacing: -.01em; line-height: 1.2; color: var(--pt-testo);
  }
  .pt-barra-marchio-segno { width: 36px; height: 36px; border-radius: 10px; flex-shrink: 0; display: block; }
  /* Con «Testo grande» va a capo «Prevenire / per te», non «Prevenire per / te». */
  .pt-barra-marchio > span { text-wrap: balance; }
  body.pt-con-barra .pt-barra-elenco {
    flex-direction: column; align-items: stretch; justify-content: flex-start;
    min-height: 0; padding: 0; gap: 4px;
  }
  body.pt-con-barra .pt-barra-voce { flex: none; display: block; }
  body.pt-con-barra .pt-barra-voce.e-computer[hidden] { display: block !important; }
  body.pt-con-barra .pt-barra-voce.e-messaggi { margin-top: 10px; padding-top: 14px; border-top: 1px solid var(--pt-riga); }
  body.pt-con-barra .pt-barra-link {
    flex-direction: row; justify-content: flex-start; align-items: center; gap: 12px;
    width: 100%; min-width: 0; min-height: 48px; padding: 8px 12px; border-radius: 14px;
    font-size: .9375rem; font-weight: 600; line-height: 1.25; color: var(--pt-tenue);
  }
  body.pt-con-barra .pt-barra-icona { width: 32px; height: 32px; flex-shrink: 0; }
  body.pt-con-barra .pt-barra-parola { min-width: 0; overflow-wrap: anywhere; }
  body.pt-con-barra .pt-barra-voce.e-attiva .pt-barra-link {
    color: var(--pt-testo);
    background: color-mix(in srgb, var(--pt-accento) 14%, transparent);
    box-shadow: inset 3px 0 0 var(--pt-accento);
  }
  body.pt-con-barra .pt-barra-voce.e-attiva .pt-barra-icona { color: var(--pt-accento); }
  body.pt-con-barra .pt-barra-link .pt-bollo { position: static; margin-left: auto; min-width: 24px; height: 22px; padding: 0 7px; font-size: .75rem; }
  /* Casa somma messaggi e avvisi: qui hanno le loro voci, con il loro numero. */
  body.pt-con-barra .pt-barra-voce.e-casa .pt-bollo { display: none; }
  /* In Messaggi e Avvisi e' accesa la loro voce, non Casa (che sul telefono le contiene). */
  body.pt-con-barra .pt-barra-elenco:has(.e-computer.e-attiva) .pt-barra-voce.e-casa.e-attiva .pt-barra-link { background: none; box-shadow: none; color: var(--pt-tenue); }
  body.pt-con-barra .pt-barra-elenco:has(.e-computer.e-attiva) .pt-barra-voce.e-casa.e-attiva .pt-barra-icona { color: inherit; }
  body.pt-con-barra .pt-barra-nota { margin-left: auto; }

  /* Aria: lo stesso viola del telefono, in piccolo, senza sporgere. */
  body.pt-con-barra .pt-barra-voce.e-aria .pt-barra-link { color: var(--pt-aria-testo); }
  body.pt-con-barra .pt-barra-voce.e-aria .pt-barra-icona {
    width: 32px; height: 32px; margin: 0;
    box-shadow: 0 0 14px rgba(168, 85, 247, .4);
  }
  body.pt-con-barra .pt-barra-voce.e-aria .pt-barra-icona svg { width: 18px; height: 18px; }
  body.pt-con-barra .pt-barra-voce.e-aria.e-attiva .pt-barra-link {
    background: color-mix(in srgb, var(--pt-aria) 16%, transparent);
    box-shadow: inset 3px 0 0 var(--pt-aria);
  }
  body.pt-con-barra .pt-barra-voce.e-aria.e-attiva .pt-barra-icona { box-shadow: 0 0 0 2px var(--pt-barra-fondo), 0 0 0 4px rgba(168, 85, 247, .7); }
  body.pt-con-barra .pt-barra-voce.e-aria .pt-barra-link.e-spenta .pt-barra-icona { box-shadow: none; }

  /* Gli avvisi brevi sopra il contenuto, non sotto la barra. */
  body.pt-con-barra .pt-avviso-breve { left: calc(var(--pt-lato) + 24px); right: 24px; bottom: 24px; }

  /* ---- Fogli: finestre centrate ------------------------------------------- */
  dialog.pt-foglio {
    top: 0; bottom: 0; left: 0; right: 0; margin: auto;
    width: calc(100% - 48px); max-width: 560px; height: fit-content; max-height: min(88vh, 860px);
    padding: 28px 28px 22px; border-radius: 24px;
    border: 1px solid var(--pt-bordo);
    box-shadow: 0 30px 80px rgba(2, 6, 23, .55);
  }
  dialog.pt-foglio[open] { animation: pt-compare .16s ease-out; }
  .pt-foglio-maniglia { display: none; }
  @keyframes pt-compare { from { transform: translateY(10px) scale(.985); opacity: 0; } to { transform: none; opacity: 1; } }

  /* ---- Intestazione delle pagine ----------------------------------------- */
  body.pt-con-barra .pt-titolo { font-size: 2rem; }
  body.pt-con-barra .pt-saluto-nome { font-size: 2.25rem; }
}

@media screen and (min-width: 1024px) and (hover: hover) {
  body.pt-con-barra .pt-barra-link:hover { background: var(--pt-incavo); color: var(--pt-testo); }
  body.pt-con-barra .pt-barra-voce.e-aria .pt-barra-link:hover { color: var(--pt-aria-testo); }
  body.pt-con-barra .pt-scorciatoia:hover { border-color: var(--pt-bordo-forte); background: var(--pt-carta); }
  body.pt-con-barra .ar-azione:hover { background: var(--pt-carta); }
  /* Il titolo che riceve il fuoco all'apertura non si cerchia: ora vale ovunque
     (base.css, «:is(h1, h2)[tabindex="-1"]:focus»), anche sul telefono. */
}

@media screen and (min-width: 1280px) {
  body.pt-corpo { --pt-lato: 256px; --pt-lato-aria: 280px; }
  body.pt-con-barra .pt-contenuto { padding-left: 40px; padding-right: 40px; }
}

@media screen and (min-width: 1440px) {
  body.pt-corpo { --pt-lato: 272px; }
}

/* =========================================================================
   Da 1024 px: le pagine
   ========================================================================= */
@media screen and (min-width: 1024px) {
  /* ---- Ingresso e primi passi (pagine senza barra): una scheda al centro --- */
  body.pt-corpo:not(.pt-con-barra):is([data-rotta="per-te.benvenuto"], [data-rotta="per-te.entra"], [data-rotta="per-te.entra.chi"],
    [data-rotta="per-te.iscrizione"], [data-rotta="per-te.iniziamo"], [data-rotta="per-te.iniziamo.di-te"]) .pt-colonna {
    min-height: calc(100vh - 96px); min-height: calc(100dvh - 96px);
    margin-top: 40px; margin-bottom: 48px; border-radius: 28px;
  }

  /* ---- Messaggi: la conversazione larga 760 px (pagina senza barra) ------- */
  body.pt-corpo[data-rotta="per-te.messaggi.conversazione"] .pt-colonna { max-width: 760px; }
  body.pt-corpo[data-rotta="per-te.messaggi.conversazione"] .ms-scrivi { left: calc(50% - 380px); width: 760px; }

  /* ---- Casa: una griglia (2 colonne, 3 dai 1280 px) ------------------------ */
  body.pt-con-barra .pt-casa { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 18px; grid-auto-flow: row dense; align-items: stretch; }
  body.pt-con-barra .pt-casa > .pt-casa-voce { grid-column: span 6; }
  body.pt-con-barra .pt-casa > .pt-casa-voce > .pt-scheda { flex: 1 1 auto; }
  body.pt-con-barra .pt-casa > .pt-casa-voce[data-scheda="adesso"],
  body.pt-con-barra .pt-casa > .pt-casa-voce[data-scheda="prepara_spazio"] { grid-column: span 7; }
  body.pt-con-barra .pt-casa > .pt-casa-voce[data-scheda="livello"] { grid-column: span 5; }
  body.pt-con-barra .pt-casa > .pt-casa-voce[data-scheda="scorciatoie"] { grid-column: 1 / -1; }
  body.pt-con-barra .pt-casa > .pt-casa-voce[data-mezza] { grid-column: span 3; }
  html[data-testo="grande"] body.pt-con-barra .pt-casa > .pt-casa-voce[data-mezza] { grid-column: span 6; }
  /* La visita o il messaggio del medico in cima (punti 9/22), quando c'e' solo
     uno dei due: una fascia su tutta la riga. Accanto al Livello (6 + 5)
     lasciava una colonna vuota e spostava tutta la composizione sotto. */
  body.pt-con-barra .pt-casa:not(:has(> [data-scheda="medico"])) > [data-scheda="visita"],
  body.pt-con-barra .pt-casa:not(:has(> [data-scheda="visita"])) > [data-scheda="medico"] { grid-column: 1 / -1; }
  /* Le missioni sono la scheda piu' alta: due righe, accanto passi, sonno e la scheda dopo. */
  body.pt-con-barra .pt-casa > .pt-casa-voce[data-scheda="missioni"] { grid-row: span 2; }
  /* Le schede corte, allungate dalla riga, tengono il contenuto al centro. */
  body.pt-con-barra .pt-casa > .pt-casa-voce:is([data-scheda="livello"], [data-scheda="umore"]) > .pt-scheda { justify-content: center; }
  /* Nei primi giorni «Prepara il tuo spazio» e' alta: accanto, il livello e sotto le scorciatoie in colonna. */
  body.pt-con-barra .pt-casa:has(> [data-scheda="prepara_spazio"]) > [data-scheda="prepara_spazio"] { grid-row: span 2; }
  /* Con «Adesso per te» sopra, due righe la lascerebbero vuota in fondo: una sola. */
  body.pt-con-barra .pt-casa:has(> [data-scheda="adesso"]) > [data-scheda="prepara_spazio"] { grid-row: auto; }
  body.pt-con-barra .pt-casa:has(> [data-scheda="prepara_spazio"]) > [data-scheda="scorciatoie"] { grid-column: span 5; }
  body.pt-con-barra .pt-casa:has(> [data-scheda="prepara_spazio"]) :is(.pt-scorciatoie, .pt-scorciatoie.e-cinque) { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  body.pt-con-barra .pt-casa:has(> [data-scheda="prepara_spazio"]) .pt-scorciatoia { min-height: 56px; padding: 6px 12px; }
  body.pt-con-barra .pt-casa:has(> [data-scheda="prepara_spazio"]) .pt-scorciatoia-icona { width: 38px; height: 38px; border-radius: 12px; }
  body.pt-con-barra .pt-casa > .pt-casa-tutto { grid-column: 1 / -1; justify-self: center; width: auto; min-width: 320px; }

  /* Le scorciatoie: una fila di tessere con icona e nome. */
  body.pt-con-barra .pt-scorciatoie,
  body.pt-con-barra .pt-scorciatoie.e-cinque { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
  body.pt-con-barra .pt-scorciatoia {
    flex-direction: row; justify-content: flex-start; gap: 12px; min-height: 64px; padding: 10px 14px;
    border-radius: 18px; background: var(--pt-carta-velo); border: 1px solid var(--pt-bordo);
    font-size: .9375rem; text-align: left;
  }
  body.pt-con-barra .pt-scorciatoia-icona,
  body.pt-con-barra .pt-scorciatoie.e-cinque .pt-scorciatoia-icona { width: 42px; height: 42px; border-radius: 14px; flex-shrink: 0; }
  body.pt-con-barra .pt-scorciatoia-nome { min-width: 0; }
  html[data-testo="grande"] body.pt-con-barra .pt-scorciatoie,
  html[data-testo="grande"] body.pt-con-barra .pt-scorciatoie.e-cinque { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

  /* ---- Le pagine a due colonne indipendenti -------------------------------- */
  /* Due colonne di testo (column-count): ogni riquadro resta intero, l'ordine di
     lettura e' quello del telefono (prima tutta la colonna di sinistra). */
  body.pt-con-barra:is([data-rotta="per-te.visite"], [data-rotta="per-te.io"], [data-rotta="per-te.prevenzione"],
    [data-rotta="per-te.famiglia"], [data-rotta="per-te.valori.andamento"], [data-rotta="per-te.sonno"],
    [data-rotta="per-te.passi"], [data-rotta="per-te.storia"], [data-rotta="per-te.medicine"]) .pt-contenuto {
    display: block; column-count: 2; column-gap: 32px; column-fill: balance;
  }
  body.pt-con-barra:is([data-rotta="per-te.visite"], [data-rotta="per-te.io"], [data-rotta="per-te.prevenzione"],
    [data-rotta="per-te.famiglia"], [data-rotta="per-te.valori.andamento"], [data-rotta="per-te.sonno"],
    [data-rotta="per-te.passi"], [data-rotta="per-te.storia"], [data-rotta="per-te.medicine"]) .pt-contenuto :is(.pt-contenuto > *, .dr-pagina > *):not(dialog) {
    /* Le finestre (dialog.pt-foglio) no: tengono il loro margin: auto e restano al centro. */
    break-inside: avoid; margin-top: 0; margin-bottom: 16px;
  }
  body.pt-con-barra:is([data-rotta="per-te.visite"], [data-rotta="per-te.io"], [data-rotta="per-te.prevenzione"],
    [data-rotta="per-te.famiglia"], [data-rotta="per-te.valori.andamento"], [data-rotta="per-te.sonno"],
    [data-rotta="per-te.passi"], [data-rotta="per-te.storia"], [data-rotta="per-te.medicine"]) .pt-contenuto :is(.pt-intestazione, .pt-avviso) {
    column-span: all; margin-bottom: 24px;
  }
  /* Nella colonna del telefono i pulsanti si allargavano da soli (flex): qui lo fanno a mano. */
  body.pt-con-barra:is([data-rotta="per-te.visite"], [data-rotta="per-te.io"], [data-rotta="per-te.prevenzione"],
    [data-rotta="per-te.famiglia"], [data-rotta="per-te.valori.andamento"], [data-rotta="per-te.sonno"],
    [data-rotta="per-te.passi"], [data-rotta="per-te.storia"], [data-rotta="per-te.medicine"]) .pt-contenuto :is(.pt-contenuto > .pt-btn, .dr-pagina > .pt-btn) {
    display: flex;
  }

  /* ---- Visite --------------------------------------------------------------- */
  /* Il layout a colonne taglia il margine dell'ultima scheda prima della riga: lo spazio lo dà il padding. */
  body.pt-con-barra[data-rotta="per-te.visite"] .vi-nota { column-span: all; padding-top: 16px; }

  /* ---- Io: la testa e il piano in cima, i gruppi in due colonne -------------- */
  body.pt-con-barra[data-rotta="per-te.io"] .pt-contenuto > :is(.io-testa, .io-piano) { column-span: all; }
  body.pt-con-barra[data-rotta="per-te.io"] .pt-contenuto > .io-piano { margin-bottom: 24px; }
  body.pt-con-barra[data-rotta="per-te.io"] .pt-contenuto > .pt-titolo-gruppo { break-after: avoid; margin: 0 0 8px; }
  body.pt-con-barra[data-rotta="per-te.io"] .pt-contenuto > .pt-voci { margin-bottom: 24px; }
  body.pt-con-barra[data-rotta="per-te.io"] .pt-contenuto > :is(.io-titolare, .io-esci) { column-span: all; max-width: 640px; }
  body.pt-con-barra[data-rotta="per-te.io"] .pt-contenuto > .io-titolare { padding-top: 8px; }
  body.pt-con-barra[data-rotta="per-te.io"] .io-esci .pt-btn { max-width: 360px; }

  /* ---- Prevenzione ----------------------------------------------------------- */
  body.pt-con-barra[data-rotta="per-te.prevenzione"] .pt-contenuto > .pt-prev-gruppo { break-after: avoid; }
  body.pt-con-barra[data-rotta="per-te.prevenzione"] .pt-contenuto > :is(.pt-prev-punteggio, .pt-prev-piede) { column-span: all; }

  /* ---- Storia clinica --------------------------------------------------------- */
  body.pt-con-barra[data-rotta="per-te.storia"] .pt-contenuto h2 { break-after: avoid; }

  /* ---- Famiglia (solo stile: le viste sono del modulo) ------------------------ */
  body.pt-con-barra[data-rotta="per-te.famiglia"] .pt-contenuto > :is(.fm-sottotitolo, .fm-persone-sezione) { column-span: all; }

  /* ---- I miei valori: la pressione larga, gli altri valori in tre colonne ----- */
  body.pt-con-barra[data-rotta="per-te.valori"] .pt-contenuto {
    display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 18px 24px; align-items: start;
  }
  body.pt-con-barra[data-rotta="per-te.valori"] .pt-contenuto :is(.pt-contenuto > *, .dr-pagina > *) { grid-column: 1 / -1; min-width: 0; }
  body.pt-con-barra[data-rotta="per-te.valori"] .dr-pagina > .pt-btn-grande { justify-self: start; width: auto; padding: 0 32px; white-space: nowrap; }
  body.pt-con-barra[data-rotta="per-te.valori"] .dr-griglia { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
  html[data-testo="grande"] body.pt-con-barra[data-rotta="per-te.valori"] .dr-griglia { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* ---- Aria: la conversazione al centro, le scorciatoie in un pannello a destra */
  body.pt-con-barra[data-rotta="per-te.aria"] .ar-pagina {
    display: grid; grid-template-columns: minmax(0, 1fr) var(--pt-lato-aria); column-gap: 28px; row-gap: 0;
    grid-template-rows: auto auto auto auto auto auto auto 1fr auto;
    align-items: start;
  }
  body.pt-con-barra[data-rotta="per-te.aria"] .ar-pagina > * { grid-column: 1; margin-bottom: 14px; min-width: 0; }
  body.pt-con-barra[data-rotta="per-te.aria"] .ar-testa { grid-column: 1 / -1; grid-row: 1; margin-bottom: 24px; }
  body.pt-con-barra[data-rotta="per-te.aria"] :is(.ar-chat, .ar-stato) { grid-row: 2; }
  body.pt-con-barra[data-rotta="per-te.aria"] #ariaNota { grid-row: 3; }
  body.pt-con-barra[data-rotta="per-te.aria"] .ar-limiti { grid-row: 4; }
  body.pt-con-barra[data-rotta="per-te.aria"] .ar-scrivi { grid-row: 5; }
  body.pt-con-barra[data-rotta="per-te.aria"] .ar-errore { grid-row: 6; }
  body.pt-con-barra[data-rotta="per-te.aria"] .ar-piede { grid-row: 7; text-align: left; }
  body.pt-con-barra[data-rotta="per-te.aria"] .ar-scorciatoie {
    grid-column: 2; grid-row: 2 / 9; grid-template-columns: minmax(0, 1fr);
    position: sticky; top: 24px; padding: 12px; border-radius: 22px;
    background: var(--pt-incavo); border: 1px solid var(--pt-bordo);
  }
  body.pt-con-barra[data-rotta="per-te.aria"] .ar-azione { flex-direction: row; align-items: center; min-height: 60px; font-size: .875rem; }
  body.pt-con-barra[data-rotta="per-te.aria"] .ar-azione-icona { flex-shrink: 0; }
  body.pt-con-barra[data-rotta="per-te.aria"] .ar-link-fondo { grid-column: 2; grid-row: 9; align-items: flex-start; }
  body.pt-con-barra[data-rotta="per-te.aria"] .ar-cancella { text-align: left; }
  body.pt-con-barra[data-rotta="per-te.aria"] .ar-msg { max-width: min(88%, 620px); }
}

@media screen and (min-width: 1280px) {
  /* Casa in tre colonne (con «Testo grande» restano due). */
  html:not([data-testo="grande"]) body.pt-con-barra .pt-casa > .pt-casa-voce { grid-column: span 4; }
  html:not([data-testo="grande"]) body.pt-con-barra .pt-casa > .pt-casa-voce:is([data-scheda="adesso"], [data-scheda="prepara_spazio"]) { grid-column: span 8; }
  html:not([data-testo="grande"]) body.pt-con-barra .pt-casa > .pt-casa-voce[data-scheda="livello"] { grid-column: span 4; }
  /* In tre colonne la visita (o il messaggio) da sola torna una scheda di 4: la riga si riempie con le altre. */
  html:not([data-testo="grande"]) body.pt-con-barra .pt-casa:not(:has(> [data-scheda="medico"])) > [data-scheda="visita"],
  html:not([data-testo="grande"]) body.pt-con-barra .pt-casa:not(:has(> [data-scheda="visita"])) > [data-scheda="medico"] { grid-column: span 4; }
  html:not([data-testo="grande"]) body.pt-con-barra .pt-casa > .pt-casa-voce[data-scheda="scorciatoie"] { grid-column: 1 / -1; }
  html:not([data-testo="grande"]) body.pt-con-barra .pt-casa:has(> [data-scheda="prepara_spazio"]) > [data-scheda="scorciatoie"] { grid-column: span 4; }
  html:not([data-testo="grande"]) body.pt-con-barra .pt-casa > .pt-casa-voce[data-mezza] { grid-column: span 2; }
  html[data-testo="grande"] body.pt-con-barra .pt-casa > .pt-casa-voce[data-mezza] { grid-column: span 3; }
}