/* Ottobix Intelligence · le pagine
   Si appoggia a oi-tokens.css (il sistema grafico approvato, da non cambiare a mano).
   Qui solo i pezzi che il pacchetto non ha. Solo token: nessun colore esadecimale.
   Movimento solo opacity e transform (più il tratto che si disegna degli SVG); prefers-reduced-motion spegne tutto. */

.oi-principale { min-width: 0; }
.oi-nascosto { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.oi-pagina:focus { outline: none; }
button { font: inherit; color: inherit; }
/* Le pagine decidono con @container sulla larghezza vera del contenuto, non della finestra: così tutto funziona
   uguale con la barra larga e con quella stretta. Un contenitore fa anche da riferimento per position: fixed:
   niente di fisso dentro #pagina (fogli e pannelli vanno nel body). */
.oi-pagina { container-type: inline-size; container-name: pagina; }

/* --- Barra di famiglia --- */
.oi-famiglia { z-index: 7; }
.oi-famiglia__app { position: relative; display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--oi-r-ctrl); }
.oi-famiglia__app img { transition: transform .3s var(--oi-curva); }
.oi-famiglia__app:hover img { transform: scale(1.07); }
.oi-oggi { width: 40px; height: 44px; margin: 2px 0 6px; border-radius: 11px; background: var(--oi-card); box-shadow: inset 0 0 0 1px var(--oi-linea);
  display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--oi-testo); line-height: 1; }
.oi-oggi__mese { font: 600 8px var(--oi-font); letter-spacing: .06em; text-transform: uppercase; color: var(--oi-problema-t); }
.oi-oggi__giorno { margin-top: 2px; font-size: 19px; font-weight: 500; letter-spacing: -.02em; }
.oi-famiglia__giu { margin-top: auto; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.oi-strumento { width: 40px; height: 40px; display: grid; place-items: center; border: 0; border-radius: var(--oi-r-ctrl); background: transparent;
  color: var(--oi-testo-2); cursor: pointer; transition: background .2s, color .2s; }
.oi-strumento:hover { background: var(--oi-riempi); color: var(--oi-testo); }
.oi-strumento svg { width: 18px; height: 18px; }
.oi-io { position: relative; }
.oi-io > button { width: 36px; height: 36px; margin-top: 4px; border: 0; border-radius: 50%; padding: 0; cursor: pointer; display: grid; place-items: center;
  background: var(--oi-testo); color: var(--oi-fondo); font: 600 12px var(--oi-font); }
.oi-menu { position: absolute; left: calc(100% + 12px); bottom: 0; min-width: 190px; padding: 6px; border-radius: 14px; z-index: 30;
  background: var(--oi-vetro-forte); backdrop-filter: var(--oi-blur); -webkit-backdrop-filter: var(--oi-blur);
  box-shadow: 0 20px 40px -14px rgba(0, 0, 0, .35), inset 0 0 0 1px var(--oi-linea); animation: oi-in .25s var(--oi-curva); }
.oi-menu__chi { padding: 8px 10px 10px; font-size: 13px; color: var(--oi-testo-2); border-bottom: 1px solid var(--oi-linea); margin-bottom: 4px; }
.oi-menu__chi b { display: block; color: var(--oi-testo); font-weight: 600; font-size: 14px; }
.oi-menu button { width: 100%; height: 34px; padding: 0 10px; border: 0; border-radius: 9px; background: transparent; text-align: left; cursor: pointer; font-size: 14px; }
.oi-menu button:hover { background: var(--oi-riempi); }
[data-sugg] { position: relative; }
.oi-famiglia [data-sugg]::after { content: attr(data-sugg); position: absolute; left: calc(100% + 10px); top: 50%; transform: translate(-4px, -50%);
  white-space: nowrap; padding: 6px 10px; border-radius: 8px; font: 500 12px var(--oi-font); color: var(--oi-testo); background: var(--oi-vetro-forte);
  backdrop-filter: var(--oi-blur); -webkit-backdrop-filter: var(--oi-blur); box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .35), inset 0 0 0 1px var(--oi-linea);
  opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s var(--oi-curva); z-index: 40; }
.oi-famiglia [data-sugg]:hover::after { opacity: 1; transform: translate(0, -50%); transition-delay: 250ms; }

/* --- Barra laterale: larga (248, 220 sotto i 1100) o stretta (72) --- */
.oi-lato { z-index: 6; view-transition-name: oi-lato; }
.oi-principale { view-transition-name: oi-principale; }
.oi-lato__testa { display: flex; align-items: center; gap: 12px; padding: 2px 0 18px 8px; }
.oi-lato__testa > div { flex: 1; min-width: 0; }
.oi-lato__marchio { flex: none; display: grid; place-items: center; border-radius: 50%; transition: transform .35s var(--oi-curva); }
.oi-lato__marchio:hover { transform: scale(1.05); }
.oi-lato__marchio .oi-sfera { --s: 44px; }
.oi-lato__nome { display: flex; align-items: center; gap: 8px; font-size: 17px; font-weight: 600; letter-spacing: -.02em; white-space: nowrap; }
.oi-lato__sotto { font-size: 12px; color: var(--oi-testo-3); }
.oi-lato__comprimi { flex: none; align-self: flex-start; width: 30px; height: 30px; margin-top: 2px; display: grid; place-items: center; border: 0; border-radius: 9px;
  background: transparent; color: var(--oi-testo-3); cursor: pointer; transition: background .2s, color .2s; }
.oi-lato__comprimi:hover, .oi-lato__comprimi:focus-visible { background: var(--oi-riempi); color: var(--oi-testo); }
.oi-lato__comprimi svg { width: 17px; height: 17px; }
/* da larga il suggerimento del bottone sta sotto, dentro la barra (che scorre e taglierebbe tutto il resto) */
html:not([data-lato="stretta"]) .oi-lato__comprimi::after { content: attr(data-sugg); position: absolute; right: 0; top: calc(100% + 6px); transform: translateY(-4px);
  white-space: nowrap; padding: 6px 10px; border-radius: 8px; font: 500 12px var(--oi-font); color: var(--oi-testo); background: var(--oi-vetro-forte);
  box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .35), inset 0 0 0 1px var(--oi-linea); opacity: 0; pointer-events: none;
  transition: opacity .2s, transform .2s var(--oi-curva); z-index: 2; }
html:not([data-lato="stretta"]) .oi-lato__comprimi:is(:hover, :focus-visible)::after { opacity: 1; transform: none; transition-delay: 250ms; }
/* larga a 220 px (sotto i 1100): Sfera e nome più piccoli, così la pillola HQ non finisce sotto il bottone */
@media (max-width: 1100px) {
  html:not([data-lato="stretta"]) .oi-lato__marchio .oi-sfera { --s: 32px; }
  html:not([data-lato="stretta"]) .oi-lato__testa { gap: 8px; }
  html:not([data-lato="stretta"]) .oi-lato__nome { font-size: 15px; gap: 6px; }
}
.oi-lato__gruppo { margin-top: 10px; }
.oi-voce { position: relative; margin: 1px 0; color: var(--oi-testo); }
.oi-voce:hover { color: var(--oi-testo); }
.oi-voce__punto { display: none; position: absolute; top: 9px; left: 30px; width: 7px; height: 7px; border-radius: 50%; box-shadow: 0 0 0 2px var(--oi-fondo); }
.oi-lato__piede { margin-top: auto; padding: 12px 10px 0; border-top: 1px solid var(--oi-linea); display: flex; align-items: center; gap: 8px;
  font-size: 12px; color: var(--oi-testo-3); }

@media (min-width: 761px) {
  html[data-lato="stretta"] .oi-app { grid-template-columns: 64px 72px minmax(0, 1fr); }
  html[data-lato="stretta"] .oi-lato { overflow: visible; padding: 18px 12px; align-items: center; }
  html[data-lato="stretta"] .oi-lato__testa { flex-direction: column; gap: 10px; padding: 2px 0 12px; }
  html[data-lato="stretta"] .oi-lato__marchio .oi-sfera { --s: 32px; }
  html[data-lato="stretta"] .oi-lato__comprimi { align-self: center; margin: 0; width: 36px; height: 32px; }
  html[data-lato="stretta"] .oi-lato__testa > div,
  html[data-lato="stretta"] .oi-voce__testi,
  html[data-lato="stretta"] .oi-lato__piede { display: none; }
  html[data-lato="stretta"] .oi-lato__gruppo { font-size: 0; height: 1px; width: 24px; padding: 0; margin: 10px auto; background: var(--oi-linea); }
  html[data-lato="stretta"] .oi-voce { width: 48px; height: 44px; justify-content: center; align-items: center; padding: 0; }
  html[data-lato="stretta"] .oi-voce svg { margin: 0; }
  html[data-lato="stretta"] .oi-voce[data-st="attesa"] .oi-voce__punto { display: block; background: var(--oi-attesa); }
  html[data-lato="stretta"] .oi-voce[data-st="problema"] .oi-voce__punto { display: block; background: var(--oi-problema); }
  /* il suggerimento al passaggio o al fuoco: stessa regola della barra di famiglia */
  html[data-lato="stretta"] .oi-lato [data-sugg]::after { content: attr(data-sugg); position: absolute; left: calc(100% + 12px); top: 50%; transform: translate(-4px, -50%);
    white-space: nowrap; padding: 6px 10px; border-radius: 8px; font: 500 12px var(--oi-font); color: var(--oi-testo); background: var(--oi-vetro-forte);
    backdrop-filter: var(--oi-blur); -webkit-backdrop-filter: var(--oi-blur); box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .35), inset 0 0 0 1px var(--oi-linea);
    opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s var(--oi-curva); z-index: 40; }
  html[data-lato="stretta"] .oi-lato [data-sugg]:is(:hover, :focus-visible)::after { opacity: 1; transform: translate(0, -50%); transition-delay: 200ms; }
}

/* Il cambio di barra: la griglia cambia di colpo, la View Transition lo addolcisce (0,45 s). Le immagini restano
   alla loro misura e scorrono, invece di stirarsi */
html.oi-cambio-lato::view-transition-group(*) { animation-duration: .45s; animation-timing-function: var(--oi-curva); }
html.oi-cambio-lato::view-transition-old(*),
html.oi-cambio-lato::view-transition-new(*) { height: 100%; object-fit: none; object-position: left top; animation-duration: .45s; animation-timing-function: var(--oi-curva); }

/* --- Barra in alto --- */
.oi-top__dove { font-size: 14px; color: var(--oi-testo-2); white-space: nowrap; }
.oi-top__dove b { color: var(--oi-testo); font-weight: 600; }
.oi-top__ferma { margin-left: auto; display: inline-flex; flex: none; }
/* con un invio in corso la pillola «Ferma» conta più di «Aggiornato adesso» */
@media (max-width: 1600px) { .oi-top:has(.oi-ferma) .oi-top__agg { display: none; } }
/* sul telefono la pillola si prende il posto dell'ora (e della scritta dell'anteprima): Cerca resta in vista */
@media (max-width: 480px) { .oi-top:has(.oi-ferma) .oi-ora, .oi-top:has(.oi-ferma) .oi-top__anteprima { display: none; } }
.oi-top__agg { font-size: 12.5px; color: var(--oi-testo-3); white-space: nowrap; }
.oi-top__agg button { border: 0; padding: 0; background: none; color: var(--oi-accento-t); cursor: pointer; font: inherit; }
.oi-top__agg button:hover { color: var(--oi-testo); }
.oi-top__cerca { width: 220px; height: 32px; padding: 0 12px; border: 0; border-radius: var(--oi-r-ctrl); background: var(--oi-riempi); color: var(--oi-testo-3);
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font: 400 14px var(--oi-font); }
.oi-top__cerca svg { width: 15px; height: 15px; }
.oi-top__cerca kbd { margin-left: auto; font: 400 11px var(--oi-mono); white-space: nowrap; }
/* «Invio in corso · 38 di 142 · Ferma»: in tutte le pagine finché un annuncio parte */
.oi-ferma { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 4px 0 12px; border: 0; border-radius: 999px; cursor: pointer;
  background: color-mix(in srgb, var(--oi-accento) 9%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--oi-accento) 26%, transparent);
  color: var(--oi-testo); font: 500 13px var(--oi-font); white-space: nowrap; animation: oi-in .4s var(--oi-curva); }
.oi-ferma__punto { width: 8px; height: 8px; border-radius: 50%; background: var(--oi-accento); animation: oi-vivo 2.4s ease-in-out infinite; }
.oi-ferma .oi-mono { font-size: 12px; color: var(--oi-testo-2); }
.oi-ferma__azione { height: 24px; padding: 0 11px; border-radius: 999px; display: inline-flex; align-items: center; font-weight: 600;
  background: color-mix(in srgb, var(--oi-problema) 16%, transparent); color: var(--oi-problema-t); transition: background .2s; }
.oi-ferma:hover .oi-ferma__azione { background: color-mix(in srgb, var(--oi-problema) 26%, transparent); }

/* --- Testata della pagina --- */
.oi-pagina > .oi-kicker, .oi-entra > .oi-kicker { display: block; margin-bottom: 8px; }
.oi-eroe__ctx { font-size: 16px; font-weight: 500; }
.oi-eroe__ctx[data-st="attesa"], .oi-eroe__n[data-st="attesa"] { color: var(--oi-attesa-t); }
.oi-eroe__ctx[data-st="problema"], .oi-eroe__n[data-st="problema"] { color: var(--oi-problema-t); }
.oi-eroe__ctx[data-st="bene"], .oi-eroe__n[data-st="bene"] { color: var(--oi-bene-t); }
.oi-blocco { margin-top: 28px; }
.oi-sezione { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 36px 0 14px; }
.oi-sezione h2 { margin: 0; font-size: 17px; font-weight: 600; letter-spacing: -.01em; }
.oi-sezione--prima { margin-top: 0; }
.oi-sezione .oi-link { font-size: 13px; font-weight: 600; }
.oi-titolo-riga { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.oi-pillola { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 16px; border: 0; border-radius: 999px; font: 600 14px var(--oi-font);
  white-space: nowrap; background: color-mix(in srgb, var(--oi-bene) 14%, transparent); color: var(--oi-bene-t); }
.oi-pillola i { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.oi-pillola[data-st="attesa"] { background: color-mix(in srgb, var(--oi-attesa) 16%, transparent); color: var(--oi-attesa-t); }
.oi-pillola[data-st="problema"] { background: color-mix(in srgb, var(--oi-problema) 14%, transparent); color: var(--oi-problema-t); }
button.oi-pillola { cursor: pointer; transition: transform .25s var(--oi-curva); }
button.oi-pillola:hover { transform: translateY(-1px); }
.oi-pannello__nota { font-size: 12.5px; color: var(--oi-testo-2); white-space: nowrap; }

/* --- Allarme (una riga, il dettaglio nel pannello) --- */
.oi-allarme { margin-top: 28px; font-size: 14px; }
.oi-allarme__punto { width: 8px; height: 8px; border-radius: 50%; background: var(--oi-problema); flex: none; }
.oi-allarme__testo { flex: 1; min-width: 0; color: var(--oi-testo-2); }
.oi-allarme__testo b { color: var(--oi-testo); font-weight: 600; }
.oi-btn--problema { background: color-mix(in srgb, var(--oi-problema) 16%, transparent); color: var(--oi-problema-t); }
.oi-btn--problema:hover { background: color-mix(in srgb, var(--oi-problema) 24%, transparent); }
.oi-btn[disabled] { opacity: .6; cursor: progress; }

/* --- Elenchi --- */
.oi-pannello { overflow: hidden; }
.oi-pannello__testa { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 20px 14px; border-bottom: 1px solid var(--oi-linea); }
.oi-pannello__testa .oi-link { font-size: 13px; font-weight: 600; }
.oi-riga { display: grid; align-items: center; gap: 4px 14px; width: 100%; border: 0; border-bottom: 1px solid var(--oi-linea); background: transparent;
  color: var(--oi-testo); text-align: left; font: inherit; transition: background .2s; }
.oi-riga:last-child { border-bottom: 0; }
.oi-riga:focus-visible { outline-offset: -2px; }
.oi-riga--attesa { grid-template-columns: 36px minmax(140px, 220px) minmax(0, 1fr) auto auto 64px; padding: 12px 20px; }
.oi-riga__chi { min-width: 0; display: flex; flex-direction: column; }
.oi-riga__nome { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.oi-riga__dove { font-size: 12px; color: var(--oi-testo-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.oi-riga__cosa { min-width: 0; font-size: 14px; color: var(--oi-testo); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.oi-riga__casella { font: 400 12px var(--oi-mono); color: var(--oi-testo-3); white-space: nowrap; }
.oi-riga__tempo { font: 500 12px var(--oi-mono); color: var(--oi-testo-2); text-align: right; white-space: nowrap; }
.oi-riga__tempo[data-st="attesa"] { color: var(--oi-attesa-t); }
.oi-riga__tempo[data-st="problema"] { color: var(--oi-problema-t); }
.oi-riga__tempo[data-st="bene"] { color: var(--oi-bene-t); }
.oi-riga--semplice { grid-template-columns: minmax(0, 1fr) auto; padding: 12px 20px; cursor: default; }
.oi-riga--semplice:hover { background: transparent; }
.oi-riga--consegna { grid-template-columns: 8px minmax(0, 1fr) auto 72px; padding: 12px 20px; cursor: default; }
.oi-riga--consegna:hover { background: transparent; }
.oi-riga--consegna .oi-riga__dove { white-space: normal; }
.oi-riga__valore { display: inline-flex; align-items: baseline; gap: 14px; white-space: nowrap; }
.oi-riga__valore .oi-mono { font-size: 12px; color: var(--oi-testo-3); }
.oi-riga__valore b { font-weight: 600; font-size: 14px; }
.oi-pallino-st { display: inline-block; width: 7px; height: 7px; margin-right: 8px; border-radius: 50%; background: currentColor; vertical-align: middle; }
.oi-pallino-st[data-st="problema"] { background: var(--oi-problema); margin: 0; }
.oi-pallino-st[data-st="attesa"] { background: var(--oi-attesa); margin: 0; }
.oi-pallino { display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; vertical-align: 1px; }

/* Avatar per categoria: Cliente accento, Lead corallo, Amministrazione attesa, Fornitore e gli altri grigio */
.oi-avatar { background: var(--oi-riempi); color: var(--oi-testo-2); }
.oi-avatar[data-cat="Cliente"] { background: color-mix(in srgb, var(--oi-accento) 14%, transparent); color: var(--oi-accento-t); }
.oi-avatar[data-cat="Lead"] { background: color-mix(in srgb, var(--oi-fenice) 14%, transparent); color: var(--oi-fenice); }
.oi-avatar[data-cat="Amministrazione"] { background: color-mix(in srgb, var(--oi-attesa) 18%, transparent); color: var(--oi-attesa-t); }
.oi-avatar--32 { width: 32px; height: 32px; font-size: 11px; }
.oi-avatar--28 { width: 28px; height: 28px; font-size: 10.5px; letter-spacing: .02em; }
.oi-chip--lead { color: var(--oi-fenice); }
.oi-chip--muto { background: var(--oi-riempi); color: var(--oi-testo-2); }
.oi-chip--senza-punto::before { display: none; }
.oi-chips { display: inline-flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.oi-nonletta { width: 7px; height: 7px; border-radius: 50%; background: var(--oi-accento); flex: none; }
.oi-vuoto { padding: 26px 20px; font-size: 14px; color: var(--oi-testo-2); display: flex; align-items: center; gap: 14px; }
.oi-nota { margin-top: 40px; font-size: 12px; color: var(--oi-testo-3); }
.oi-filtri { display: flex; flex-wrap: wrap; gap: 8px; margin: 32px 0 16px; }
.oi-link { font-weight: 600; }

/* Controllo segmentato (filtri della Posta, caselle sul telefono) */
.oi-segmentato { display: inline-flex; align-items: center; gap: 2px; padding: 2px; border-radius: 10px; background: var(--oi-riempi); max-width: 100%;
  overflow-x: auto; scrollbar-width: none; }
.oi-segmentato::-webkit-scrollbar { display: none; }
.oi-segmentato button { flex: none; height: 28px; padding: 0 12px; border: 0; border-radius: 8px; background: transparent; color: var(--oi-testo-2);
  font: 500 13px var(--oi-font); white-space: nowrap; cursor: pointer; transition: background .2s, color .2s; }
.oi-segmentato button:hover { color: var(--oi-testo); }
.oi-segmentato button[aria-pressed="true"] { background: var(--oi-fondo-2); color: var(--oi-testo); box-shadow: 0 1px 3px rgba(0, 0, 0, .08), inset 0 0 0 .5px var(--oi-linea); }
[data-tema="notte"] .oi-segmentato button[aria-pressed="true"] { background: var(--oi-riempi); }
.oi-segmentato .oi-mono { font-size: 11.5px; color: var(--oi-testo-3); }

/* =====================================================================
   Posta: le 4 caselle sopra la piega (altezza solo in CSS, niente misure in JS)
   ===================================================================== */
.oi-pagina--posta { padding-top: 24px; }
.oi-posta-vista { display: flex; flex-direction: column; gap: 14px; height: calc(100dvh - 56px - 24px - 16px); min-height: 560px; }
@supports not (height: 100dvh) { .oi-posta-vista { height: calc(100vh - 96px); } }
.oi-posta-testa { flex: none; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "k k" "sx dx"; align-items: center; gap: 6px 24px; }
.oi-posta-testa > .oi-kicker { grid-area: k; }
.oi-posta-testa__sx { grid-area: sx; display: flex; align-items: baseline; gap: 6px 22px; min-width: 0; flex-wrap: wrap; }
.oi-posta-testa__sx .oi-titolo { font-size: 28px; line-height: 1.15; }
.oi-posta-testa__dx { grid-area: dx; display: flex; align-items: center; justify-content: flex-end; gap: 12px; min-width: 0; }
.oi-eroe--riga { margin: 0; gap: 10px; flex-wrap: nowrap; min-width: 0; }
.oi-eroe--riga .oi-eroe__n { font-size: 40px; }
.oi-eroe--riga .oi-eroe__frase { font-size: 17px; white-space: nowrap; }
.oi-eroe--riga .oi-eroe__ctx { padding: 0; border: 0; background: none; font: 500 15px var(--oi-font); color: var(--oi-testo-2); white-space: nowrap; cursor: pointer; }
.oi-eroe--riga button.oi-eroe__ctx:hover { color: var(--oi-testo); }
.oi-eroe--riga .oi-eroe__ctx[data-st="bene"] { color: var(--oi-bene-t); cursor: default; }
.oi-posta-testa .oi-pillola { height: 30px; padding: 0 14px; font-size: 13px; }
.oi-posta-testa .oi-pillola b { font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
/* sotto i 1260 px di contenuto i filtri vanno su una riga loro; sotto i 700 tutto in colonna */
@container pagina (max-width: 1260px) {
  .oi-posta-testa { grid-template-areas: "k k" "sx pill" "filtri filtri"; }
  .oi-posta-testa__dx { display: contents; }
  .oi-posta-testa .oi-pillola { grid-area: pill; justify-self: end; }
  .oi-posta-testa .oi-segmentato { grid-area: filtri; justify-self: start; }
}
@container pagina (max-width: 700px) {
  .oi-posta-testa { grid-template-columns: minmax(0, 1fr); grid-template-areas: "k" "sx" "pill" "filtri"; }
  .oi-posta-testa .oi-pillola { justify-self: start; }
  .oi-posta-testa__sx { flex-wrap: nowrap; gap: 16px; }
  .oi-eroe--riga { flex: 1; flex-wrap: wrap; row-gap: 0; }
  .oi-eroe--riga .oi-eroe__ctx { flex-basis: 100%; }
}

/* «Altre caselle»: le attese delle caselle senza colonna (info@) */
.oi-altre-caselle { flex: none; display: flex; align-items: center; gap: 10px; height: 28px; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.oi-altre-caselle .oi-kicker { flex: none; font-size: 10px; }
.oi-altra { flex: none; height: 28px; padding: 0 12px; border: 0; border-radius: 999px; background: var(--oi-riempi); color: var(--oi-testo);
  font: 500 12.5px var(--oi-font); white-space: nowrap; cursor: pointer; transition: background .2s; }
.oi-altra .oi-mono { font-size: 12px; }
.oi-altra[data-st="attesa"] { background: color-mix(in srgb, var(--oi-attesa) 14%, transparent); color: var(--oi-attesa-t); }
.oi-altra[data-st="problema"] { background: color-mix(in srgb, var(--oi-problema) 13%, transparent); color: var(--oi-problema-t); }
.oi-altra:hover { background: color-mix(in srgb, var(--oi-testo) 10%, transparent); }

/* Le colonne: 4 da 860 px di pagina in su, sotto 2 × 2, sul telefono un carosello */
.oi-colonne--vista { flex: 1; min-height: 0; display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: minmax(0, 1fr); }
@container pagina (min-width: 860px) {
  .oi-colonne--vista { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); grid-auto-rows: minmax(0, 1fr); }
}
.oi-colonne--vista > .oi-scheletro { height: 100%; }
.oi-posta-segmenti { display: none; }
.oi-casella { overflow: hidden; container: casella / inline-size; }
.oi-casella--vista { display: flex; flex-direction: column; min-height: 0; transition: box-shadow .25s var(--oi-curva); }
.oi-casella--vista[data-attiva], .oi-casella--mini[data-attiva] { box-shadow: inset 0 0 0 1px var(--oi-accento); }
.oi-casella__testa { flex: none; display: flex; flex-direction: column; justify-content: center; gap: 2px; min-height: 52px; padding: 7px 14px 7px; border-bottom: 1px solid var(--oi-linea); }
.oi-casella__riga1 { display: flex; align-items: center; gap: 6px; min-width: 0; height: 22px; }
.oi-casella__riga1 .oi-chip { flex: none; height: 20px; padding: 0 7px; gap: 4px; font-size: 11px; }
.oi-chip--conta { min-width: 20px; justify-content: center; }
.oi-chip__icona { flex: none; }
.oi-casella__riga2 { font: 400 11px var(--oi-mono); color: var(--oi-testo-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.oi-casella__riga2 [data-st="attesa"] { color: var(--oi-attesa-t); }
.oi-casella__riga2 [data-st="problema"] { color: var(--oi-problema-t); }
.oi-casella__punto { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--oi-testo-3); }
.oi-casella__punto[data-st="bene"] { background: var(--oi-bene); }
.oi-casella__punto[data-st="problema"] { background: var(--oi-problema); }
.oi-casella__nome { min-width: 0; margin-right: 2px; font: 500 13px var(--oi-mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.oi-casella__grafico { flex: none; margin-left: auto; width: 56px; height: 18px; color: var(--oi-testo-3); }
@container casella (max-width: 339px) { .oi-casella--vista .oi-casella__parola { display: none; } }
@container casella (max-width: 269px) { .oi-casella--mini .oi-casella__parola { display: none; } }
@container casella (max-width: 259px) { .oi-casella__grafico { display: none; } }
.oi-casella__corpo { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.oi-casella__sezione { position: sticky; top: 0; z-index: 1; padding: 9px 14px 6px; font: 500 10px var(--oi-mono); letter-spacing: .14em; text-transform: uppercase;
  color: var(--oi-testo-3); background: var(--oi-vetro-forte); backdrop-filter: var(--oi-blur); -webkit-backdrop-filter: var(--oi-blur); }
.oi-casella__sezione[data-st="attesa"] { color: var(--oi-attesa-t); }
.oi-casella__sezione[data-st="problema"] { color: var(--oi-problema-t); }
.oi-casella__piede { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 10px; height: 36px; padding: 0 14px;
  border-top: 1px solid var(--oi-linea); font-size: 12px; color: var(--oi-testo-3); }
.oi-casella__piede button { border: 0; padding: 0; background: none; font: inherit; cursor: pointer; }
.oi-casella__piede .oi-link { color: var(--oi-accento-t); white-space: nowrap; font-weight: 500; }
.oi-casella__piede .oi-link:hover { color: var(--oi-testo); }
.oi-casella__piede .oi-nascoste { color: var(--oi-testo-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.oi-casella__piede .oi-nascoste:hover, .oi-casella__piede .oi-nascoste[aria-pressed="true"] { color: var(--oi-testo); }
.oi-casella__vuota { min-height: 100%; padding: 24px 18px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  text-align: center; font-size: 13px; color: var(--oi-testo-3); }

/* La riga compatta: 56 px, due righe. Il divisorio parte dal testo, come in Mail */
.oi-riga--compatta { position: relative; grid-template-columns: 28px minmax(0, 1fr); grid-template-rows: 20px 18px; column-gap: 10px; row-gap: 1px;
  align-content: center; height: 56px; padding: 0 12px 0 14px; border-bottom: 0; scroll-margin-top: 30px; cursor: pointer; }
.oi-riga--compatta::after { content: ""; position: absolute; left: 52px; right: 0; bottom: 0; height: 1px; background: var(--oi-linea); }
.oi-riga--compatta:last-child::after { display: none; }
.oi-riga--compatta .oi-avatar { grid-row: 1 / 3; }
.oi-compatta__su { display: flex; align-items: center; gap: 6px; min-width: 0; }
.oi-compatta__nome { min-width: 0; font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.oi-compatta__n { flex: none; font: 500 11px var(--oi-mono); color: var(--oi-testo-3); }
.oi-compatta__ora { flex: none; margin-left: auto; padding-left: 6px; font: 400 11px var(--oi-mono); color: var(--oi-testo-3); white-space: nowrap; }
.oi-compatta__ora[data-st="attesa"] { color: var(--oi-attesa-t); font-weight: 500; }
.oi-compatta__ora[data-st="problema"] { color: var(--oi-problema-t); font-weight: 500; }
.oi-compatta__oggetto { grid-column: 2; min-width: 0; font-size: 12.5px; color: var(--oi-testo-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.oi-riga--aspetta::before { content: ""; position: absolute; left: 0; top: 11px; bottom: 11px; width: 2px; border-radius: 0 2px 2px 0; background: var(--oi-testo-3); }
.oi-riga--aspetta[data-st="attesa"]::before { background: var(--oi-attesa); }
.oi-riga--aspetta[data-st="problema"]::before { background: var(--oi-problema); }
.oi-riga--rumore { opacity: .62; }
/* la riga scelta con la tastiera: il fondo accento è già il segno del fuoco */
.oi-riga--compatta[aria-selected="true"] { background: color-mix(in srgb, var(--oi-accento) 11%, transparent); outline: none; }
/* colonna stretta: via l'avatar, resta una barretta del colore della categoria (il nome guadagna 30 px) */
@container casella (max-width: 240px) {
  .oi-riga--compatta { grid-template-columns: minmax(0, 1fr); }
  .oi-riga--compatta .oi-avatar { display: none; }
  .oi-riga--compatta .oi-compatta__oggetto { grid-column: 1; }
  .oi-riga--compatta::after { left: 14px; }
  .oi-riga--compatta:not(.oi-riga--aspetta)::before { content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 3px; border-radius: 0 3px 3px 0; background: var(--oi-riempi); }
  .oi-riga--compatta[data-cat="Cliente"]:not(.oi-riga--aspetta)::before { background: var(--oi-accento); }
  .oi-riga--compatta[data-cat="Lead"]:not(.oi-riga--aspetta)::before { background: var(--oi-fenice); }
  .oi-riga--compatta[data-cat="Amministrazione"]:not(.oi-riga--aspetta)::before { background: var(--oi-attesa); }
  .oi-riga--compatta[data-cat="Fornitore"]:not(.oi-riga--aspetta)::before { background: var(--oi-testo-3); }
}
.oi-posta-piede { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 20px; font: 400 11px var(--oi-mono); color: var(--oi-testo-3); }
.oi-posta-piede button { padding: 0; border: 0; background: none; font: inherit; color: inherit; cursor: pointer; }
.oi-posta-piede button:hover { color: var(--oi-testo); }

/* Sotto la piega: tutte le attese, email non arrivate, come rispondiamo */
.oi-sotto-piega { padding-top: 8px; }
.oi-sotto-piega > .oi-sezione:first-child { margin-top: 28px; }
.oi-sotto-piega .oi-sezione { scroll-margin-top: 72px; }
.oi-tempi { grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr)); }
.oi-tempo { display: flex; flex-direction: column; gap: 3px; padding: 16px 18px; }
.oi-tempo__testa { display: flex; justify-content: space-between; gap: 10px; font-size: 12px; color: var(--oi-testo-3); }
.oi-tempo__n { margin-top: 8px; font-size: 28px; font-weight: 600; letter-spacing: -.025em; line-height: 1.1; }
.oi-tempo__n[data-st="attesa"] { color: var(--oi-attesa-t); }
.oi-tempo__prima { font-size: 12.5px; color: var(--oi-testo-2); }
.oi-tempo .oi-settimane { margin-top: 14px; }
.oi-tempo__piede { margin-top: 4px; font: 400 11px var(--oi-mono); color: var(--oi-testo-3); }
.oi-settimane { display: flex; align-items: flex-end; gap: 6px; height: 30px; }
.oi-settimane i { flex: 1; max-width: 28px; border-radius: 4px; background: var(--oi-riempi); box-shadow: inset 0 0 0 1px var(--oi-linea); transform-origin: bottom; }
.oi-settimane i[data-questa] { background: var(--oi-accento); box-shadow: none; }
.oi-entra .oi-settimane i { animation: oi-cresce-y .7s var(--oi-curva) backwards .3s; }

/* --- Pannello laterale (480): conversazione, consegne, salute dei clienti --- */
/* chiuso sta tutto fuori dallo schermo (anche l'ombra, che altrimenti si vede sul bordo destro) e non prende il fuoco */
.oi-lato-dx { transform: translateX(calc(100% + 96px)); visibility: hidden; transition: transform .35s var(--oi-curva), visibility 0s .35s; }
.oi-lato-dx[data-aperto] { visibility: visible; transition: transform .35s var(--oi-curva); }
.oi-lato-dx__testa { display: flex; align-items: flex-start; gap: 12px; padding: 20px 20px 16px; border-bottom: 1px solid var(--oi-linea); }
.oi-lato-dx__titolo { margin: 6px 0 0; font-size: 19px; font-weight: 600; letter-spacing: -.015em; line-height: 1.25; }
.oi-lato-dx__chiudi { margin-left: auto; flex: none; }
.oi-lato-dx__corpo { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 4px 20px 20px; }
.oi-conv__somma { margin: 14px 0 2px; font: 400 11.5px var(--oi-mono); color: var(--oi-testo-3); }
.oi-email { padding: 14px 0; border-bottom: 1px solid var(--oi-linea); }
.oi-email:last-child { border-bottom: 0; }
.oi-email__testa { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: 0 10px; align-items: center; cursor: pointer; list-style: none; }
.oi-email__testa::-webkit-details-marker { display: none; }
.oi-email__testa .oi-avatar { grid-row: span 2; }
.oi-email__chi { font-size: 14px; font-weight: 600; display: flex; align-items: center; gap: 6px; min-width: 0; }
.oi-email__indirizzo { font: 400 11.5px var(--oi-mono); color: var(--oi-testo-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; grid-column: 2 / 4; }
.oi-email__quando { font: 400 11.5px var(--oi-mono); color: var(--oi-testo-3); }
.oi-email__riassunto { grid-column: 2 / 4; margin-top: 4px; font-size: 13px; color: var(--oi-testo-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.oi-email[open] .oi-email__riassunto { display: none; }
.oi-email:not([open]) .oi-email__indirizzo { display: none; }
.oi-email:not([open]):hover .oi-email__chi { color: var(--oi-accento-t); }
.oi-email__testo { margin: 12px 0 0 42px; white-space: pre-wrap; word-break: break-word; font-size: 14px; line-height: 1.6; }
.oi-email__firma { margin: 8px 0 0 42px; font-size: 12px; color: var(--oi-testo-3); }
.oi-email__firma > summary { cursor: pointer; list-style: none; font: 400 11px var(--oi-mono); }
.oi-email__firma > summary::-webkit-details-marker { display: none; }
.oi-email__firma > div { margin-top: 4px; white-space: pre-wrap; line-height: 1.5; }
.oi-email__citato { margin: 8px 0 0 42px; font: 400 11px var(--oi-mono); color: var(--oi-testo-3); }
.oi-consegna { list-style: none; margin: 0; padding: 0; }
.oi-consegna li { padding: 14px 0; border-bottom: 1px solid var(--oi-linea); font-size: 14px; }
.oi-consegna b { display: block; font-weight: 600; }
.oi-consegna span { display: block; margin-top: 3px; color: var(--oi-testo-2); font-size: 13px; }
.oi-consegna small { display: block; margin-top: 4px; font: 400 11.5px var(--oi-mono); color: var(--oi-testo-3); }
.oi-pannello-testo { margin: 16px 0 8px; font-size: 14px; line-height: 1.5; color: var(--oi-testo-2); }
.oi-salute { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "chi chip" "chi link"; align-items: center; gap: 6px 14px;
  padding: 14px 0; border-bottom: 1px solid var(--oi-linea); }
.oi-salute:last-child { border-bottom: 0; }
.oi-salute .oi-riga__chi { grid-area: chi; gap: 3px; }
.oi-salute .oi-riga__nome { font-size: 15px; }
.oi-salute .oi-riga__dove { white-space: normal; font-size: 13px; color: var(--oi-testo-2); }
.oi-salute .oi-chip { grid-area: chip; justify-self: end; }
.oi-salute__fenice { grid-area: link; justify-self: end; font-size: 13px; white-space: nowrap; }
.oi-altro .oi-voce { margin-top: 10px; }

/* --- Cerca ⌘K --- */
.oi-cerca__campo { padding: 0 18px; }
.oi-cerca__risultati { max-height: min(60vh, 520px); overflow-y: auto; border-top: 1px solid var(--oi-linea); }
.oi-cerca__risultati:empty { display: none; }
.oi-cerca__gruppo { padding: 12px 18px 6px; }
.oi-cerca__voce { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: 2px 12px; align-items: center; width: 100%; padding: 9px 18px; border: 0;
  background: transparent; color: var(--oi-testo); text-align: left; cursor: pointer; font: inherit; }
.oi-cerca__voce:hover, .oi-cerca__voce[aria-selected="true"] { background: var(--oi-riempi); }
.oi-cerca__voce .oi-avatar { grid-row: span 2; }
.oi-cerca__titolo { font-size: 14px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.oi-cerca__sotto { font-size: 12px; color: var(--oi-testo-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.oi-cerca__vuoto { padding: 18px; font-size: 14px; color: var(--oi-testo-2); }
.oi-cerca__piede { padding: 10px 18px; border-top: 1px solid var(--oi-linea); font: 400 11px var(--oi-mono); color: var(--oi-testo-3); }
.oi-file { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; background: var(--oi-riempi); color: var(--oi-testo-2); grid-row: span 2; }
.oi-file svg { width: 16px; height: 16px; }
/* oi-tokens.css dà display:flex al velo del ⌘K e vince su [hidden]: senza questa riga il riquadro resta sempre aperto */
.oi-cerca-velo[hidden] { display: none; }

/* --- Toast --- */
.oi-toast button { height: 30px; padding: 0 12px; border: 0; border-radius: 999px; background: var(--oi-riempi); color: var(--oi-accento-t); font: 600 13px var(--oi-font); cursor: pointer; }

/* --- Anteprima sul Mac --- */
.oi-top__anteprima { font: 500 10.5px var(--oi-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--oi-attesa-t); white-space: nowrap; }

/* --- Accesso --- */
.oi-accesso { min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: 24px 16px; background: radial-gradient(50% 40% at 50% 0%, rgba(51, 102, 255, .16), transparent 70%), var(--oi-fondo); }
.oi-accesso__scheda { width: min(360px, 100%); display: flex; flex-direction: column; align-items: center; gap: 22px; animation: oi-in .6s var(--oi-curva) backwards; }
.oi-accesso__scheda.is-trema { animation: oi-trema .35s var(--oi-curva); }
.oi-accesso__nome { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.oi-accesso__nome b { font-size: 30px; font-weight: 600; letter-spacing: -.02em; }
.oi-accesso__nome span { font-size: 14px; color: var(--oi-testo-2); }
.oi-accesso__campi { width: 100%; display: flex; flex-direction: column; gap: 10px; }
.oi-campo input { width: 100%; height: 46px; padding: 0 14px; border: 0; border-radius: var(--oi-r-ctrl); background: var(--oi-riempi); color: var(--oi-testo);
  font: 400 15px var(--oi-font); box-shadow: inset 0 0 0 1px var(--oi-linea); outline: none; transition: box-shadow .2s; }
.oi-campo input:focus { box-shadow: inset 0 0 0 1.5px var(--oi-accento); }
.oi-accesso .oi-btn--grande { width: 100%; justify-content: center; margin-top: 4px; }
.oi-accesso .oi-btn[disabled] { opacity: .6; cursor: progress; }
.oi-accesso__errore { min-height: 18px; text-align: center; font-size: 13px; color: var(--oi-problema-t); }
.oi-accesso__nota { text-align: center; font-size: 12px; color: var(--oi-testo-3); }

/* =====================================================================
   Pagine: passaggi, card, Il quadro
   ===================================================================== */
.oi-pagina { view-transition-name: pagina; }
html:not(.oi-cambio-lato)::view-transition-old(pagina) { animation: oi-vt-fuori .22s var(--oi-curva) both; }
html:not(.oi-cambio-lato)::view-transition-new(pagina) { animation: oi-vt-dentro .5s var(--oi-curva) both; }
@keyframes oi-vt-fuori { to { opacity: 0; transform: translateY(-6px) scale(.995); } }
@keyframes oi-vt-dentro { from { opacity: 0; transform: translateY(14px); } }

/* le schede entrano una dopo l'altra (60 ms), solo la prima volta che la pagina si disegna */
.oi-entra .oi-card, .oi-entra .oi-pannello { animation: oi-in .55s var(--oi-curva) backwards; animation-delay: calc(var(--i, 0) * 60ms + 140ms); }
.oi-card--link { color: var(--oi-testo); transition: transform .35s var(--oi-curva), box-shadow .35s var(--oi-curva); }
.oi-card--link:hover { color: var(--oi-testo); transform: translateY(-2px); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--oi-accento) 55%, transparent), 0 18px 34px -22px rgba(20, 32, 46, .45); }
.oi-griglia .oi-pannello, .oi-griglia--larga .oi-pannello { align-self: start; }
.oi-griglia--larga { align-items: start; }
.oi-griglia--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); align-items: stretch; }
.oi-griglia--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }

/* --- Il quadro: riga alta con l'Anello e le cose per te --- */
.oi-quadro-alto { display: grid; grid-template-columns: minmax(300px, 400px) minmax(0, 1fr); gap: 24px; margin-top: 28px; align-items: start; }
@container pagina (max-width: 820px) { .oi-quadro-alto { grid-template-columns: minmax(0, 1fr); } }
.oi-anello-card { min-height: 380px; padding: 28px 24px 20px; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.oi-anello { position: relative; width: 100%; max-width: 300px; aspect-ratio: 1; }
.oi-anello svg { width: 100%; height: 100%; overflow: visible; }
.oi-spicchio { cursor: pointer; outline: none; }
.oi-spicchio path { fill: none; stroke-linecap: round; }
.oi-spicchio__traccia { stroke: var(--oi-riempi); stroke-width: 20; transition: stroke-width .3s var(--oi-curva); }
.oi-spicchio__pieno { stroke-width: 20; stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke-width .3s var(--oi-curva), opacity .3s; }
.oi-entra .oi-spicchio__pieno { animation: oi-disegna 1s var(--oi-curva) backwards; animation-delay: calc(var(--i) * 90ms + 200ms); }
.oi-spicchio__presa { stroke: transparent; stroke-width: 40; }
.oi-anello.is-sopra .oi-spicchio:not(.is-acceso) .oi-spicchio__pieno { opacity: .35; }
.oi-spicchio.is-acceso .oi-spicchio__pieno, .oi-spicchio:focus-visible .oi-spicchio__pieno,
.oi-spicchio--senza.is-acceso .oi-spicchio__traccia, .oi-spicchio--senza:focus-visible .oi-spicchio__traccia { stroke-width: 26; }
.oi-spicchio:focus-visible .oi-spicchio__traccia { stroke: color-mix(in srgb, var(--oi-accento) 22%, var(--oi-riempi)); }
@keyframes oi-disegna { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
.oi-anello__centro { position: absolute; inset: 22%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; pointer-events: none; }
.oi-anello__kicker { opacity: 0; transition: opacity .25s; }
.oi-anello.is-sopra .oi-anello__kicker { opacity: 1; }
.oi-anello__n { font-size: 72px; font-weight: 600; letter-spacing: -.04em; line-height: 1; margin-top: 4px; }
.oi-anello.is-senza .oi-anello__n { font-size: 26px; letter-spacing: -.02em; color: var(--oi-testo-2); margin: 8px 0 2px; }
.oi-anello__parola { margin-top: 6px; font-size: 15px; font-weight: 600; line-height: 1.3; max-width: 17ch; }
.oi-anello.is-sopra .oi-anello__parola { font-size: 13.5px; font-weight: 500; }
.oi-anello__aiuto { margin: 14px 0 0; font-size: 12.5px; color: var(--oi-testo-3); text-align: center; }
.oi-anello-card__dentro { width: 100%; display: flex; flex-direction: column; align-items: center; }
.oi-legenda { display: none; }
/* riga alta in colonna: l'Anello a sinistra e la sua legenda a destra (sotto i 560 px la legenda va sotto) */
@container pagina (max-width: 820px) {
  .oi-anello-card { min-height: 0; padding: 24px 24px 18px; }
  .oi-anello-card__dentro { flex-direction: row; gap: 28px; }
  .oi-anello { flex: 0 0 260px; width: 260px; }
  .oi-anello__n { font-size: 60px; }
  .oi-legenda { display: grid; gap: 2px; flex: 1; min-width: 0; margin: 0; padding: 0; list-style: none; }
}
@container pagina (max-width: 560px) {
  .oi-anello-card { padding: 22px 14px 14px; }
  .oi-anello-card__dentro { flex-direction: column; gap: 14px; }
  .oi-anello { flex: none; width: 100%; max-width: 230px; }
  .oi-anello__n { font-size: 54px; }
  .oi-legenda { width: 100%; }
}
/* con il dito non si passa sopra: la legenda dice già il perché */
@media (hover: none) { .oi-anello__aiuto { display: none; } }
.oi-legenda__voce { width: 100%; display: grid; grid-template-columns: 8px minmax(0, 1fr) auto; grid-template-areas: "punto nome n" ". perche perche";
  align-items: center; gap: 1px 10px; padding: 7px 10px; border: 0; border-radius: 10px; background: transparent; color: var(--oi-testo); text-align: left; cursor: pointer;
  transition: background .2s; }
.oi-legenda__voce:hover { background: var(--oi-riempi); }
.oi-legenda__voce i { grid-area: punto; width: 8px; height: 8px; border-radius: 50%; }
.oi-legenda__voce i[data-senza] { background: transparent !important; box-shadow: inset 0 0 0 1.5px var(--oi-testo-3); }
.oi-legenda__voce b { grid-area: nome; font-size: 14px; font-weight: 600; }
.oi-legenda__voce .oi-mono { grid-area: n; font-size: 12.5px; color: var(--oi-testo-2); }
.oi-legenda__voce small { grid-area: perche; min-width: 0; font-size: 12.5px; color: var(--oi-testo-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.oi-cose { display: flex; flex-direction: column; gap: 8px; }
.oi-cosa { min-height: 64px; padding: 10px 12px 10px 14px; }
.oi-entra .oi-cose .oi-cosa { animation: oi-in .5s var(--oi-curva) backwards; animation-delay: calc(var(--i, 0) * 60ms + 200ms); }
.oi-cosa__icona { background: color-mix(in srgb, var(--oi-attesa) 14%, transparent); color: var(--oi-attesa-t); }
.oi-cosa__icona[data-st="problema"] { background: color-mix(in srgb, var(--oi-problema) 13%, transparent); color: var(--oi-problema-t); }
.oi-cosa__icona[data-st="bene"] { background: color-mix(in srgb, var(--oi-bene) 14%, transparent); color: var(--oi-bene-t); }
.oi-cosa .oi-riga__nome { font-size: 14.5px; }
.oi-cosa .oi-riga__dove { font-size: 12.5px; color: var(--oi-testo-2); }
.oi-cosa__fatto { width: 32px; height: 32px; border-radius: 50%; background: var(--oi-riempi); }
.oi-cosa__fatto:hover { background: color-mix(in srgb, var(--oi-bene) 18%, transparent); color: var(--oi-bene-t); }
.oi-cosa__fatto svg { width: 15px; height: 15px; }
.oi-tuttofatto { min-height: 332px; padding: 40px 20px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center; }
.oi-tuttofatto b { margin-top: 12px; font-size: 22px; font-weight: 600; letter-spacing: -.02em; }
.oi-tuttofatto span:last-child { color: var(--oi-testo-2); font-size: 15px; }

/* --- Il quadro: i 4 numeri --- */
.oi-kpis { margin-top: 24px; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
@container pagina (max-width: 820px) { .oi-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.oi-kpi { display: flex; flex-direction: column; gap: 6px; min-height: 108px; padding: 16px 18px; }
.oi-kpi__etichetta { font-size: 12.5px; color: var(--oi-testo-2); }
.oi-kpi__n { font-size: 30px; font-weight: 600; letter-spacing: -.03em; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.oi-kpi__n[data-st="attesa"] { color: var(--oi-attesa-t); }
.oi-kpi__n[data-st="problema"] { color: var(--oi-problema-t); }
.oi-kpi__piede { margin-top: auto; display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; min-height: 24px; }
.oi-kpi__sotto { min-width: 0; font: 400 11.5px var(--oi-mono); color: var(--oi-testo-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.oi-kpi__sotto[data-st="attesa"] { color: var(--oi-attesa-t); }
.oi-kpi__sotto[data-st="problema"] { color: var(--oi-problema-t); }
.oi-kpi__sotto[data-st="bene"] { color: var(--oi-bene-t); }
.oi-kpi__sotto--testo { font: 500 12.5px var(--oi-font); }
.oi-kpi__azione { font: 600 13px var(--oi-font); color: var(--oi-accento-t); }
.oi-scintilla { flex: none; overflow: visible; }
.oi-traccia { stroke-dasharray: 1; stroke-dashoffset: 0; }
.oi-entra .oi-traccia { animation: oi-disegna 1.1s var(--oi-curva) .35s backwards; }

/* --- Il quadro: la posta in 4 colonne mini, la famiglia --- */
.oi-colonne-mini { display: grid; gap: 16px; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: start; }
@container pagina (max-width: 860px) { .oi-colonne-mini { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.oi-casella--mini .oi-casella__testa, .oi-casella--come-mini .oi-casella__testa { min-height: 44px; }
.oi-famiglia-oggi { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@container pagina (max-width: 820px) { .oi-famiglia-oggi { grid-template-columns: minmax(0, 1fr); } }
.oi-prodotto { position: relative; display: flex; align-items: flex-start; gap: 14px; padding: 18px 20px; }
.oi-prodotto .oi-icona-app { flex: none; }
.oi-prodotto__testi { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.oi-prodotto__nome { font-size: 15px; font-weight: 600; }
.oi-prodotto__riga { display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; font-size: 13.5px; color: var(--oi-testo-2); }
.oi-prodotto__n { font-size: 26px; font-weight: 600; letter-spacing: -.03em; line-height: 1.1; color: var(--oi-testo); }
.oi-prodotto__frase { font-size: 13px; color: var(--oi-testo-2); line-height: 1.4; }
.oi-prodotto__freccia { position: absolute; top: 16px; right: 18px; color: var(--oi-testo-3); transition: transform .3s var(--oi-curva), color .3s; }
.oi-prodotto:hover .oi-prodotto__freccia { transform: translate(2px, -2px); color: var(--oi-accento-t); }
.oi-errori { display: flex; align-items: center; gap: 10px; margin: 32px 0 0; font-size: 12.5px; color: var(--oi-testo-3); }
.oi-errori::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--oi-attesa); flex: none; }

/* --- Schede grandi (Soldi) --- */
.oi-grande { padding: 20px 22px; display: flex; flex-direction: column; gap: 8px; }
.oi-grande__kicker { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; color: var(--oi-testo-2); }
.oi-grande__kicker i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.oi-grande__kicker[data-st="problema"] { color: var(--oi-problema-t); }
.oi-grande__kicker[data-st="bene"] { color: var(--oi-bene-t); }
.oi-grande__nome { font-size: 16px; font-weight: 600; }
.oi-grande__n { font-size: 42px; font-weight: 600; letter-spacing: -.035em; line-height: 1.05; }
.oi-grande__sotto { font-size: 13px; color: var(--oi-testo-2); }
.oi-grande__azioni { display: flex; gap: 8px; margin-top: auto; padding-top: 8px; }
.oi-grande__testo { font-size: 14px; color: var(--oi-testo-2); line-height: 1.5; }
.oi-grande__testo b { color: var(--oi-testo); font-weight: 600; }
.oi-grande__riga { display: flex; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 12px; border-top: 1px solid var(--oi-linea); font-size: 13px; color: var(--oi-testo-2); }
.oi-grande__riga b { color: var(--oi-testo); font-weight: 600; }
.oi-segmenti { display: flex; gap: 3px; height: 10px; margin: 8px 0 2px; }
.oi-segmenti i { min-width: 6px; border-radius: 999px; transform-origin: left; animation: oi-cresce-x .8s var(--oi-curva) backwards .3s; }
@keyframes oi-cresce-x { from { transform: scaleX(0); } }
.oi-riga-fenice { display: flex; align-items: center; gap: 14px; padding: 14px 20px; font-size: 14px; color: var(--oi-testo-2); }
.oi-riga-fenice b { color: var(--oi-testo); font-weight: 600; }
.oi-riga-fenice .oi-link { margin-left: auto; white-space: nowrap; color: var(--oi-accento-t); font-size: 13.5px; }

/* --- Il grafico dei 90 giorni --- */
.oi-grafico { padding: 6px 22px 20px; }
.oi-grafico svg { display: block; width: 100%; height: 220px; overflow: visible; }
.oi-grafico__griglia { stroke: var(--oi-linea); stroke-width: 1; vector-effect: non-scaling-stroke; }
.oi-grafico__oggi { stroke: var(--oi-problema); stroke-width: 2; vector-effect: non-scaling-stroke; }
.oi-grafico__linea { fill: none; stroke: var(--oi-bene); stroke-width: 2.5; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.oi-grafico__scopri { animation: oi-scopri 1.4s var(--oi-curva) .3s backwards; }
@keyframes oi-scopri { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
.oi-grafico__punto { fill: var(--oi-fondo-2); stroke: var(--oi-bene); stroke-width: 2.5; vector-effect: non-scaling-stroke; animation: oi-in .4s var(--oi-curva) 1.4s backwards; }
.oi-grafico__assi { position: relative; height: 18px; margin-top: 8px; font: 400 11px var(--oi-mono); color: var(--oi-testo-3); }
.oi-grafico__assi span { position: absolute; transform: translateX(-50%); white-space: nowrap; }
.oi-grafico__assi span:first-child { transform: none; }
.oi-grafico__assi span:last-child { transform: translateX(-100%); }

/* --- Barre dei mesi --- */
.oi-barre { display: flex; align-items: flex-end; gap: 8px; height: 190px; padding: 20px 22px 18px; }
.oi-barre__col { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 6px; height: 100%; }
.oi-barre__barra { position: relative; width: 100%; max-width: 44px; border-radius: 8px; overflow: hidden; background: var(--oi-riempi);
  transform-origin: bottom; animation: oi-cresce-y .8s var(--oi-curva) backwards; animation-delay: calc(var(--i) * 40ms + 200ms); }
.oi-barre__barra i { position: absolute; left: 0; right: 0; bottom: 0; background: color-mix(in srgb, var(--oi-accento) 55%, var(--oi-fondo-2)); }
.oi-barre__col.is-ora .oi-barre__barra { background: color-mix(in srgb, var(--oi-accento) 35%, var(--oi-fondo-2)); }
.oi-barre__col.is-ora .oi-barre__barra i { background: var(--oi-accento); }
@keyframes oi-cresce-y { from { transform: scaleY(0); } }
.oi-barre__val { font-size: 11px; color: var(--oi-testo); white-space: nowrap; }
.oi-barre__mese { font: 400 10.5px var(--oi-mono); color: var(--oi-testo-3); }
.oi-barra { display: block; height: 6px; margin-top: 6px; border-radius: 999px; background: var(--oi-riempi); overflow: hidden; max-width: 280px; }
.oi-barra i { display: block; height: 100%; border-radius: 999px; background: var(--oi-accento); transform-origin: left; }
.oi-entra .oi-barra i { animation: oi-cresce-x .8s var(--oi-curva) backwards .3s; }

/* --- Sistemi --- */
.oi-servizio { padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; }
.oi-servizio__testa { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.oi-servizio__testa b { font-size: 15px; font-weight: 600; }
.oi-servizio__det { font: 400 12px var(--oi-mono); color: var(--oi-testo-3); }
.oi-servizio__battito { margin: 2px 0 0; }
.oi-servizio__battito .oi-scintilla { width: 100%; height: 34px; }
.oi-fatto { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 11px 20px; border-bottom: 1px solid var(--oi-linea);
  font-size: 13.5px; color: var(--oi-testo-2); }
.oi-fatto > span:last-child { text-align: right; color: var(--oi-testo); }
.oi-fatto b { font-weight: 600; }
.oi-fatto .oi-mono { font-size: 12px; }
.oi-invio [data-st="problema"], .oi-consumi [data-st="problema"] { color: var(--oi-problema-t); }
.oi-invio [data-st="attesa"] { color: var(--oi-attesa-t); }
.oi-consumi [data-st="bene"] { color: var(--oi-bene-t); }
.oi-invio__spiega { margin: 0; padding: 14px 20px 10px; font-size: 13.5px; line-height: 1.5; color: var(--oi-testo-2); border-bottom: 1px solid var(--oi-linea); }
.oi-invio__spiega b { display: block; margin-top: 4px; font-weight: 600; }
.oi-invio__nota { margin: 0; padding: 8px 20px 0; font-size: 12.5px; color: var(--oi-testo-3); }
.oi-invio .oi-lato-dx__azioni { border-top: 0; padding-top: 14px; }
.oi-mini-barra { display: inline-block; width: 96px; height: 6px; margin-right: 12px; border-radius: 999px; background: var(--oi-riempi); overflow: hidden; vertical-align: middle; }
.oi-mini-barra i { display: block; height: 100%; border-radius: 999px; background: var(--oi-accento); }
.oi-consumi__numeri { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding: 18px 20px 8px; }
.oi-consumi__numeri small { display: block; margin-bottom: 4px; font-size: 12px; color: var(--oi-testo-3); }
.oi-consumi__numeri b { font-size: 30px; font-weight: 600; letter-spacing: -.03em; line-height: 1.1; }
.oi-consumo { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 20px 6px; font-size: 13.5px; color: var(--oi-testo-2); }
.oi-consumo b { color: var(--oi-testo); font-weight: 600; }
.oi-consumo--ok, .oi-consumo--no { justify-content: flex-start; margin: 14px 20px 0; padding: 12px 14px; border-radius: 12px; font-weight: 600; }
.oi-consumo--ok { background: color-mix(in srgb, var(--oi-bene) 12%, transparent); color: var(--oi-bene-t); }
.oi-consumo--no { background: color-mix(in srgb, var(--oi-problema) 12%, transparent); color: var(--oi-problema-t); }
.oi-consumo--ok svg, .oi-consumo--no svg { width: 16px; height: 16px; flex: none; }
.oi-consumi { padding-bottom: 18px; }
.oi-barra--ai { margin: 0 20px; max-width: none; }
.oi-barra--ai i { background: var(--oi-ai); }

/* --- Chiedi --- */
.oi-chiedi { display: flex; gap: 10px; max-width: 760px; }
.oi-chiedi__campo { flex: 1; min-width: 0; height: 46px; padding: 0 16px; border: 0; border-radius: var(--oi-r-ctrl); background: var(--oi-card);
  color: var(--oi-testo); font: 400 16px var(--oi-font); box-shadow: inset 0 0 0 1px var(--oi-linea); outline: none; }
.oi-chiedi__campo:focus { box-shadow: inset 0 0 0 1.5px var(--oi-accento); }
.oi-ai { max-width: 760px; }
.oi-ai svg { width: 14px; height: 14px; }
.oi-ai--largo { max-width: none; }
.oi-chiedi-pagina { display: flex; flex-direction: column; align-items: center; text-align: center; max-width: 820px; margin: 24px auto 0; }
.oi-chiedi__titolo { margin-top: 20px; font-size: 40px; letter-spacing: -.03em; }
.oi-chiedi__sotto { margin: 8px 0 26px; color: var(--oi-testo-2); font-size: 15px; }
.oi-chiedi-pagina .oi-chiedi { width: 100%; }
.oi-filtri--centro { justify-content: center; margin-top: 16px; }
#risposta { width: 100%; text-align: left; display: flex; flex-direction: column; }
.oi-domanda { align-self: flex-end; margin: 28px 0 12px; padding: 10px 16px; border-radius: 18px 18px 6px 18px; background: var(--oi-accento); color: var(--oi-fondo-2); font-size: 15px; max-width: 80%; animation: oi-in .4s var(--oi-curva); }
.oi-risposta { padding: 18px 20px; gap: 8px; animation: oi-in .5s var(--oi-curva); }
.oi-risposta__n { font-size: 40px; font-weight: 600; letter-spacing: -.03em; line-height: 1.1; }
.oi-risposta__testo { font-size: 15px; color: var(--oi-testo-2); line-height: 1.5; }
.oi-ai .oi-sfera--carica { margin: 6px 0; }
.oi-riga--mail { grid-template-columns: 32px minmax(0, 1fr) auto; align-items: start; padding: 12px 14px; }
.oi-riga--mail .oi-avatar { margin-top: 2px; }
.oi-riga__testi { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.oi-riga__testi .oi-riga__nome { display: flex; align-items: center; gap: 6px; }
.oi-riga__testi .oi-riga__nome span { overflow: hidden; text-overflow: ellipsis; }
.oi-riga__oggetto { font-size: 13px; color: var(--oi-testo-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.oi-riga__ora { font: 400 11.5px var(--oi-mono); color: var(--oi-testo-3); white-space: nowrap; padding-top: 2px; }

/* --- Comunicazioni prima che arrivi com.js --- */
.oi-in-arrivo { padding: 48px 24px; display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.oi-in-arrivo b { margin-top: 10px; font-size: 20px; font-weight: 600; letter-spacing: -.02em; }
.oi-in-arrivo span:last-child { max-width: 46ch; color: var(--oi-testo-2); line-height: 1.5; }

/* =====================================================================
   Tab bar e telefono (sotto i 760 px)
   ===================================================================== */
.oi-tab { display: none; }
@media (max-width: 1100px) {
  .oi-riga--attesa { grid-template-columns: 36px minmax(120px, 180px) minmax(0, 1fr) auto 56px; }
  .oi-riga--attesa .oi-riga__casella { display: none; }
  .oi-top__cerca { width: auto; }
  .oi-top__cerca span { display: none; }
}
@media (max-width: 760px) {
  .oi-top { gap: 10px; }
  .oi-top__dove, .oi-top__agg, .oi-ferma__testo { display: none; }
  .oi-pagina { padding: 24px 16px calc(96px + env(safe-area-inset-bottom, 0px)); }
  .oi-titolo { font-size: 28px; }
  .oi-eroe__n { font-size: 64px; }
  .oi-eroe__frase { font-size: 19px; }
  .oi-riga--attesa { grid-template-columns: 36px minmax(0, 1fr) auto; padding: 12px 16px; }
  .oi-riga--attesa .oi-riga__cosa { grid-column: 2 / 4; grid-row: 2; font-size: 13px; color: var(--oi-testo-2); }
  .oi-riga--attesa .oi-chip, .oi-riga--attesa .oi-riga__casella { display: none; }
  .oi-riga--attesa .oi-avatar { grid-row: span 2; }
  .oi-riga--consegna { grid-template-columns: 8px minmax(0, 1fr) auto; }
  .oi-riga--consegna .oi-riga__casella { display: none; }
  .oi-allarme { flex-wrap: wrap; }
  .oi-tab { position: fixed; left: 0; right: 0; bottom: 0; z-index: 15; display: grid; grid-template-columns: repeat(5, 1fr);
    padding: 6px 6px calc(6px + env(safe-area-inset-bottom, 0px)); background: var(--oi-vetro-forte); backdrop-filter: var(--oi-blur);
    -webkit-backdrop-filter: var(--oi-blur); border-top: 1px solid var(--oi-linea); }
  .oi-lato-dx { width: 100vw; }
  .oi-titolo-riga { align-items: flex-start; }
  .oi-grande__n { font-size: 34px; }
  .oi-chiedi { flex-direction: column; }
  .oi-chiedi__titolo { font-size: 30px; }
  /* le cose per te: il titolo va su due righe e il bottone resta (è l'unico modo di aprirle col dito) */
  .oi-cosa { grid-template-columns: 36px minmax(0, 1fr) auto auto; gap: 10px; padding: 10px 10px 10px 12px; }
  .oi-cosa__icona { width: 36px; height: 36px; }
  .oi-cosa .oi-riga__nome { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: 14px; line-height: 1.3; }
  .oi-cosa .oi-btn--primario { height: 30px; padding: 0 11px; font-size: 12.5px; }
  .oi-anello-card { min-height: 0; }
  .oi-tuttofatto { min-height: 0; }
  .oi-kpi__n { font-size: 26px; }
  /* Posta: testata compatta, le colonne a tutta larghezza da sfogliare col dito (la pagina non scorre di lato) */
  .oi-pagina--posta { padding-top: 16px; }
  .oi-posta-vista { gap: 12px; height: calc(100dvh - 56px - 16px - 84px - env(safe-area-inset-bottom, 0px)); min-height: 520px; }
  .oi-posta-testa__sx .oi-titolo { font-size: 26px; }
  .oi-eroe--riga .oi-eroe__n { font-size: 34px; }
  .oi-eroe--riga .oi-eroe__frase { font-size: 16px; }
  .oi-eroe--riga .oi-eroe__ctx { font-size: 13.5px; }
  .oi-posta-segmenti { display: flex; flex: none; width: 100%; }
  .oi-posta-segmenti button { flex: 1 0 auto; }
  .oi-posta-segmenti b { margin-left: 3px; font-weight: 600; color: var(--oi-attesa-t); }
  .oi-posta-piede { display: none; }
  .oi-colonne--vista, .oi-colonne-mini { display: flex; gap: 12px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; margin: 0 -16px; padding: 0 16px;
    scroll-padding: 0 16px; scrollbar-width: none; overscroll-behavior-x: contain; }
  .oi-colonne--vista::-webkit-scrollbar, .oi-colonne-mini::-webkit-scrollbar { display: none; }
  .oi-casella--vista { flex: 0 0 88vw; scroll-snap-align: start; }
  .oi-colonne-mini { padding-bottom: 4px; }
  .oi-casella--mini { flex: 0 0 82vw; scroll-snap-align: start; }
  .oi-colonne--vista > .oi-scheletro { flex: 0 0 88vw; }
}
.oi-tab > a, .oi-tab > button { position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 0; border: 0; background: none;
  font: 500 10.5px var(--oi-font); color: var(--oi-testo-3); cursor: pointer; }
.oi-tab svg { width: 22px; height: 22px; }
.oi-tab [aria-current="page"] { color: var(--oi-accento-t); }
.oi-tab__punto { display: none; position: absolute; top: 5px; left: calc(50% + 7px); width: 7px; height: 7px; border-radius: 50%; box-shadow: 0 0 0 2px var(--oi-fondo-2); }
.oi-tab [data-st="attesa"] .oi-tab__punto { display: block; background: var(--oi-attesa); }
.oi-tab [data-st="problema"] .oi-tab__punto { display: block; background: var(--oi-problema); }
.oi-lato-dx .oi-voce { color: var(--oi-testo); }

/* Movimento ridotto: tutto fermo, ma i tratti e le barre restano disegnati per intero */
@media (prefers-reduced-motion: reduce) {
  .oi-spicchio__pieno, .oi-traccia { stroke-dashoffset: 0; }
}