/* Pagina «consegna» (/consegna/, /en/delivery/): stili propri del gruppo consegna-rivenditori, con il prefisso .consegna- .
   Vale il contratto di style.css: nessuna risorsa esterna, animazioni e transizioni solo in @media (prefers-reduced-motion: no-preference),
   stati nascosti solo sotto html.js. Momenti: il percorso in uscita (scena condivisa .scena), la linea del tempo del tracciamento,
   la tabella DNS che diventa verde, la rampa di riscaldamento. */

/* Percorso in uscita: la scena condivisa subito sotto l'intro, senza doppio respiro */
.consegna-percorso { padding-top: 0; }

/* Tracciamento: finestra del pannello con la linea del tempo degli eventi */
.consegna-figura { margin: 0; }
.consegna-tracciamento { font-size: .875rem; line-height: 1.45; }
.consegna-trk { padding: var(--space-4) var(--space-6) var(--space-6); }
.consegna-trk-testa { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-2) var(--space-3); margin: 0 0 var(--space-1); }
.consegna-trk-ogg { font-weight: 700; font-size: 1rem; }
.consegna-trk-meta { color: var(--text-muted); margin: 0 0 var(--space-4); font-size: .8125rem; }
.consegna-eventi { position: relative; display: grid; gap: var(--space-4); }
.consegna-eventi::before { content: ""; position: absolute; left: 101px; top: 12px; bottom: 12px; width: 2px; background: var(--border); }
.consegna-eventi li { position: relative; display: grid; grid-template-columns: 84px 24px 1fr; gap: 0 var(--space-2); align-items: start; }
.consegna-eventi time { font-variant-numeric: tabular-nums; color: var(--text-muted); font-size: .8125rem; padding-top: 2px; white-space: nowrap; }
.consegna-eventi li::before { content: ""; grid-column: 2; width: 12px; height: 12px; margin: 5px auto 0; border-radius: 50%; background: var(--primary); box-shadow: 0 0 0 3px var(--surface), 0 0 0 5px var(--primary); }
.consegna-eventi .ev-2::before { background: var(--warning); box-shadow: 0 0 0 3px var(--surface), 0 0 0 5px var(--warning); }
.consegna-eventi .ev-3::before { background: var(--success); box-shadow: 0 0 0 3px var(--surface), 0 0 0 5px var(--success); }
.consegna-ev { grid-column: 3; min-width: 0; }
.consegna-ev b { display: block; font-weight: 700; color: var(--text); }
.consegna-ev small { display: block; color: var(--text-muted); font-size: .8125rem; line-height: 1.45; }
.consegna-trk-azioni { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-5, 20px) 0 0; }
.consegna-trk-azioni .btn { pointer-events: none; }
.consegna-azioni { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin: var(--space-4) 0 0; }
@media (max-width: 479.98px) {
  .consegna-eventi::before { left: 11px; }
  .consegna-eventi li { grid-template-columns: 24px 1fr; }
  .consegna-eventi li::before { grid-column: 1; grid-row: 1 / span 2; }
  .consegna-eventi time { grid-column: 2; }
  .consegna-ev { grid-column: 2; }
}

/* Quattro esiti: le pillole e i testi veri dell'applicazione (il titolo e' il .sottotitolo comune) */
.consegna-esiti .card p:first-child { margin-bottom: var(--space-3); }

/* DNS: tabella dei record e note a fianco */
.consegna-dns-grid { display: grid; gap: var(--space-8); align-items: start; }
/* le celle di griglia non ereditano la larghezza minima della tabella: scorre lei, non la pagina */
.consegna-dns-grid > div, .consegna-figura { min-width: 0; }
@media (min-width: 1024px) { .consegna-dns-grid { grid-template-columns: 1.25fr 1fr; gap: var(--space-12); } }
/* tre colonne: stanno sempre nella loro colonna, senza larghezza minima (niente scorrimento a 1024 px) */
.consegna-dns table { min-width: 0; }
.consegna-dns tbody th { background: transparent; font-weight: 700; }
@media (min-width: 1200px) { .consegna-dns tbody th { white-space: nowrap; } }
.consegna-stato { position: relative; min-width: 160px; white-space: nowrap; }
.consegna-stato .pill-neutro { display: none; }
.consegna-dns-nota { color: var(--text-muted); font-size: .875rem; }
/* a schermi stretti la tabella non scorre: ogni riga e' una griglia con record e stato in alto, la spiegazione sotto */
@media (max-width: 639.98px) {
  .consegna-dns table { min-width: 0; }
  .consegna-dns thead { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  .consegna-dns tbody tr { display: grid; grid-template-columns: 1fr auto; gap: 2px var(--space-3); align-items: center; padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border); }
  .consegna-dns tbody tr:last-child { border-bottom: 0; }
  .consegna-dns tbody th, .consegna-dns tbody td { display: block; padding: 0; border: 0; }
  .consegna-dns tbody td:nth-child(2) { grid-column: 1; color: var(--text-muted); font-size: .875rem; }
  .consegna-stato { grid-column: 2; grid-row: 1 / span 2; min-width: 0; }
  html.js #demo-dns .consegna-stato .pill-neutro { left: 0; top: 0; }
}
/* sotto i 480 px lo stato sta sotto il nome del record: la pillola non viene mai tagliata */
@media (max-width: 479.98px) {
  .consegna-dns tbody tr { grid-template-columns: 1fr; }
  .consegna-stato { grid-column: 1; grid-row: 3; margin-top: var(--space-1); }
}

/* SPF fuso: esempio con il record di oggi e quello proposto */
.consegna-spf { margin: var(--space-6) 0 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--space-4) var(--space-6); box-shadow: var(--ombra); }
.consegna-spf figcaption { font-weight: 600; font-size: .9375rem; margin-bottom: var(--space-3); }
.consegna-spf p { display: grid; grid-template-columns: 92px 1fr; gap: var(--space-3); align-items: baseline; margin: 0 0 var(--space-2); }
.consegna-spf p:last-child { margin-bottom: 0; }
@media (max-width: 479.98px) { .consegna-spf p { grid-template-columns: 1fr; gap: 2px; } }
.consegna-spf-eti { font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 600; color: var(--text-muted); }
.consegna-spf code { font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-size: .8125rem; overflow-wrap: anywhere; }
.consegna-spf mark { background: var(--primary-soft); color: var(--primary); border-radius: 4px; padding: 1px 4px; font-weight: 600; }

/* Rampa di riscaldamento (decorativa, nella carta dei pool) */
.consegna-rampa { display: block; width: 100%; max-width: 200px; height: auto; margin-top: var(--space-4); }
.consegna-rampa rect { fill: var(--primary); transform-box: fill-box; transform-origin: bottom; }

/* Email Delivery: etichetta nel titolo */
.consegna-delivery h2 .badge { font-size: .8125rem; margin-left: var(--space-1); letter-spacing: .02em; }

/* ---------- Movimento (solo chi non chiede di ridurlo; gli stati nascosti esistono solo con JavaScript) ---------- */
@media (prefers-reduced-motion: no-preference) {
  /* linea del tempo: la linea si disegna, i punti si accendono, gli eventi scivolano al loro posto */
  html.js #demo-tracciamento.vista .consegna-eventi::before, html.js #demo-tracciamento.gioca .consegna-eventi::before { transform-origin: top; animation: consegna-linea 1.5s ease-out both; }
  html.js #demo-tracciamento.vista .consegna-eventi li::before, html.js #demo-tracciamento.gioca .consegna-eventi li::before { animation: consegna-punto .45s cubic-bezier(.2, .7, .2, 1) both; }
  html.js #demo-tracciamento.vista .consegna-ev, html.js #demo-tracciamento.gioca .consegna-ev { animation: consegna-scivola .5s cubic-bezier(.2, .7, .2, 1) both; }
  html.js #demo-tracciamento.vista .consegna-eventi li .consegna-ev, html.js #demo-tracciamento.gioca .consegna-eventi li .consegna-ev { animation-delay: .25s; }
  .consegna-eventi .ev-1::before, .consegna-eventi .ev-1 .consegna-ev { animation-delay: .2s; }
  .consegna-eventi .ev-2::before, .consegna-eventi .ev-2 .consegna-ev { animation-delay: .7s; }
  .consegna-eventi .ev-3::before, .consegna-eventi .ev-3 .consegna-ev { animation-delay: 1.2s; }
  /* DNS: ogni record passa da «Non controllato» ad «A posto», uno alla volta, con un lampo verde sulla riga */
  html.js #demo-dns.vista .pill-neutro, html.js #demo-dns.gioca .pill-neutro { display: inline-flex; position: absolute; left: var(--space-4); top: var(--space-3); animation: consegna-attesa .3s step-end both; }
  html.js #demo-dns.vista .pill-ok, html.js #demo-dns.gioca .pill-ok { animation: consegna-aposto .3s step-end both; }
  html.js #demo-dns.vista tbody tr, html.js #demo-dns.gioca tbody tr { animation: consegna-riga 1.1s ease-out both; }
  #demo-dns tbody tr:nth-child(1), #demo-dns tbody tr:nth-child(1) .pill { animation-delay: .4s; }
  #demo-dns tbody tr:nth-child(2), #demo-dns tbody tr:nth-child(2) .pill { animation-delay: .75s; }
  #demo-dns tbody tr:nth-child(3), #demo-dns tbody tr:nth-child(3) .pill { animation-delay: 1.1s; }
  #demo-dns tbody tr:nth-child(4), #demo-dns tbody tr:nth-child(4) .pill { animation-delay: 1.45s; }
  #demo-dns tbody tr:nth-child(5), #demo-dns tbody tr:nth-child(5) .pill { animation-delay: 1.8s; }
  #demo-dns tbody tr:nth-child(6), #demo-dns tbody tr:nth-child(6) .pill { animation-delay: 2.15s; }
  #demo-dns tbody tr:nth-child(7), #demo-dns tbody tr:nth-child(7) .pill { animation-delay: 2.5s; }
  #demo-dns tbody tr:nth-child(8), #demo-dns tbody tr:nth-child(8) .pill { animation-delay: 2.85s; }
  /* rampa: le barre crescono una dopo l'altra quando la carta compare */
  html.js .card.vista .consegna-rampa rect { animation: consegna-cresce .7s cubic-bezier(.2, .7, .2, 1) both; }
  .consegna-rampa .r2 { animation-delay: .08s; }
  .consegna-rampa .r3 { animation-delay: .16s; }
  .consegna-rampa .r4 { animation-delay: .24s; }
  .consegna-rampa .r5 { animation-delay: .32s; }
  .consegna-rampa .r6 { animation-delay: .4s; }
  .consegna-rampa .r7 { animation-delay: .48s; }
  .consegna-rampa .r8 { animation-delay: .56s; }
}
@keyframes consegna-linea { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes consegna-punto { from { transform: scale(0); } to { transform: scale(1); } }
@keyframes consegna-scivola { from { transform: translateX(12px); } to { transform: none; } }
@keyframes consegna-attesa { 0%, 99% { visibility: visible; } 100% { visibility: hidden; } }
@keyframes consegna-aposto { 0%, 99% { visibility: hidden; } 100% { visibility: visible; } }
@keyframes consegna-riga { 0%, 26% { background-color: transparent; } 30% { background-color: var(--success-soft); } 100% { background-color: transparent; } }
@keyframes consegna-cresce { from { transform: scaleY(0); } to { transform: scaleY(1); } }