/* Pagina Software: l'app PROTECHTA. Il telefono animato e i suoi stili vengono da site.css (sezione app). */

.sw-apertura { padding-top: 140px !important; }
.sw-apertura .segnale { font-size: clamp(38px, 4.6vw, 66px); max-width: 11em; }
.sw-piattaforme { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 30px; }
.sw-piattaforme span {
  display: inline-flex; align-items: center; height: 34px; padding: 0 14px; border-radius: 100px;
  border: 1px solid var(--bordo); background: var(--pillola); color: var(--testo);
  font: 400 12px/1 var(--mono); letter-spacing: 1px; text-transform: uppercase;
}

/* ------------------------------------------------------------ numeri della facilita */
.sw-numeri { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--bordo); border-bottom: 1px solid var(--bordo); }
.sw-numeri div { padding: 30px 24px 30px 0; }
.sw-numeri div + div { padding-left: 24px; border-left: 1px solid var(--bordo); }
.sw-numeri b { display: block; color: var(--testo); font: 600 clamp(54px, 6vw, 84px)/1 var(--display); letter-spacing: -0.04em; }
.sw-numeri span { display: block; margin-top: 10px; font-size: 16px; max-width: 260px; }

/* ------------------------------------------------------------ funzioni */
.sw-funzioni { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.sw-funzione { padding: 26px 24px 26px; }
.sw-funzione svg {
  width: 40px; height: 40px; padding: 9px; border-radius: 12px; margin-bottom: 20px;
  fill: none; stroke: var(--blu); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
  background: rgba(63, 169, 255, 0.1); border: 1px solid rgba(63, 169, 255, 0.28);
}
.sw-funzione h3 { margin: 0 0 8px; color: var(--testo); font: 600 21px/1.25 var(--display); letter-spacing: -0.02em; }
.sw-funzione p { margin: 0; font-size: 15px; }

/* ------------------------------------------------------------ app registrata dal vivo */
.sw-dal-vivo { display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr); gap: clamp(32px, 6vw, 90px); align-items: center; margin-bottom: clamp(56px, 8vw, 100px); }
.sw-video.telefono { aspect-ratio: 768 / 1588; width: min(100%, 320px); height: auto; justify-self: center; }
.sw-video video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; background: #1c2024; }
.sw-dal-vivo-testo { max-width: 560px; }
.sw-dal-vivo-testo h3 { margin: 0 0 10px; color: var(--testo); font: 600 clamp(24px, 2.6vw, 32px)/1.15 var(--display); letter-spacing: -0.02em; }
.sw-dal-vivo-testo > p { margin: 0 0 22px; }

/* ------------------------------------------------------------ schermate ricostruite */
.sw-schermate { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 3vw, 44px); align-items: start; }
.sw-schermata { margin: 0; display: grid; justify-items: center; gap: 22px; }
.sw-tel.telefono { height: auto; width: min(100%, 300px); aspect-ratio: 9 / 16.5; }
.sw-schermata figcaption { max-width: 300px; font-size: 15px; text-align: left; }
.sw-schermata figcaption b { display: block; margin-bottom: 6px; color: var(--testo); font: 600 19px/1.3 var(--display); }

.sw-schermo { background: #1c2024; }
.sw-testata { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 5cqw 5cqw 4cqw; }
.sw-testata strong { font-size: 5cqw; font-weight: 600; letter-spacing: .02em; }
.sw-indietro { font-size: 8cqw; line-height: 1; color: #d6dbe0; }
.sw-griglia { display: grid; grid-template-columns: 1fr 1fr; gap: 2.6cqw; padding: 0 4cqw; }
.sw-voce {
  aspect-ratio: 1.15; border-radius: 3cqw; background: #272c31; padding: 4cqw;
  display: flex; flex-direction: column; justify-content: space-between;
}
.sw-voce svg { width: 9cqw; height: 9cqw; fill: none; stroke: #8f99a4; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.sw-voce span { font-size: 3.5cqw; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: #d9dee3; }
.sw-lista { margin: 0 4cqw; border-radius: 3cqw; background: #262b30; padding: 1cqw 4cqw; }
.sw-lista.fitta .sw-riga { padding: 2.6cqw 0; }
.sw-riga { display: flex; align-items: center; justify-content: space-between; gap: 3cqw; padding: 3.6cqw 0; font-size: 3.7cqw; color: #e7ebef; }
.sw-riga + .sw-riga { border-top: 1px solid rgba(255, 255, 255, 0.05); }
.sw-schermo > .sw-riga { margin: 3cqw 4cqw 0; padding: 4cqw; border-radius: 3cqw; background: #262b30; }
.sw-riga em { font-style: normal; margin-right: 2.6cqw; color: #8f99a4; }
.sw-attiva { font-weight: 500; color: #8fcbff; font-size: 3.5cqw; }
/* interruttori: quelli "si-accende" scattano quando la schermata entra in vista */
.sw-int { flex: none; position: relative; width: 10cqw; height: 5.6cqw; border-radius: 5cqw; background: #4a5159; transition: background .45s ease; }
.sw-int::after { content: ''; position: absolute; top: .6cqw; left: .6cqw; width: 4.4cqw; height: 4.4cqw; border-radius: 50%; background: #e9edf1; transition: transform .45s cubic-bezier(.2, .8, .2, 1); }
.sw-int.acceso, .visto .sw-int.si-accende { background: #2d8cff; }
.sw-int.acceso::after, .visto .sw-int.si-accende::after { transform: translateX(4.4cqw); }
.visto .sw-int.si-accende { transition-delay: .6s; }
.visto .sw-int.si-accende::after { transition-delay: .6s; }
.sw-fondo { margin-top: auto; padding: 4cqw; display: grid; gap: 2.6cqw; }
.sw-bottone { display: grid; place-items: center; height: 10cqw; border-radius: 2.6cqw; background: #2d8cff; color: #fff; font-size: 3.4cqw; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.sw-bottone.secondario { background: transparent; border: 1px solid rgba(255, 255, 255, 0.18); color: #cfd5db; }
.sw-dettagli { margin: 4cqw; display: grid; gap: 1cqw; font-size: 3.6cqw; color: #e7ebef; }
.sw-dettagli small { margin-top: 2cqw; font-size: 3cqw; color: #8f99a4; text-transform: uppercase; letter-spacing: .06em; }

@media (max-width: 960px) {
  .sw-funzioni { grid-template-columns: 1fr 1fr; }
  .sw-schermate { grid-template-columns: 1fr; }
  .sw-dal-vivo { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .sw-funzioni, .sw-numeri { grid-template-columns: 1fr; }
  .sw-numeri div + div { padding-left: 0; border-left: 0; border-top: 1px solid var(--bordo); }
}

/* ------------------------------------------------------------ centrale di controllo (Protechta Cloud) */
.cc .segnale { max-width: 12em; }
.cc-compatibile { margin: 18px 0 0; max-width: 760px; font-size: 15px; }
.cc-compatibile span { display: inline-flex; align-items: center; height: 28px; margin: 10px 6px 0 0; padding: 0 12px; border-radius: 100px; border: 1px solid var(--bordo); background: var(--pillola); color: var(--testo); font: 400 11px/1 var(--mono); letter-spacing: 1px; text-transform: uppercase; }
.cc-monitor { margin: clamp(34px, 5vw, 60px) auto 0; max-width: 1080px; display: grid; justify-items: center; }
.cc-schermo {
  container-type: inline-size; width: 100%; aspect-ratio: 16 / 9.6; overflow: hidden;
  border: 1px solid rgba(120, 160, 220, 0.22); border-radius: 14px; padding: 0;
  background: #070d18; box-shadow: 0 0 0 10px #0b1220, 0 0 0 11px rgba(120, 160, 220, 0.16), 0 40px 120px rgba(20, 90, 200, 0.22);
  display: grid; grid-template-rows: auto auto 1fr; font-family: var(--display);
}
.cc-piede { width: 22%; height: 26px; margin-top: 11px; background: linear-gradient(180deg, #121b2c, #0a101c); clip-path: polygon(30% 0, 70% 0, 100% 100%, 0 100%); }
.cc-barra { display: flex; align-items: center; gap: 2.4cqw; padding: 1.4cqw 2cqw; border-bottom: 1px solid rgba(120, 160, 220, 0.14); background: #0a1322; }
.cc-logo { display: inline-flex; align-items: center; gap: .7cqw; }
.cc-logo svg { width: 2.2cqw; height: 2.2cqw; margin-top: -.3cqw; }
.cc-logo b { font: 600 1.35cqw/1 var(--display); letter-spacing: .28em; color: #eef3fa; }
.cc-logo i { font: 300 1.35cqw/1 var(--display); font-style: normal; letter-spacing: .06em; color: var(--blu); }
.cc-schede { display: flex; gap: .5cqw; margin-left: 1.2cqw; }
.cc-schede em { font: 400 1cqw/1 var(--mono); font-style: normal; letter-spacing: .08em; text-transform: uppercase; color: #6f819c; padding: .7cqw 1cqw; border-radius: 4cqw; }
.cc-schede em.attiva { color: #eaf3ff; background: rgba(63, 169, 255, 0.14); box-shadow: inset 0 0 0 1px rgba(63, 169, 255, 0.4); }
.cc-live { margin-left: auto; display: inline-flex; align-items: center; gap: .7cqw; font: 400 1cqw/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: #7ee2a8; }
.cc-live i { width: .8cqw; height: .8cqw; border-radius: 50%; background: #3ddc84; box-shadow: 0 0 .8cqw #3ddc84; animation: cc-batte 1.6s ease-in-out infinite; }

.cc-kpi { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1cqw; padding: 1.4cqw 2cqw 0; }
.cc-kpi div { padding: 1.2cqw 1.4cqw; border-radius: 1cqw; background: #0c1628; border: 1px solid rgba(120, 160, 220, 0.12); }
.cc-kpi small, .cc-pannello small { display: block; font: 400 .95cqw/1.2 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: #6f819c; }
.cc-kpi b { display: flex; align-items: baseline; gap: .6cqw; margin-top: .7cqw; font: 600 2.6cqw/1 var(--display); color: #eef3fa; letter-spacing: -0.02em; }
.cc-kpi u, .cc-vel u { text-decoration: none; font: 400 1cqw/1 var(--mono); color: #6f819c; letter-spacing: .04em; }
.cc-kpi .allarme { border-color: rgba(255, 92, 92, 0.35); background: rgba(255, 70, 70, 0.07); }
.cc-kpi .allarme b { color: #ff7a7a; }

.cc-corpo { display: grid; grid-template-columns: 1.75fr 1fr; gap: 1cqw; padding: 1cqw 2cqw 2cqw; min-height: 0; }
.cc-mappa { position: relative; border-radius: 1cqw; overflow: hidden; background: radial-gradient(120% 90% at 55% 50%, #0f1f38, #08111f); border: 1px solid rgba(120, 160, 220, 0.12); }
.cc-mappa svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.cc-mappa .recinto { fill: rgba(63, 169, 255, 0.06); stroke: rgba(110, 190, 255, 0.7); stroke-width: 2.4; stroke-dasharray: 10 9; }
.cc-mappa .rotta { fill: none; stroke: #5ab8ff; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; opacity: .9; filter: drop-shadow(0 0 6px rgba(63, 169, 255, 0.9)); }
.cc-mappa .rotta.tenue { opacity: .45; }
.cc-osm { position: absolute; left: 1cqw; bottom: .8cqw; font: 400 .75cqw/1 var(--mono); color: rgba(150, 175, 210, 0.55); }
.cc-mappa .mezzo circle { fill: #eaf6ff; }
.cc-mappa .mezzo .alone { fill: rgba(63, 169, 255, 0.28); }
.cc-mappa .mezzo.fermo circle { fill: #8a98ad; }
.cc-mappa .mezzo.fuori circle { fill: #ff6b6b; }
.cc-mappa .mezzo.fuori .alone { fill: rgba(255, 90, 90, 0.3); transform-box: fill-box; transform-origin: center; animation: cc-allarme 1.4s ease-out infinite; }
.cc-etichetta { position: absolute; right: 1.4cqw; bottom: 1.4cqw; padding: .7cqw 1cqw; border-radius: .7cqw; background: rgba(40, 8, 12, 0.85); border: 1px solid rgba(255, 92, 92, 0.45); color: #ffb3b3; font: 400 1cqw/1.2 var(--mono); }

.cc-lato { display: grid; grid-template-rows: auto auto 1fr; gap: 1cqw; min-height: 0; }
.cc-pannello { padding: 1.2cqw 1.4cqw; border-radius: 1cqw; background: #0c1628; border: 1px solid rgba(120, 160, 220, 0.12); }
.cc-vel { display: flex; align-items: baseline; gap: .6cqw; margin: .8cqw 0 .6cqw; font: 600 3.4cqw/1 var(--display); color: #eef3fa; font-variant-numeric: tabular-nums; }
.cc-traccia { display: block; width: 100%; height: 2.6cqw; }
.cc-traccia polyline { fill: none; stroke: #3fa9ff; stroke-width: 1.4; vector-effect: non-scaling-stroke; }
.cc-barre { display: grid; grid-template-columns: repeat(7, 1fr); align-items: end; gap: .6cqw; height: 5cqw; margin-top: 1cqw; }
.cc-barre i { height: var(--h); border-radius: .3cqw .3cqw 0 0; background: linear-gradient(180deg, #3fa9ff, rgba(63, 169, 255, 0.25)); transform-origin: bottom; transform: scaleY(.15); transition: transform 1.2s cubic-bezier(.2, .8, .2, 1); }
.cc.visto .cc-barre i { transform: none; }
.cc-giorni { display: grid; grid-template-columns: repeat(7, 1fr); margin-top: .5cqw; text-align: center; font: 400 .9cqw/1 var(--mono); color: #6f819c; }
.cc-elenco { display: grid; align-content: start; gap: .2cqw; }
.cc-elenco div { display: flex; align-items: center; gap: .8cqw; padding: .55cqw 0; font-size: 1.15cqw; color: #d9e3f0; }
.cc-elenco div + div { border-top: 1px solid rgba(120, 160, 220, 0.1); }
.cc-elenco i { width: .8cqw; height: .8cqw; border-radius: 50%; background: #6f819c; flex: none; }
.cc-elenco i.ok { background: #3ddc84; }
.cc-elenco i.no { background: #ff6b6b; }
.cc-elenco em { margin-left: auto; font: 400 .95cqw/1 var(--mono); font-style: normal; letter-spacing: .04em; color: #6f819c; }

.cc-funzioni { display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px 28px; margin-top: clamp(48px, 6vw, 80px); }
.cc-funzioni article { padding-top: 18px; border-top: 1px solid var(--bordo); }
.cc-funzioni h3 { margin: 0 0 10px; color: var(--testo); font: 600 20px/1.25 var(--display); letter-spacing: -0.02em; }
.cc-funzioni p { margin: 0; font-size: 15px; }

.cc-formule { margin-top: clamp(48px, 6vw, 80px); margin-bottom: clamp(72px, 10vw, 140px); }
.cc-formule h3 { margin: 0 0 18px; color: var(--testo); font: 600 24px/1.2 var(--display); letter-spacing: -0.02em; }
.cc-formule-griglia { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; max-width: 860px; }
.cc-formule-griglia article { padding: 24px; }
.cc-formule-griglia b { display: block; margin-bottom: 8px; color: var(--testo); font: 600 21px/1.25 var(--display); }
.cc-formule-griglia p { margin: 0; font-size: 15px; }
.cc-formule .azioni { margin-top: 26px; }

@keyframes cc-batte { 50% { opacity: .35; } }
@keyframes cc-allarme { from { transform: scale(.6); opacity: 1; } to { transform: scale(2.2); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .cc-live i, .cc-mappa .mezzo.fuori .alone { animation: none; } .cc-barre i { transform: none; transition: none; } }

@media (max-width: 960px) { .cc-funzioni { grid-template-columns: 1fr 1fr; } }
@media (max-width: 720px) {
  .cc-schermo { aspect-ratio: auto; }
  .cc-corpo { grid-template-columns: 1fr; }
  .cc-mappa { aspect-ratio: 4 / 3.4; }
  .cc-kpi { grid-template-columns: 1fr 1fr; }
  .cc-schede { display: none; }
  /* sul telefono il pannello e stretto: i caratteri in cqw si ingrandiscono */
  .cc-schermo { font-size: 16px; }
  .cc-logo b, .cc-logo i { font-size: 3.4cqw; }
  .cc-logo svg { width: 5cqw; height: 5cqw; }
  .cc-live, .cc-kpi small, .cc-pannello small, .cc-schede em, .cc-etichetta, .cc-giorni, .cc-elenco em, .cc-kpi u, .cc-vel u { font-size: 2.6cqw; }
  .cc-kpi b { font-size: 6cqw; }
  .cc-vel { font-size: 8cqw; }
  .cc-elenco div { font-size: 3.2cqw; padding: 1.6cqw 0; }
  .cc-live i, .cc-elenco i { width: 2cqw; height: 2cqw; }
  .cc-barre { height: 14cqw; }
  .cc-traccia { height: 7cqw; }
  .cc-kpi div, .cc-pannello { padding: 3cqw; border-radius: 2.4cqw; }
  .cc-barra, .cc-kpi, .cc-corpo { padding-left: 3cqw; padding-right: 3cqw; }
  .cc-barra { padding-top: 3cqw; padding-bottom: 3cqw; }
  .cc-corpo { gap: 2.4cqw; padding-bottom: 3cqw; }
  .cc-kpi { gap: 2.4cqw; padding-top: 3cqw; }
  .cc-funzioni, .cc-formule-griglia { grid-template-columns: 1fr; }
  .cc-piede { height: 16px; }
}

/* ------------------------------------------------------------ schermata tachigrafo */
.cc-tachi { margin-top: clamp(56px, 7vw, 96px); }
.cc-tachi-testo { max-width: 680px; margin-bottom: 26px; }
.cc-tachi-testo h3 { margin: 0 0 10px; color: var(--testo); font: 600 clamp(24px, 2.6vw, 32px)/1.15 var(--display); letter-spacing: -0.02em; }
.cc-tachi-testo p { margin: 0; }
.cc-tachi-schermo { position: relative; margin: 0 auto; max-width: 1080px; aspect-ratio: auto;
  background: radial-gradient(90% 60% at 80% 0%, rgba(63, 169, 255, 0.10), transparent 60%), radial-gradient(70% 50% at 0% 100%, rgba(61, 220, 132, 0.06), transparent 60%), #070d18; }
.tc-defs { position: absolute; }
.cc-tachi-schermo .cc-pannello { background: linear-gradient(180deg, rgba(18, 32, 56, 0.92), rgba(11, 21, 38, 0.92)); border-color: rgba(120, 170, 235, 0.14); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04); }
.tc-testa { display: flex; align-items: center; justify-content: space-between; gap: 1cqw; }

/* anelli */
.tc-anelli { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.1cqw; padding: 1.6cqw 2cqw 0; }
.tc-anelli > div { position: relative; overflow: hidden; display: grid; grid-template-columns: 6.6cqw 1fr; grid-template-rows: auto auto; column-gap: 1.4cqw; align-items: center; padding: 1.4cqw 1.6cqw;
  border-radius: 1.1cqw; border: 1px solid rgba(120, 170, 235, 0.14); background: linear-gradient(160deg, rgba(22, 40, 68, 0.95), rgba(11, 21, 38, 0.95)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05); }
.tc-anelli > div::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: linear-gradient(90deg, transparent, #3ddc84, transparent); opacity: .8; }
.tc-anelli > div.avviso::before { background: linear-gradient(90deg, transparent, #f5b942, transparent); }
.tc-anello { grid-row: 1 / 3; position: relative; width: 6.6cqw; height: 6.6cqw; display: grid; place-items: center; }
.tc-anello svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
.tc-anello circle { fill: none; stroke-width: 4.2; }
.tc-anello .fondo { stroke: rgba(120, 170, 235, 0.12); }
.tc-anello .arco { stroke-linecap: round; stroke-dasharray: 0 100; transition: stroke-dasharray 1.6s cubic-bezier(.2, .8, .2, 1); filter: drop-shadow(0 0 2.5px rgba(61, 220, 132, 0.75)); }
.avviso .tc-anello .arco { filter: drop-shadow(0 0 2.5px rgba(245, 185, 66, 0.75)); }
.cc-tachi.visto .tc-anello .arco { stroke-dasharray: var(--p) 100; }
.tc-anello strong { position: relative; font: 500 1.05cqw/1 var(--mono); color: #cfe0f5; }
.tc-anelli b { align-self: end; font: 600 2.6cqw/1 var(--display); color: #f2f6fc; letter-spacing: -0.02em; }
.tc-anelli b u { text-decoration: none; font: 400 1.15cqw/1 var(--mono); color: #6f819c; margin-left: .2cqw; }
.tc-anelli small { align-self: start; margin-top: .5cqw; font: 400 .92cqw/1.3 var(--mono); letter-spacing: .05em; text-transform: uppercase; color: #7d8fa9; }

.tc-corpo { display: grid; grid-template-columns: 1.62fr 1fr; gap: 1.1cqw; padding: 1.1cqw 2cqw 2cqw; min-height: 0; }

/* attivita delle 24 ore */
.tc-legenda { display: flex; flex-wrap: wrap; gap: .5cqw 1.4cqw; font: 400 .88cqw/1 var(--mono); color: #8a9bb3; }
.tc-legenda i { display: inline-block; width: 1.3cqw; height: .7cqw; margin-right: .45cqw; border-radius: 1cqw; vertical-align: middle; }
.tc-tabella { position: relative; margin-top: 3.4cqw; padding-left: 10.5cqw; padding-right: 9cqw; }
.tc-griglia { position: absolute; top: 0; bottom: 2.2cqw; left: 10.5cqw; right: 9cqw; display: flex; justify-content: space-between; pointer-events: none; }
.tc-griglia i { width: 1px; background: linear-gradient(180deg, rgba(120, 170, 235, 0.14), rgba(120, 170, 235, 0.04)); }
.tc-ora { position: absolute; top: -.6cqw; bottom: 0; left: calc(var(--t) * 1%); width: 0; border-left: 1px solid rgba(110, 200, 255, 0.85); box-shadow: 0 0 8px rgba(63, 169, 255, 0.8); }
.tc-ora::before { content: ''; position: absolute; top: -.5cqw; left: -.55cqw; width: 1.1cqw; height: 1.1cqw; border-radius: 50%; background: #6cc6ff; box-shadow: 0 0 10px #3fa9ff; }
.tc-ora span { position: absolute; top: -1.9cqw; left: .9cqw; font: 500 .85cqw/1 var(--mono); color: #8fd2ff; white-space: nowrap; }
.tc-riga { position: relative; display: grid; grid-template-columns: 1fr; align-items: center; height: 5.8cqw; }
.tc-riga + .tc-riga { border-top: 1px solid rgba(120, 170, 235, 0.06); }
.tc-chi { position: absolute; left: -10.5cqw; width: 10cqw; display: flex; align-items: center; gap: .8cqw; font-size: 1.12cqw; color: #dbe6f4; white-space: nowrap; }
.tc-chi i { flex: none; display: grid; place-items: center; width: 2.3cqw; height: 2.3cqw; border-radius: 50%; font: 600 .82cqw/1 var(--display); font-style: normal; color: #cfe5ff;
  background: linear-gradient(145deg, #23406b, #142540); box-shadow: inset 0 0 0 1px rgba(120, 180, 255, 0.35); }
.allerta .tc-chi i { color: #ffd0d0; background: linear-gradient(145deg, #5a2230, #2c1219); box-shadow: inset 0 0 0 1px rgba(255, 110, 110, 0.55); }
.tc-barra { position: relative; height: 1.7cqw; border-radius: 1cqw;
  background: repeating-linear-gradient(135deg, rgba(61, 220, 132, 0.10) 0 .35cqw, rgba(61, 220, 132, 0.03) .35cqw .7cqw); box-shadow: inset 0 0 0 1px rgba(61, 220, 132, 0.10); }
.tc-barra i { position: absolute; top: 0; bottom: 0; left: calc(var(--a) * 1%); width: calc((var(--b) - var(--a)) * 1%); border-radius: 1cqw;
  transform-origin: left; transform: scaleX(0); transition: transform .9s cubic-bezier(.2, .8, .2, 1); }
.tc-barra .g { background: linear-gradient(180deg, #7cc8ff, #2c8ff0); box-shadow: 0 0 10px rgba(63, 169, 255, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.35); }
.tc-barra .l { background: linear-gradient(180deg, #ffd27a, #e8961c); box-shadow: 0 0 8px rgba(245, 185, 66, 0.45); }
.tc-barra .d { background: linear-gradient(180deg, #b5c2d4, #7d8ba0); }
.tc-legenda .g { background: #4fb0ff; } .tc-legenda .l { background: #f5b942; } .tc-legenda .d { background: #9aa8bb; }
.tc-legenda .r { background: repeating-linear-gradient(135deg, rgba(61, 220, 132, 0.55) 0 2px, rgba(61, 220, 132, 0.15) 2px 4px); }
.cc-tachi.visto .tc-barra i { transform: none; }
.tc-barra i:nth-child(2) { transition-delay: .1s; } .tc-barra i:nth-child(3) { transition-delay: .2s; } .tc-barra i:nth-child(4) { transition-delay: .3s; }
.tc-riga > em { position: absolute; right: -9cqw; width: 8.2cqw; text-align: center; padding: .45cqw 0; border-radius: 2cqw; font: 500 .82cqw/1 var(--mono); font-style: normal; letter-spacing: .03em; }
.tc-riga > em.guida { color: #9fd6ff; background: rgba(63, 169, 255, 0.14); box-shadow: inset 0 0 0 1px rgba(63, 169, 255, 0.35); }
.tc-riga > em.riposo { color: #8fe6b6; background: rgba(61, 220, 132, 0.10); box-shadow: inset 0 0 0 1px rgba(61, 220, 132, 0.28); }
.tc-riga > em.lavoro { color: #ffd58a; background: rgba(245, 185, 66, 0.12); box-shadow: inset 0 0 0 1px rgba(245, 185, 66, 0.32); }
.tc-riga > em.no { color: #ffb0b0; background: rgba(255, 90, 90, 0.14); box-shadow: inset 0 0 0 1px rgba(255, 107, 107, 0.45); }
.tc-ore { display: flex; justify-content: space-between; margin-top: .8cqw; font: 400 .85cqw/1 var(--mono); color: #6f819c; }

/* ore della settimana */
.tc-lato { display: grid; grid-template-rows: 1fr auto; gap: 1.1cqw; min-height: 0; }
.tc-pillola { padding: .4cqw .9cqw; border-radius: 2cqw; font: 500 .82cqw/1 var(--mono); color: #ffb3b3; background: rgba(255, 90, 90, 0.12); box-shadow: inset 0 0 0 1px rgba(255, 107, 107, 0.4); }
.tc-colonne { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.6cqw; align-items: end; height: 17cqw; margin-top: 1.6cqw; padding-bottom: 2.4cqw;
  background: repeating-linear-gradient(0deg, rgba(120, 170, 235, 0.07) 0 1px, transparent 1px 25%); background-size: 100% calc(100% - 2.4cqw); background-repeat: no-repeat; }
.tc-colonne > div { position: relative; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; }
.tc-colonne i { width: 84%; height: var(--h); border-radius: .9cqw .9cqw .3cqw .3cqw; background: linear-gradient(180deg, #7cc8ff 0%, #2c8ff0 45%, rgba(44, 143, 240, 0.25) 100%);
  box-shadow: 0 0 14px rgba(63, 169, 255, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.35); transform-origin: bottom; transform: scaleY(.08); transition: transform 1.3s cubic-bezier(.2, .8, .2, 1); }
.tc-colonne .alto i { background: linear-gradient(180deg, #ffd27a 0%, #f0a020 45%, rgba(240, 160, 32, 0.25) 100%); box-shadow: 0 0 16px rgba(245, 185, 66, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.4); }
.cc-tachi.visto .tc-colonne i { transform: none; }
.tc-colonne em { position: absolute; bottom: calc(var(--h) - 2.1cqw); font: 600 1.05cqw/1 var(--mono); font-style: normal; color: #fff; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5); opacity: 0; transition: opacity .6s 1s; }
.tc-colonne > div > small { position: absolute; bottom: calc(var(--h) - 3.7cqw); white-space: nowrap; font: 500 .72cqw/1 var(--mono); text-transform: none; letter-spacing: 0; color: rgba(60, 30, 0, 0.85); opacity: 0; transition: opacity .6s 1.2s; }
.cc-tachi.visto .tc-colonne em, .cc-tachi.visto .tc-colonne > div > small { opacity: 1; }
.tc-colonne span { position: absolute; bottom: -2cqw; font: 400 .88cqw/1 var(--mono); color: #7d8fa9; }
.tc-limite { position: absolute; left: 0; right: 0; bottom: calc(2.4cqw + (100% - 2.4cqw) * 0.88); border-top: 1.5px dashed rgba(255, 107, 107, 0.75); filter: drop-shadow(0 0 4px rgba(255, 90, 90, 0.6)); }

/* avvisi */
.tc-avvisi { display: grid; gap: .3cqw; }
.tc-avvisi > div { display: grid; grid-template-columns: 2.4cqw 1fr; align-items: center; gap: 1cqw; padding: .7cqw .6cqw; border-radius: .8cqw; }
.tc-avvisi > div + div { border-top: 1px solid rgba(120, 170, 235, 0.07); border-radius: 0; }
.tc-avvisi > div > i { display: grid; place-items: center; width: 2.4cqw; height: 2.4cqw; border-radius: .7cqw; font: 600 1.1cqw/1 var(--display); font-style: normal; }
.tc-avvisi .no > i { color: #ff8a8a; background: rgba(255, 90, 90, 0.14); box-shadow: inset 0 0 0 1px rgba(255, 107, 107, 0.45), 0 0 10px rgba(255, 90, 90, 0.25); }
.tc-avvisi .avviso > i { color: #ffcc66; background: rgba(245, 185, 66, 0.12); box-shadow: inset 0 0 0 1px rgba(245, 185, 66, 0.4); }
.tc-avvisi .ok > i { color: #7cf3b4; background: rgba(61, 220, 132, 0.12); box-shadow: inset 0 0 0 1px rgba(61, 220, 132, 0.4); }
.tc-avvisi p { margin: 0; font-size: 1.08cqw; line-height: 1.25; color: #dbe6f4; }
.tc-avvisi p small { display: block; margin-top: .3cqw; font: 400 .85cqw/1 var(--mono); color: #7d8fa9; }

@media (prefers-reduced-motion: reduce) { .tc-anello .arco, .tc-barra i, .tc-colonne i, .tc-colonne em, .tc-colonne > div > small { transition: none; } }
@media (max-width: 720px) {
  .tc-anelli { grid-template-columns: 1fr 1fr; gap: 2.4cqw; padding: 3cqw 3cqw 0; }
  .tc-anelli > div { grid-template-columns: 14cqw 1fr; column-gap: 3cqw; padding: 3cqw; border-radius: 2.6cqw; }
  .tc-anello { width: 14cqw; height: 14cqw; } .tc-anello strong { font-size: 2.4cqw; }
  .tc-anelli b { font-size: 6.4cqw; } .tc-anelli b u { font-size: 2.8cqw; } .tc-anelli small { font-size: 2.3cqw; }
  .tc-corpo { grid-template-columns: 1fr; gap: 2.6cqw; padding: 2.6cqw 3cqw 3cqw; }
  .tc-testa { flex-wrap: wrap; } .tc-legenda { font-size: 2.3cqw; gap: 1.6cqw 3cqw; } .tc-legenda i { width: 3.2cqw; height: 1.7cqw; }
  .tc-tabella { padding-left: 22cqw; padding-right: 0; margin-top: 7cqw; }
  .tc-griglia { left: 22cqw; right: 0; bottom: 5cqw; }
  .tc-ora span { font-size: 2.3cqw; top: -4.4cqw; left: 1.6cqw; } .tc-ora::before { width: 2.4cqw; height: 2.4cqw; left: -1.2cqw; top: -1.2cqw; }
  .tc-riga { height: 9cqw; }
  .tc-chi { left: -22cqw; width: 21cqw; font-size: 2.8cqw; gap: 1.6cqw; } .tc-chi i { width: 5.4cqw; height: 5.4cqw; font-size: 2cqw; }
  .tc-barra { height: 4cqw; border-radius: 2cqw; } .tc-barra i { border-radius: 2cqw; }
  .tc-riga > em { display: none; }
  .tc-ore { font-size: 2.3cqw; margin-top: 2cqw; }
  .tc-pillola { font-size: 2.3cqw; padding: 1cqw 2cqw; }
  .tc-colonne { height: 38cqw; padding-bottom: 6cqw; gap: 3cqw; margin-top: 4cqw; background-size: 100% calc(100% - 6cqw); }
  .tc-colonne em { font-size: 2.8cqw; bottom: calc(var(--h) - 5cqw); } .tc-colonne > div > small { font-size: 2.1cqw; bottom: calc(var(--h) - 8.6cqw); }
  .tc-colonne span { font-size: 2.3cqw; bottom: -5cqw; }
  .tc-limite { bottom: calc(6cqw + (100% - 6cqw) * 0.88); }
  .tc-avvisi > div { grid-template-columns: 6cqw 1fr; gap: 2.4cqw; padding: 1.8cqw 1cqw; } .tc-avvisi > div > i { width: 6cqw; height: 6cqw; font-size: 2.8cqw; border-radius: 1.6cqw; }
  .tc-avvisi p { font-size: 3cqw; } .tc-avvisi p small { font-size: 2.3cqw; margin-top: .8cqw; }
}