/* Diagramas dos guias do Send Planning (29.10.2026). Só os guias do tema
   «planning» carregam este ficheiro (marcador <!--sp--> em build.py).
   Todo o texto fica no HTML (traduzível); aqui só forma e movimento.
   Regra do site: cada diagrama já se lê parado (o 1.º fotograma é o estado
   final); a animação só sublinha. Sem movimento em prefers-reduced-motion. */

.sp-fig{margin:26px 0;padding:20px;border-radius:var(--r-lg);background:var(--face);box-shadow:var(--raise-sm);overflow-x:auto}
.sp-cap{margin:12px 0 0;font:500 13.5px/1.55 var(--font-ui);color:var(--muted);max-width:62ch}

/* 1. Semana: uma linha por pessoa, uma coluna por dia ------------------- */
.sp-week{display:grid;grid-template-columns:minmax(72px,auto) repeat(7,minmax(54px,1fr));gap:6px;min-width:520px;font:600 12px/1.2 var(--font-ui)}
.sp-week .sp-d{padding:4px 0;text-align:center;color:var(--muted);letter-spacing:.04em;text-transform:uppercase;font-size:11px}
.sp-week .sp-p{display:flex;align-items:center;gap:7px;color:var(--ink);font-size:13px;min-width:0}
.sp-week .sp-p i{flex:none;width:10px;height:10px;border-radius:50%;background:var(--c,var(--primary))}
.sp-cell{min-height:40px;border-radius:var(--r-sm);background:var(--bg);box-shadow:var(--inset-sm);display:flex;flex-direction:column;gap:3px;padding:4px}
.sp-s{display:block;padding:5px 6px;border-radius:6px;background:color-mix(in srgb,var(--c,var(--primary)) 22%,var(--bg));
  border-left:3px solid var(--c,var(--primary));color:var(--ink);font:600 11.5px/1.25 var(--font-mono);white-space:nowrap}
.sp-s small{display:block;font:500 10.5px/1.25 var(--font-ui);color:var(--muted);white-space:normal}
.sp-s.is-off{background:repeating-linear-gradient(135deg,color-mix(in srgb,var(--muted) 12%,var(--bg)) 0 6px,var(--bg) 6px 12px);border-left-color:var(--muted);color:var(--muted);font-family:var(--font-ui)}
.sp-s.is-hot{animation:sp-pulse 2.6s ease-in-out infinite}
.sp-s.is-moved{outline:2px dashed var(--c,var(--primary));outline-offset:1px}
@keyframes sp-pulse{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--c,var(--primary)) 0%,transparent)}
  50%{box-shadow:0 0 0 5px color-mix(in srgb,var(--c,var(--primary)) 30%,transparent)}}
/* cores das pessoas: style="--c:var(--data-1)" … var(--data-8) */

/* 2. Troca de turnos: dois cartões que trocam de dono -------------------- */
.sp-swap{display:grid;grid-template-columns:1fr auto 1fr;gap:16px;align-items:center;max-width:620px}
.sp-swap-card{position:relative;display:flex;flex-direction:column;gap:6px;padding:14px 16px;border-radius:var(--r-md);background:var(--bg);box-shadow:var(--inset-sm);min-width:0}
.sp-swap-card b{font:700 13px/1.2 var(--font-ui);color:var(--muted);letter-spacing:.03em;text-transform:uppercase}
.sp-swap-card .sp-s{font-size:13px}
.sp-swap-mid{display:flex;flex-direction:column;align-items:center;gap:6px;color:var(--primary-text);font:600 12px/1.2 var(--font-ui);text-align:center}
.sp-swap-mid .sp-arr{width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--primary);color:var(--on-primary);box-shadow:var(--raise-sm);animation:sp-spin 4s ease-in-out infinite}
.sp-swap-mid .sp-arr svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.sp-swap-card:first-child .sp-s{animation:sp-hop-r 4s ease-in-out infinite}
.sp-swap-card:last-child .sp-s{animation:sp-hop-l 4s ease-in-out infinite}
@keyframes sp-spin{0%,55%{transform:rotate(0)}75%,100%{transform:rotate(180deg)}}
@keyframes sp-hop-r{0%,50%,100%{transform:none}62%{transform:translateY(-6px)}}
@keyframes sp-hop-l{0%,50%,100%{transform:none}62%{transform:translateY(6px)}}
.sp-note{display:flex;align-items:flex-start;gap:10px;margin-top:16px;padding:12px 14px;border-radius:var(--r-md);background:var(--tint);color:var(--primary-text);font:500 14px/1.45 var(--font-ui)}
.sp-note b{color:var(--ink)}

/* 3. Rota: casa → local com um ponto que anda ---------------------------- */
.sp-route{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:14px;max-width:620px}
.sp-stop{display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px;border-radius:var(--r-md);background:var(--bg);box-shadow:var(--inset-sm);font:700 13.5px/1.25 var(--font-ui);color:var(--ink);text-align:center;min-width:92px}
.sp-stop small{font:500 12px/1.35 var(--font-ui);color:var(--muted)}
.sp-road{position:relative;height:44px;display:flex;align-items:center}
.sp-road::before{content:"";position:absolute;left:0;right:0;top:50%;border-top:2.5px dashed color-mix(in srgb,var(--primary) 55%,var(--bg))}
.sp-road i{position:absolute;top:50%;left:0;width:14px;height:14px;margin-top:-7px;border-radius:50%;background:var(--primary);box-shadow:0 0 0 4px color-mix(in srgb,var(--primary) 25%,transparent);animation:sp-drive 3.6s ease-in-out infinite alternate}
.sp-road span{position:relative;margin:0 auto;transform:translateY(-20px);padding:2px 8px;border-radius:999px;background:var(--face);font:700 12.5px/1.3 var(--font-mono);color:var(--primary-text);white-space:nowrap}
@keyframes sp-drive{from{left:0}to{left:calc(100% - 14px)}}
.sp-legs{display:grid;gap:10px;max-width:620px}

/* 4. Envio: um horário, uma mensagem por pessoa ------------------------- */
.sp-send{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:14px}
.sp-msg{display:flex;flex-direction:column;gap:8px;padding:12px;border-radius:var(--r-md);background:var(--bg);box-shadow:var(--inset-sm);min-width:0}
.sp-msg-h{display:flex;align-items:center;gap:8px;font:700 13px/1.2 var(--font-ui);color:var(--ink)}
.sp-msg-h i{width:26px;height:26px;border-radius:50%;background:var(--c,var(--primary));flex:none}
.sp-msg-h small{margin-left:auto;font:600 11px/1 var(--font-ui);color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.sp-bub{align-self:flex-start;max-width:100%;padding:9px 11px;border-radius:14px 14px 14px 4px;background:color-mix(in srgb,var(--positive) 18%,var(--face));color:var(--ink);font:500 12.5px/1.45 var(--font-ui);white-space:pre-line;animation:sp-in .5s ease-out both}
.sp-msg:nth-child(2) .sp-bub{animation-delay:.25s}
.sp-msg:nth-child(3) .sp-bub{animation-delay:.5s}
.sp-msg:nth-child(4) .sp-bub{animation-delay:.75s}
@keyframes sp-in{from{transform:translateY(6px) scale(.98)}to{transform:none}}
.sp-tick{align-self:flex-end;font:600 11px/1 var(--font-ui);color:var(--positive)}

/* 5. Papel à escala: A6, A5, A4, A3 (mm reais, 1 mm = --mm) ---------------- */
.sp-paper{--mm:.62px;display:flex;align-items:flex-end;gap:14px;flex-wrap:wrap}
.sp-sheet{position:relative;width:calc(var(--w) * var(--mm));height:calc(var(--h) * var(--mm));border-radius:4px;background:var(--bg);box-shadow:var(--raise-sm);display:flex;flex-direction:column;justify-content:flex-end;padding:8px;font:700 13px/1.2 var(--font-ui);color:var(--ink)}
.sp-sheet small{display:block;font:500 11px/1.3 var(--font-mono);color:var(--muted)}
.sp-sheet::before{content:"";position:absolute;left:8px;right:8px;top:10px;height:42%;border-radius:2px;
  background:repeating-linear-gradient(90deg,color-mix(in srgb,var(--primary) 30%,var(--bg)) 0 12%,transparent 12% 14.3%),
  repeating-linear-gradient(0deg,var(--bg) 0 3px,transparent 3px 9px);opacity:.9}
.sp-sheet.is-key{outline:2px solid var(--primary);outline-offset:2px}
@media (max-width:600px){.sp-paper{--mm:.42px}}

/* 6. Dia numa régua de horas (serviços e pausas) ------------------------- */
.sp-day{--from:6;--to:24;position:relative;min-width:480px;padding-top:4px}
.sp-lane{position:relative;display:grid;grid-template-columns:90px 1fr;align-items:center;gap:10px;margin:8px 0}
.sp-lane > b{font:600 13px/1.2 var(--font-ui);color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sp-track{position:relative;height:30px;border-radius:7px;background:var(--bg);box-shadow:var(--inset-sm)}
.sp-bar{position:absolute;top:4px;bottom:4px;left:calc((var(--a) - var(--from)) / (var(--to) - var(--from)) * 100%);
  width:calc((var(--b) - var(--a)) / (var(--to) - var(--from)) * 100%);border-radius:5px;background:var(--c,var(--primary));
  color:var(--on-primary);font:700 11px/22px var(--font-mono);text-align:center;overflow:hidden;white-space:nowrap}
.sp-bar.is-pause{background:repeating-linear-gradient(135deg,var(--warn) 0 4px,color-mix(in srgb,var(--warn) 45%,var(--bg)) 4px 8px);color:var(--ink)}
.sp-axis{position:relative;height:18px;margin-left:100px;font:500 11px/18px var(--font-mono);color:var(--muted)}
.sp-axis span{position:absolute;left:calc((var(--t) - var(--from)) / (var(--to) - var(--from)) * 100%);transform:translateX(-50%)}
.sp-now{position:absolute;top:0;bottom:0;width:2px;background:var(--negative);left:calc((var(--t) - var(--from)) / (var(--to) - var(--from)) * 100%);animation:sp-blink 1.6s steps(2) infinite}
@keyframes sp-blink{50%{opacity:.35}}

/* 7. Calendário de 14+ dias com o prazo (ex.: aviso 2 semanas antes) ------ */
.sp-cal{display:grid;grid-template-columns:repeat(7,minmax(36px,1fr));gap:5px;min-width:300px;max-width:560px;font:600 12px/1 var(--font-mono)}
.sp-cal .sp-d{padding:4px 0;text-align:center;font:600 10.5px/1 var(--font-ui);color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.sp-day1{display:flex;align-items:flex-start;justify-content:flex-start;aspect-ratio:1;padding:5px;border-radius:7px;background:var(--bg);box-shadow:var(--inset-sm);color:var(--muted)}
.sp-day1.is-gap{background:color-mix(in srgb,var(--primary) 12%,var(--bg));color:var(--primary-text)}
.sp-day1.is-send{background:var(--primary);color:var(--on-primary);box-shadow:var(--raise-sm)}
.sp-day1.is-work{background:color-mix(in srgb,var(--positive) 30%,var(--bg));color:var(--ink);animation:sp-pulse 2.6s ease-in-out infinite;--c:var(--positive)}
.sp-day1.is-off{background:repeating-linear-gradient(135deg,color-mix(in srgb,var(--muted) 14%,var(--bg)) 0 5px,var(--bg) 5px 10px)}
.sp-key{display:flex;flex-wrap:wrap;gap:8px 16px;margin-top:12px;font:500 12.5px/1.3 var(--font-ui);color:var(--muted)}
.sp-key span{display:inline-flex;align-items:center;gap:6px}
.sp-key i{width:14px;height:14px;border-radius:4px;background:var(--k)}

/* 8. Série que se repete (o mesmo padrão, semana após semana) ------------- */
.sp-rep{display:grid;gap:6px;max-width:560px}
.sp-rep-row{display:grid;grid-template-columns:62px repeat(7,1fr);gap:5px;align-items:center;font:600 11.5px/1 var(--font-ui);color:var(--muted)}
.sp-rep-row > span{height:26px;border-radius:6px;background:var(--bg);box-shadow:var(--inset-sm)}
.sp-rep-row > span.on{background:var(--c,var(--primary));box-shadow:none}
.sp-rep-row > span.off{background:repeating-linear-gradient(135deg,color-mix(in srgb,var(--muted) 14%,var(--bg)) 0 5px,var(--bg) 5px 10px)}
.sp-rep-row:nth-child(n+2) > span.on{animation:sp-copy .6s ease-out both}
.sp-rep-row:nth-child(3) > span.on{animation-delay:.2s}
.sp-rep-row:nth-child(4) > span.on{animation-delay:.4s}
@keyframes sp-copy{from{transform:scale(.9)}to{transform:none}}

/* 9. Passos no ecrã (toque, toque longo…) com um dedo que pulsa ------------ */
.sp-taps{list-style:none;padding:0;margin:22px 0;display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:14px;counter-reset:sp}
.sp-taps li{position:relative;margin:0;padding:16px 14px 14px 52px;border-radius:var(--r-md);background:var(--face);box-shadow:var(--raise-sm);font:500 14px/1.45 var(--font-ui);color:var(--muted);counter-increment:sp}
.sp-taps li b{display:block;margin-bottom:3px;color:var(--ink);font-weight:700}
.sp-taps li::before{content:counter(sp);position:absolute;left:14px;top:15px;width:26px;height:26px;border-radius:50%;background:var(--tint);color:var(--primary-text);font:700 13px/26px var(--font-ui);text-align:center}
.sp-taps li.is-long::before{animation:sp-press 2.2s ease-in-out infinite}
@keyframes sp-press{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--primary) 0%,transparent)}40%,70%{box-shadow:0 0 0 7px color-mix(in srgb,var(--primary) 28%,transparent)}}

@media (max-width:600px){
  .sp-fig{padding:14px;margin:22px -4px}
  .sp-swap{grid-template-columns:1fr}
  .sp-swap-mid{flex-direction:row;justify-content:center}
  .sp-swap-mid .sp-arr{transform:rotate(90deg);animation:none}
  .sp-route{grid-template-columns:1fr}
  .sp-road{height:40px}
  .sp-stop{min-width:0}
}
@media (prefers-reduced-motion: reduce){
  .sp-fig *,.sp-fig *::before,.sp-fig *::after,.sp-taps li::before{animation:none !important}
  .sp-road i{left:calc(100% - 14px)}
}