/* ═══════════════════════════════════════════════════════════════════════════
   TELEFONO — lo smartphone in mano (js/telefono.js).

   Il foglio della lettura diventa una custodia trasparente: l'oggetto è il
   telefono, alto quasi quanto la finestra, con la × grande fuori dal vetro.
   Dentro, tutte le misure sono in cqw (larghezza dello schermo): il telefono
   si rimpicciolisce intero su un portatile piccolo. I testi no: hanno un
   minimo in pixel, e il corpo non scende mai sotto i 17px.

   Le vecchie regole .telefono-aperto di lettura.css restano per chi le usa:
   qui si vince per specificità, non si cancella niente.
   ═════════════════════════════════════════════════════════════════════════ */

/* ══ LA CUSTODIA ══════════════════════════════════════════════════════════ */
.lettura:has(> .telefono--moderno) { padding: 0; background: #060504a6; }

.lettura__foglio.telefono--moderno {
  width: auto; max-height: none; overflow: visible; padding: 0;
  background: none; color: #000; box-shadow: none; border-radius: 0;
  font-size: 19px; line-height: 1.35; animation: none;
}

/* la × fuori dal telefono, in alto a destra, con la parola sotto */
.lettura__foglio.telefono--moderno > .lettura__chiudi {
  top: 0; right: auto; left: calc(100% + 24px); z-index: 3;
  width: 64px; height: 64px; border-radius: 50%;
  font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 40px; font-weight: 300; line-height: 1; color: #fff;
  background: #FFFFFF26; box-shadow: inset 0 0 0 1.5px #FFFFFF4d;
  transition: background var(--presa), transform var(--presa);
}
.lettura__foglio.telefono--moderno > .lettura__chiudi::after {
  content: 'Chiudi'; position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%);
  font-size: 17px; font-weight: 500; letter-spacing: .02em; color: #FFFFFFd9;
}
.lettura__foglio.telefono--moderno > .lettura__chiudi:hover { background: #FFFFFF40; color: #fff; transform: scale(1.05); }
.lettura__foglio.telefono--moderno > .lettura__chiudi:focus-visible { outline: 3px solid var(--brand-accento); outline-offset: 3px; }

/* finestra stretta: la × va nell'angolo, sopra a tutto */
@media (max-width: 640px) {
  .lettura__foglio.telefono--moderno > .lettura__chiudi { position: fixed; top: 12px; right: 12px; left: auto; }
  .lettura__foglio.telefono--moderno > .lettura__chiudi::after { content: none; }
}

/* ══ IL CORPO ═════════════════════════════════════════════════════════════
   Bordo di metallo sottile, cornice nera, vetro con gli angoli tondi. */
.tel {
  --alto: max(420px, min(90vh, 860px, calc((100vw - 220px) / .49)));
  position: relative;
  height: var(--alto); width: calc(var(--alto) * .49);
  padding: calc(var(--alto) * .005);
  border-radius: calc(var(--alto) * .078);
  background: linear-gradient(135deg, #6A6A70, #2A2A2E 22%, #1B1B1E 50%, #3A3A3F 78%, #75757C);
  box-shadow: 0 0 0 1px #000000b3, 0 50px 110px -30px #000000f2, 0 18px 40px -16px #000000cc;
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
  -webkit-font-smoothing: antialiased; user-select: none; text-align: left;
  animation: tel-alza 460ms cubic-bezier(.2, .9, .25, 1);
}
@keyframes tel-alza { from { opacity: 0; transform: translateY(48px) scale(.96); } }

.tel__tasto { position: absolute; width: calc(var(--alto) * .005); background: #3E3E43; border-radius: 2px; }
.tel__tasto--azione     { left: -2px; top: 16%; height: 3.4%; }
.tel__tasto--volume-su  { left: -2px; top: 23%; height: 6.4%; }
.tel__tasto--volume-giu { left: -2px; top: 31.5%; height: 6.4%; }
.tel__tasto--laterale   { right: -2px; top: 25%; height: 10%; }

.tel__cornice {
  width: 100%; height: 100%; padding: calc(var(--alto) * .0105);
  border-radius: calc(var(--alto) * .073); background: #050506;
}

.tel__schermo {
  position: relative; width: 100%; height: 100%; overflow: hidden;
  border-radius: calc(var(--alto) * .062);
  container-type: size; isolation: isolate;
  background: #000; color: #000;
  font-size: var(--testo); line-height: 1.32;

  --barra: 14cqw;
  --testo: clamp(17px, 5cqw, 20px);
  --meta: clamp(15px, 4.4cqw, 17px);
  --titolo: clamp(26px, 8.6cqw, 34px);
  --blu: #1A6FE3;
  --tel-rosso: #E5342B;
  --grigio: #6C6C70;
}
:where(.tel__schermo) button { font: inherit; color: inherit; text-align: inherit; }
.tel__schermo [hidden] { display: none !important; }
.tel__schermo :focus-visible { outline: 3px solid #4C9BFF; outline-offset: 2px; }

/* lo sfondo: due macchie di colore sfumate, da ambientazione.telefono.sfondo */
.tel__sfondo {
  position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(90% 60% at 15% 12%, color-mix(in srgb, var(--sfondo-2) 70%, #fff 0%) 0%, transparent 70%),
    radial-gradient(110% 70% at 95% 95%, color-mix(in srgb, var(--sfondo-2) 85%, #000) 0%, transparent 65%),
    linear-gradient(165deg, var(--sfondo-1) 10%, color-mix(in srgb, var(--sfondo-1) 55%, var(--sfondo-2)) 55%, var(--sfondo-2));
}
.tel__sfondo::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(#0000 55%, #0000004d);
}

/* ── la barra di stato e l'isola ──────────────────────────────────────── */
.tel__barra {
  position: absolute; top: 0; left: 0; right: 0; height: var(--barra); z-index: 6;
  display: flex; align-items: center; justify-content: space-between;
  padding: 1cqw 7.5cqw 0 8cqw; pointer-events: none; color: #fff;
  transition: color 200ms ease;
}
.tel__ora {
  min-width: 19cqw; text-align: center;
  font-size: clamp(15px, 4.6cqw, 18px); font-weight: 600; letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;
}
.tel__icone { display: flex; align-items: center; gap: 1.5cqw; }
.tel__icone svg { height: 3.1cqw; width: auto; fill: currentColor; display: block; }
.tel__batteria {
  position: relative; width: 7cqw; height: 3.5cqw; margin-right: .8cqw;
  border: .32cqw solid color-mix(in srgb, currentColor 55%, transparent); border-radius: 1.1cqw;
}
.tel__batteria::after {
  content: ''; position: absolute; left: calc(100% + .35cqw); top: 50%; transform: translateY(-50%);
  width: .55cqw; height: 1.3cqw; border-radius: 0 .5cqw .5cqw 0;
  background: color-mix(in srgb, currentColor 55%, transparent);
}
.tel__batteria i {
  position: absolute; left: .35cqw; top: .35cqw; bottom: .35cqw;
  width: calc((100% - .7cqw) * var(--livello, .7)); border-radius: .5cqw; background: currentColor;
}
.tel__batteria--bassa i { background: #FF453A; }
.tema-chiaro .tel__barra { color: #000; }

.tel__isola {
  position: absolute; top: 2.8cqw; left: 50%; z-index: 7; transform: translateX(-50%);
  width: 31cqw; height: 9cqw; border-radius: 99px; background: #000; pointer-events: none;
}
.tel__isola::after {
  content: ''; position: absolute; right: 3cqw; top: 50%; transform: translateY(-50%);
  width: 3.2cqw; height: 3.2cqw; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #34406A, #0A0B12 62%);
}

/* l'indicatore della home: una barretta, con un bersaglio molto più grande */
.tel__indicatore {
  position: absolute; left: 50%; bottom: 0; z-index: 8; transform: translateX(-50%);
  width: 52cqw; height: 7cqw; display: grid; place-items: center; color: #fff;
}
.tel__indicatore::before {
  content: ''; width: 36cqw; height: 1.4cqw; border-radius: 99px; background: currentColor;
  transition: transform 120ms ease, opacity 120ms ease; opacity: .92;
}
.tel__indicatore:hover::before { transform: scaleX(1.06); opacity: 1; }
.tema-chiaro .tel__indicatore { color: #000; }

/* ══ LA HOME ══════════════════════════════════════════════════════════════ */
.tel__home {
  position: absolute; inset: 0; z-index: 1;
  display: flex; flex-direction: column;
  padding: calc(var(--barra) + 4.5cqw) 6cqw 8.5cqw;
  color: #fff; transition: opacity 200ms ease;
}
.tel__home--dietro { opacity: 0; pointer-events: none; }

.tel-home__widget { display: grid; grid-template-columns: 1fr 1fr; gap: 6cqw; }
.tel-widget {
  aspect-ratio: 1; min-width: 0; overflow: hidden;
  display: flex; flex-direction: column; align-items: flex-start;
  padding: 4.2cqw 4.6cqw; border-radius: 9.5cqw;
  box-shadow: 0 2cqw 6cqw -3cqw #00000080;
  transition: transform 120ms ease, filter 120ms ease;
}
.tel-widget:active { transform: scale(.96); }
.tel-widget:hover { filter: brightness(1.04); }
/* anche nei riquadri il testo resta leggibile (15px e più): dentro ci sta
   poco, e il resto si legge aprendo l'app */
.tel-widget--calendario { background: #fff; color: #111; padding-top: 0; }
.tel-widget__giorno {
  flex: none; align-self: stretch; margin: 0 -4.6cqw 2.2cqw; padding: 2.6cqw 5.2cqw 2.2cqw;
  background: linear-gradient(165deg, #FF7A59, #E0452B); color: #fff;
  font-size: clamp(15px, 4.2cqw, 17px); font-weight: 700; line-height: 1.25;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tel-widget__evento {
  display: grid; width: 100%; padding-left: 2.2cqw; border-left: 1cqw solid #E0452B;
}
.tel-widget__evento b {
  font-size: clamp(16px, 4.6cqw, 18px); font-weight: 600; line-height: 1.2;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.tel-widget__evento small, .tel-widget__vuoto { font-size: clamp(15px, 4.2cqw, 17px); line-height: 1.25; color: var(--grigio); }
/* l'orario su una riga sola: sul telefono piccolo sborda di pochi pixel nel margine, invece di andare a capo e uscire dal riquadro */
.tel-widget__evento small { white-space: nowrap; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.tel-widget--meteo { background: linear-gradient(170deg, var(--m1), var(--m2)); color: #fff; }
.tel-widget__riga { display: flex; align-items: center; gap: 1.4cqw; margin-bottom: auto; }
.tel-widget__icona svg { width: 10.5cqw; height: 10.5cqw; display: block; }
.tel-widget__gradi { font-size: clamp(30px, 11cqw, 44px); font-weight: 300; line-height: 1; }
.tel-widget__citta { max-width: 100%; font-size: clamp(16px, 4.6cqw, 18px); font-weight: 600; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tel-widget__cielo { font-size: clamp(15px, 4.2cqw, 17px); font-weight: 500; line-height: 1.25; white-space: nowrap; }

.tel-griglia {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 5.5cqw 2cqw; margin-top: 7cqw;
}
.tel-app { display: grid; justify-items: center; align-content: start; gap: 1.8cqw; min-width: 0; }
.tel-icona {
  position: relative; display: block; flex: none;
  width: 18.5cqw; height: 18.5cqw; border-radius: 23%;
  background: linear-gradient(165deg, var(--c1), var(--c2));
  box-shadow: 0 1cqw 2.6cqw -1cqw #00000080, inset 0 0 0 .25cqw #FFFFFF1f;
  transition: transform 120ms ease, filter 120ms ease;
}
.tel-icona > svg { width: 100%; height: 100%; display: block; }
.tel-app:hover .tel-icona { filter: brightness(1.07); }
.tel-app:active .tel-icona { transform: scale(.9); filter: brightness(.85); }
/* il nome non si tronca: "Impostazioni" può sbordare un poco dalla colonna,
   c'è spazio fra un'icona e l'altra. "unsafe": sborda a metà per lato, invece
   di partire da sinistra e uscire dallo schermo sul telefono piccolo */
.tel-app__nome {
  justify-self: unsafe center;
  white-space: nowrap; letter-spacing: -.01em;
  font-size: clamp(15px, 4.4cqw, 17px); font-weight: 500; text-shadow: 0 1px 3px #000000a6;
}
.tel-badge {
  position: absolute; top: -1.8cqw; right: -1.8cqw;
  min-width: max(6.8cqw, 22px); height: max(6.8cqw, 22px); padding: 0 1.7cqw; border-radius: 99px;
  display: grid; place-items: center;
  background: #F2362F; color: #fff; font-size: clamp(15px, 4.4cqw, 17px); font-weight: 600; line-height: 1;
  box-shadow: 0 .5cqw 1.2cqw #0000004d;
}

.tel-pagine { margin-top: auto; display: flex; justify-content: center; gap: 2.2cqw; padding: 3cqw 0; }
.tel-pagine i { width: 2cqw; height: 2cqw; border-radius: 50%; background: #FFFFFF66; }
.tel-pagine i.attiva { background: #fff; }

.tel-dock {
  display: flex; justify-content: space-around; padding: 3.2cqw 2.5cqw; border-radius: 10.5cqw;
  background: #FFFFFF33; backdrop-filter: blur(18px) saturate(1.5);
  box-shadow: inset 0 0 0 .25cqw #FFFFFF26;
}
.tel-dock .tel-icona { width: 17.5cqw; height: 17.5cqw; }
.tel-dock .tel-app__nome { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

/* ── la notifica che scende ───────────────────────────────────────────── */
.tel__avvisi { position: absolute; top: calc(var(--barra) - 1cqw); left: 2.6cqw; right: 2.6cqw; z-index: 9; pointer-events: none; }
.tel-avviso {
  pointer-events: auto; width: 100%;
  display: flex; align-items: center; gap: 3cqw; padding: 3cqw 3.6cqw;
  border-radius: 6.5cqw; background: #F4F4F6f0; color: #000;
  backdrop-filter: blur(16px); box-shadow: 0 3cqw 9cqw -2cqw #0000008c;
  transition: opacity 400ms ease, transform 400ms ease;
}
.tel-avviso .tel-icona { width: 11cqw; height: 11cqw; box-shadow: none; }
.tel-avviso--urgente { box-shadow: inset 0 0 0 .6cqw var(--tel-rosso), 0 3cqw 9cqw -2cqw #0000008c; }
.tel-avviso--via { opacity: 0; transform: translateY(-30%); }
.tel-avviso__corpo { flex: 1; min-width: 0; display: grid; }
.tel-avviso__testa { display: flex; align-items: baseline; justify-content: space-between; gap: 2cqw; font-size: var(--meta); }
.tel-avviso__testa b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tel-avviso__testa small { font-size: clamp(15px, 4.2cqw, 16px); color: var(--grigio); flex: none; }
.tel-avviso__testo {
  font-size: var(--meta); line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* ══ LE APP ═══════════════════════════════════════════════════════════════ */
.tel__palco { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.tel__vista { position: absolute; inset: 0; overflow: hidden; background: #fff; pointer-events: auto; will-change: transform; }

.tel-pagina {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  padding-top: var(--barra); background: #fff; color: #000;
}
.tel-pagina--grigia { background: #F2F2F7; }
.tel-pagina--nera { background: #000; color: #fff; }

.tel-nav {
  flex: none; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  min-height: 12cqw; padding: 0 3cqw;
}
.tel-nav__indietro {
  justify-self: start; display: inline-flex; align-items: center; gap: .6cqw;
  min-height: 11cqw; padding: 1cqw 3cqw 1cqw 0;
  color: var(--accento, var(--blu)); font-size: var(--testo); font-weight: 500;
}
.tel-nav__indietro:hover span:last-child { text-decoration: underline; text-underline-offset: 3px; }
.tel-nav__freccia svg { width: 6cqw; height: 6cqw; display: block; }
.tel-nav__centro { font-size: var(--testo); font-weight: 600; text-align: center; min-width: 0; }
.tel-nav__destra { justify-self: end; }
.tel-pagina--nera .tel-nav__indietro, .tel-pagina--meteo .tel-nav__indietro { color: #fff; }

.tel-corpo {
  flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  padding: 0 5cqw 12cqw; scrollbar-width: none;
}
.tel-corpo::-webkit-scrollbar { display: none; }
.tel-titolo { margin: .5cqw 0 3.5cqw; font-size: var(--titolo); font-weight: 700; letter-spacing: -.01em; line-height: 1.15; }

.tel-glifo svg, .tel-riga__freccia svg, .tel-riga__icona svg { width: 100%; height: 100%; display: block; }
.tel-glifo { display: inline-block; width: 1em; height: 1em; }

/* liste a gruppi, come nelle impostazioni di ogni telefono */
.tel-gruppo { background: #fff; border-radius: 3.6cqw; overflow: hidden; margin: 0 0 5.5cqw; }
.tel-elenco { margin: 0 -5cqw; }
.tel-riga {
  position: relative; display: flex; align-items: center; gap: 3.2cqw;
  width: 100%; min-height: 13.5cqw; padding: 2.6cqw 4cqw; font-size: var(--testo);
}
.tel-elenco .tel-riga { padding-left: 5cqw; padding-right: 5cqw; }
.tel-riga + .tel-riga::before {
  content: ''; position: absolute; top: 0; right: 0; left: 4cqw; border-top: 1px solid #3C3C4333;
}
button.tel-riga { transition: background 120ms ease; }
button.tel-riga:hover { background: #F2F2F7; }
button.tel-riga:active { background: #E0E0E6; }
.tel-riga__testo { flex: 1; min-width: 0; display: grid; gap: .3cqw; }
.tel-riga__titolo { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tel-riga__sotto {
  font-size: var(--meta); color: var(--grigio);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tel-riga__sotto b { font-weight: 600; color: #3A3A3C; margin-right: .3em; }
.tel-riga__lato { flex: none; font-size: var(--meta); color: var(--grigio); }
.tel-riga__freccia { flex: none; width: 4cqw; height: 4cqw; color: #C4C4C8; }
.tel-riga__icona { flex: none; width: 6cqw; height: 6cqw; color: var(--blu); }

.tel-vuoto { display: grid; justify-items: center; gap: 2cqw; text-align: center; padding: 16cqw 6cqw; color: var(--grigio); }
.tel-vuoto b { font-size: clamp(20px, 6cqw, 24px); color: #000; font-weight: 600; }
.tel-vuoto p { margin: 0; font-size: var(--testo); }
.tel-vuoto__glifo { width: 16cqw; height: 16cqw; color: #C4C4C8; }
.tel-vuoto__glifo svg { width: 100%; height: 100%; display: block; }
.tel-pagina--nera .tel-vuoto b { color: #fff; }

.tel-piede {
  flex: none; margin: 0; padding: 3cqw 5cqw 9cqw; text-align: center;
  font-size: var(--meta); color: var(--grigio); border-top: 1px solid #3C3C4326; background: #F9F9FB;
}

.tel-avatar {
  flex: none; display: grid; place-items: center;
  width: 13cqw; height: 13cqw; border-radius: 50%;
  background: linear-gradient(#A9AEB9, #80858F); color: #fff;
  font-size: clamp(16px, 5cqw, 20px); font-weight: 600; letter-spacing: .02em;
}

/* ── Messaggi ─────────────────────────────────────────────────────────── */
.tel-conversazioni { margin: 0 -5cqw 0 -3cqw; }
.tel-conv {
  position: relative; display: grid; grid-template-columns: 3cqw 13cqw 1fr; align-items: center; gap: 2.6cqw;
  width: 100%; padding: 3cqw 5cqw 3cqw 0;
}
.tel-conv + .tel-conv::before { content: ''; position: absolute; top: 0; right: 0; left: 18.6cqw; border-top: 1px solid #3C3C4333; }
.tel-conv:hover { background: #F5F5F8; }
.tel-conv__punto { justify-self: end; width: 2.6cqw; height: 2.6cqw; border-radius: 50%; }
.tel-conv--nuova .tel-conv__punto { background: var(--blu); }
.tel-conv__testo { min-width: 0; display: grid; gap: .5cqw; }
.tel-conv__testa { display: flex; align-items: center; gap: 1.6cqw; }
.tel-conv__nome { flex: 1; min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tel-conv__ora { font-size: var(--meta); color: var(--grigio); }
.tel-conv__freccia { width: 3.6cqw; height: 3.6cqw; color: #C4C4C8; }
.tel-conv__freccia svg { width: 100%; height: 100%; display: block; }
.tel-conv__anteprima {
  font-size: clamp(17px, 4.6cqw, 18px); line-height: 1.3; color: var(--grigio);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.tel-conv--nuova .tel-conv__anteprima { color: #3A3A3C; }

.tel-chat .tel-nav { min-height: 21cqw; background: #F6F6F8; border-bottom: 1px solid #3C3C4326; padding-bottom: 1.5cqw; }
.tel-chat__chi { display: grid; justify-items: center; gap: .8cqw; }
.tel-chat__chi .tel-avatar { width: 11cqw; height: 11cqw; font-size: clamp(14px, 4.2cqw, 17px); }
.tel-chat__chi span { font-size: var(--meta); font-weight: 500; max-width: 38cqw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* sotto l'ultimo fumetto resta lo spazio dell'indicatore della home */
.tel-chat .tel-corpo { padding: 0 3.6cqw 11cqw; }
.tel-fili { display: flex; flex-direction: column; gap: 1.4cqw; padding: 2cqw 0; }
.tel-fili__ora { align-self: center; margin: 3cqw 0 1cqw; font-size: var(--meta); font-weight: 500; color: var(--grigio); }
.tel-bolla {
  max-width: 80%; padding: 2.3cqw 3.8cqw; border-radius: 5cqw;
  font-size: var(--testo); line-height: 1.32; white-space: pre-wrap; overflow-wrap: anywhere;
}
.tel-bolla--ricevuta { align-self: flex-start; background: #E9E9EB; color: #000; border-bottom-left-radius: 1.4cqw; }
.tel-bolla--inviata  { align-self: flex-end; background: var(--blu); color: #fff; border-bottom-right-radius: 1.4cqw; }
.tel-bolla--urgente  { background: #FDE8E6; color: #5A0D08; box-shadow: inset 0 0 0 .55cqw var(--tel-rosso); }
.tel-urgente {
  align-self: flex-start; display: flex; align-items: center; gap: 1.4cqw; margin: 1.6cqw 0 0 1.4cqw;
  font-size: var(--meta); font-weight: 700; color: #C8231B;
}
.tel-urgente::before {
  content: '!'; display: grid; place-items: center; width: 4.6cqw; height: 4.6cqw; border-radius: 50%;
  background: var(--tel-rosso); color: #fff; font-size: clamp(12px, 3.4cqw, 14px); font-weight: 800;
}
.tel-consegnato { align-self: flex-end; margin: -.4cqw 1.4cqw 0 0; font-size: clamp(15px, 4.2cqw, 16px); font-weight: 500; color: var(--grigio); }

/* ── Telefono ─────────────────────────────────────────────────────────── */
.tel-segmenti { display: flex; padding: .6cqw; border-radius: 2.4cqw; background: #7676801f; }
.tel-segmenti button {
  min-width: 17cqw; padding: 1.4cqw 3cqw; border-radius: 1.8cqw;
  font-size: var(--meta); font-weight: 500; text-align: center;
}
.tel-segmenti button.attivo { background: #fff; font-weight: 600; box-shadow: 0 .4cqw 1.2cqw #00000026; }
.tel-chiamata-riga .tel-riga__titolo { font-weight: 600; }
.tel-chiamata-riga--persa .tel-riga__titolo { color: #D7261E; }

.tel-chiamata {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center;
  padding: calc(var(--barra) + 14cqw) 8cqw 12cqw; text-align: center; color: #fff;
  background: radial-gradient(130% 75% at 50% 0%, #56657C, #1A2029 72%);
}
.tel-avatar--grande { width: 30cqw; height: 30cqw; margin-bottom: 5cqw; font-size: clamp(34px, 12cqw, 48px); font-weight: 500; }
.tel-chiamata__nome { margin: 0 0 1.5cqw; font-size: var(--titolo); font-weight: 500; line-height: 1.15; }
.tel-chiamata__stato { margin: 0; font-size: var(--testo); color: #FFFFFFbf; }
.tel-chiamata--finita .tel-chiamata__stato { color: #FF9C94; font-weight: 600; }
.tel-puntini::after { content: '…'; display: inline-block; width: 0; overflow: hidden; vertical-align: bottom; animation: tel-puntini 1.2s steps(4) infinite; }
@keyframes tel-puntini { to { width: 1.25em; } }
.tel-chiamata__tasti { margin-top: auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6cqw; width: 100%; }
.tel-tondo { display: grid; justify-items: center; gap: 2cqw; }
.tel-tondo small { font-size: var(--meta); }
.tel-tondo__cerchio { display: grid; place-items: center; width: 19cqw; height: 19cqw; border-radius: 50%; background: #FFFFFF2e; }
.tel-tondo__cerchio svg { width: 8.5cqw; height: 8.5cqw; }
.tel-riaggancia {
  display: grid; place-items: center; margin-top: 9cqw;
  width: 19cqw; height: 19cqw; border-radius: 50%; background: #EB4034;
  transition: filter 120ms ease, transform 120ms ease;
}
.tel-riaggancia:hover { filter: brightness(1.1); }
.tel-riaggancia:active { transform: scale(.94); }
.tel-riaggancia[disabled] { opacity: .5; cursor: default; }
.tel-riaggancia svg { width: 10cqw; height: 10cqw; transform: rotate(135deg); }

/* ── Foto ─────────────────────────────────────────────────────────────── */
.tel-foto-griglia { display: grid; grid-template-columns: repeat(3, 1fr); gap: .7cqw; margin: 0 -5cqw; }
.tel-foto-griglia button { aspect-ratio: 1; padding: 0; overflow: hidden; background: #ddd; }
.tel-foto-griglia canvas { width: 100%; height: 100%; display: block; transition: filter 120ms ease; }
.tel-foto-griglia button:hover canvas { filter: brightness(1.08); }
.tel-foto-conta { margin: 4cqw 0; text-align: center; font-size: var(--meta); font-weight: 600; color: var(--grigio); }
.tel-foto-grande .tel-corpo { padding: 0; display: flex; flex-direction: column; }
.tel-foto-cornice { margin: 8cqw 0 5cqw; }
.tel-foto-cornice canvas { width: 100%; aspect-ratio: 1; display: block; }
.tel-foto-didascalia { margin: 0; padding: 0 7cqw; text-align: center; font-size: var(--testo); font-weight: 500; }
.tel-foto-passi { display: flex; align-items: center; justify-content: space-between; padding: 6cqw 8cqw 10cqw; }
.tel-foto-passi button { display: grid; place-items: center; width: 14cqw; height: 14cqw; border-radius: 50%; background: #FFFFFF24; color: #fff; }
.tel-foto-passi button:hover { background: #FFFFFF3d; }
.tel-foto-passi .tel-glifo { width: 6cqw; height: 6cqw; }
.tel-foto-indice { margin: 0; font-size: var(--meta); color: #FFFFFF99; }

/* chat di gruppo: il nome sopra i fumetti ricevuti */
.tel-bolla__da { margin: 2cqw 0 .6cqw 2.5cqw; font-size: var(--meta); color: var(--grigio); font-weight: 600; }
/* le risposte rapide: pillole a tutta larghezza, grandi da toccare */
.tel-rapide { display: grid; gap: 2cqw; margin: 4cqw 0 0; }
.tel-rapide__titolo { font-size: var(--meta); color: var(--grigio); text-align: center; }
.tel-rapida {
  justify-self: end; max-width: 88%; padding: 2.8cqw 4cqw; border-radius: 5cqw;
  border: 1.5px solid var(--blu); color: var(--blu) !important; text-align: right !important;
  line-height: 1.3; transition: background 120ms ease;
}
.tel-rapida:hover { background: #1A6FE314; }
.tel-chat__reazioni .reazione { font-size: var(--meta); margin-top: 4cqw; padding-top: 3cqw; }

/* ── Mail ─────────────────────────────────────────────────────────────── */
.tel-posta__oggetto { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tel-mail .tel-corpo { padding-top: 1cqw; }
.tel-mail__oggetto { margin: 1cqw 0 4cqw; font-size: clamp(22px, 6.8cqw, 27px); font-weight: 700; line-height: 1.2; }
.tel-mail__chi {
  display: flex; align-items: center; gap: 3cqw;
  padding-bottom: 4cqw; margin-bottom: 4cqw; border-bottom: 1px solid #3C3C4326;
}
.tel-mail__righe { display: grid; gap: .4cqw; min-width: 0; font-size: var(--meta); color: var(--grigio); }
.tel-mail__righe b { font-size: var(--testo); color: #000; font-weight: 600; }
.tel-mail__testo { margin: 0 0 4cqw; line-height: 1.45; }
.tel-mail__allegato {
  display: inline-flex; align-items: center; gap: 2cqw; margin: 0 0 5cqw;
  padding: 2.4cqw 3.6cqw; border-radius: 3cqw; background: #F2F2F7; font-size: var(--meta);
}
.tel-mail__graffetta { width: 5cqw; height: 5cqw; color: var(--grigio); }
.tel-mail__graffetta svg { width: 100%; height: 100%; display: block; }
/* la firma: dove si segna il conflitto, come su un foglio */
.tel-mail__firma { margin: 0; padding-top: 4cqw; border-top: 1px solid #3C3C4326; font-size: var(--meta); color: #3A3A3C; line-height: 1.4; }
.tel-mail__firma .anom { text-align: left; }
.tel-mail__reazioni .reazione { font-size: var(--meta); margin-top: 5cqw; padding-top: 3.5cqw; }

/* ── Calendario ───────────────────────────────────────────────────────── */
.tel-pagina--calendario { --accento: var(--tel-rosso); }
.tel-pagina--calendario .tel-titolo { font-size: clamp(24px, 7.6cqw, 30px); }
.tel-settimana { display: grid; grid-template-columns: repeat(7, 1fr); margin: 0 -2cqw 2cqw; text-align: center; }
.tel-settimana span { display: grid; justify-items: center; gap: 1cqw; }
.tel-settimana small { font-size: clamp(15px, 4.2cqw, 16px); color: var(--grigio); }
.tel-settimana b { display: grid; place-items: center; width: 10cqw; height: 10cqw; border-radius: 50%; font-size: var(--meta); font-weight: 500; }
.tel-settimana .oggi b { background: var(--tel-rosso); color: #fff; font-weight: 700; }
.tel-nota-vuota { margin: 2cqw 0; font-size: var(--testo); color: var(--grigio); }
/* la colonna delle ore è larga abbastanza per "17:00" a 15px anche sul telefono più piccolo */
.tel-giorno { --h: 21cqw; --colonna: max(17cqw, 50px); position: relative; height: calc(var(--ore) * var(--h) + 6cqw); margin-top: 5cqw; }
.tel-giorno__ora { position: absolute; left: var(--colonna); right: 0; top: calc(var(--i) * var(--h)); border-top: 1px solid #E3E3E8; }
.tel-giorno__ora span {
  position: absolute; right: calc(100% + 1.6cqw); top: 0; transform: translateY(-50%);
  font-size: clamp(15px, 4.2cqw, 16px); color: var(--grigio); font-variant-numeric: tabular-nums;
}
.tel-giorno__ora--coperta span { visibility: hidden; }
.tel-evento {
  position: absolute; left: calc(var(--colonna) + 1.5cqw); right: 0; overflow: hidden;
  top: calc(var(--da) * var(--h) + 1px); height: calc(var(--per) * var(--h) - 2px);
  display: grid; align-content: start; gap: .3cqw; padding: 1cqw 2.6cqw;
  border-left: 1.2cqw solid var(--c); border-radius: 1.6cqw;
  background: color-mix(in srgb, var(--c) 16%, #fff); color: color-mix(in srgb, var(--c) 62%, #000);
}
.tel-evento b { font-size: var(--meta); font-weight: 600; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tel-evento small { font-size: clamp(15px, 4.2cqw, 16px); line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tel-evento--passato { opacity: .55; }
.tel-adesso { position: absolute; left: var(--colonna); right: 0; top: calc(var(--da) * var(--h)); z-index: 2; height: .55cqw; margin-top: -.27cqw; background: var(--tel-rosso); }
.tel-adesso::before { content: ''; position: absolute; left: -1.2cqw; top: 50%; width: 2.4cqw; height: 2.4cqw; border-radius: 50%; background: var(--tel-rosso); transform: translateY(-50%); }
.tel-adesso span {
  position: absolute; right: calc(100% + 1.4cqw); top: 50%; transform: translateY(-50%);
  padding: .2cqw 1cqw; border-radius: 99px; background: #fff;
  font-size: clamp(15px, 4.2cqw, 16px); font-weight: 700; color: var(--tel-rosso); font-variant-numeric: tabular-nums;
}

/* ── Meteo ────────────────────────────────────────────────────────────── */
.tel-pagina--meteo { background: linear-gradient(175deg, var(--m1), var(--m2)); color: #fff; }
.tel-meteo { text-align: center; padding: 2cqw 0 1cqw; text-shadow: 0 .3cqw 1.5cqw #0000002e; }
.tel-meteo p, .tel-meteo h2 { margin: 0; }
.tel-meteo__citta { font-size: clamp(26px, 8.4cqw, 34px); font-weight: 500; }
.tel-meteo__gradi { font-size: clamp(64px, 23cqw, 96px); font-weight: 200; line-height: 1.05; padding-left: 4cqw; }
.tel-meteo__cielo { font-size: var(--testo); font-weight: 500; }
.tel-meteo__minmax { font-size: var(--testo); font-weight: 500; white-space: pre; }
.tel-scheda { margin-top: 6cqw; padding: 3.4cqw 4cqw 4cqw; border-radius: 4.5cqw; background: #FFFFFF26; backdrop-filter: blur(10px); }
.tel-scheda__titolo { margin: 0 0 3cqw; padding-bottom: 2.6cqw; border-bottom: 1px solid #FFFFFF40; font-size: var(--meta); font-weight: 500; }
/* le ore vanno a capo in righe pari invece di scorrere di lato: una fila che
   esce dalla scheda, col mouse, non si trova. Le colonne (al massimo 4) le
   conta telefono.js. Niente spazio fra le colonne: il contenuto è centrato, e
   quel poco di larghezza serve a "Adesso" sul telefono più piccolo */
.tel-ore { display: grid; grid-template-columns: repeat(var(--colonne, 4), minmax(0, 1fr)); gap: 4cqw 0; }
/* la colonna interna non si allarga oltre la sua: se "Adesso" non ci sta, sborda
   di pari misura a destra e a sinistra, e icona e gradi restano al centro */
.tel-ore > div { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 1.6cqw; }
.tel-ore small { font-size: var(--meta); font-weight: 500; white-space: nowrap; }
.tel-ore__icona svg { width: 9cqw; height: 9cqw; display: block; }
.tel-ore b { font-size: var(--testo); font-weight: 500; }

/* ── Note ─────────────────────────────────────────────────────────────── */
.tel-pagina--note { --accento: #C08A00; }
.tel-nota { padding: 1cqw 1cqw 8cqw; }
.tel-nota__quando { margin: 0 0 3cqw; text-align: center; font-size: var(--meta); color: var(--grigio); }
.tel-nota__titolo { margin: 0 0 3cqw; font-size: clamp(24px, 7.4cqw, 30px); font-weight: 700; line-height: 1.2; }
.tel-nota__testo { margin: 0; font-size: var(--testo); line-height: 1.45; white-space: pre-wrap; }

/* ── Orologio ─────────────────────────────────────────────────────────── */
.tel-pagina--nera .tel-titolo { color: #fff; }
.tel-orologio { width: 76cqw; margin: 3cqw auto 4cqw; }
.tel-orologio svg { width: 100%; height: auto; display: block; }
.tel-orologio__digitale { margin: 0; text-align: center; font-size: clamp(40px, 14cqw, 58px); font-weight: 200; font-variant-numeric: tabular-nums; }
.tel-orologio__luogo { margin: 1cqw 0 0; text-align: center; font-size: var(--testo); color: #FFFFFFa6; }

/* ── Impostazioni ─────────────────────────────────────────────────────── */
.tel-profilo .tel-avatar { width: 15cqw; height: 15cqw; }
.tel-profilo .tel-riga__titolo { font-size: clamp(19px, 5.6cqw, 22px); font-weight: 600; }
.tel-mini { flex: none; display: grid; place-items: center; width: 8cqw; height: 8cqw; border-radius: 2cqw; background: var(--c); color: #fff; }
.tel-mini svg { width: 5.4cqw; height: 5.4cqw; display: block; }

/* ── Fotocamera ───────────────────────────────────────────────────────── */
.tel-camera .tel-corpo { display: none; }
.tel-camera__mirino { position: relative; flex: 1; min-height: 0; margin-top: 2cqw; overflow: hidden; }
.tel-camera__mirino canvas { width: 100%; height: 100%; object-fit: cover; display: block; filter: blur(1.5px) saturate(.85) brightness(.82); transform: scale(1.04); }
.tel-camera__mirino::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(90deg, #0000 calc(33.3% - .5px), #FFFFFF40 calc(33.3% - .5px) calc(33.3% + .5px), #0000 0 calc(66.6% - .5px), #FFFFFF40 calc(66.6% - .5px) calc(66.6% + .5px), #0000 0),
    linear-gradient(#0000 calc(33.3% - .5px), #FFFFFF40 calc(33.3% - .5px) calc(33.3% + .5px), #0000 0 calc(66.6% - .5px), #FFFFFF40 calc(66.6% - .5px) calc(66.6% + .5px), #0000 0);
}
.tel-camera__lampo { position: absolute; inset: 0; z-index: 1; background: #fff; opacity: 0; pointer-events: none; }
.tel-camera__modi { flex: none; padding: 3.6cqw 0; text-align: center; font-size: var(--meta); font-weight: 600; letter-spacing: .08em; color: #fff; }
.tel-camera__comandi { flex: none; display: flex; align-items: center; justify-content: space-between; padding: 1cqw 9cqw 12cqw; }
.tel-camera__anteprima { width: 12.5cqw; height: 12.5cqw; padding: 0; border-radius: 2.4cqw; overflow: hidden; background: #2A2A2D; }
.tel-camera__anteprima:not([disabled]):hover { filter: brightness(1.1); }
.tel-camera__anteprima[disabled] { cursor: default; }
.tel-camera__anteprima canvas { width: 100%; height: 100%; display: block; }
.tel-scatto { position: relative; width: 20cqw; height: 20cqw; border-radius: 50%; box-shadow: inset 0 0 0 1.2cqw #fff; }
.tel-scatto::before { content: ''; position: absolute; inset: 2.4cqw; border-radius: 50%; background: #fff; transition: transform 100ms ease; }
.tel-scatto:active::before { transform: scale(.88); }
.tel-camera__spazio { width: 12.5cqw; height: 12.5cqw; }

@media (prefers-reduced-motion: reduce) {
  .tel, .tel-puntini::after { animation: none; }
}