/* Slide «services» (servicios externos): el dibujo (usted y su extensión, el asistente, DalIA con su bóveda y su ejecutor, el servicio de terceros) y los cinco pasos que se iluminan en secuencia.
   js/demos/services.js marca el paso activo en la raíz (.sv[data-step]) y enciende lo que corresponde (data-from / data-until); aquí está lo que se ve en cada paso. Clases con prefijo sv-. */
@media (min-width: 861px) {
  .slide--services .wrap { max-width: 1280px; grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.5fr); }
}
.sv { min-width: 0; }
.sv-diagram { max-width: 860px; }

/* Piezas del dibujo */
.diagram .sv-dalia { fill: var(--accent-soft); stroke: var(--accent); stroke-width: 2; }
.diagram .sv-title { fill: var(--accent); font-size: 17px; font-weight: 800; }
.diagram .sv-card { fill: var(--bg); stroke: var(--line); stroke-width: 1.5; transition: stroke 0.3s, stroke-width 0.3s; }
.diagram .sv-label { text-anchor: start; font-size: 13px; }
.diagram .sv-sub { text-anchor: start; fill: var(--muted); font-size: 10.5px; font-weight: 600; }
.diagram .sv-cap { fill: var(--muted); font-size: 10px; font-weight: 600; }
.diagram .sv-tag { fill: var(--accent); font-size: 11px; font-weight: 800; letter-spacing: 0.06em; }
.diagram .sv-badge { fill: var(--accent); }
.diagram .sv-badge-text { fill: var(--accent-ink); font-size: 10px; font-weight: 800; }
.diagram .sv-pill { fill: var(--teal); }
.diagram .sv-pill-text { fill: #0b1020; font-size: 10px; font-weight: 800; }
.diagram .sv-path { fill: none; stroke: var(--amber); stroke-width: 2; stroke-dasharray: 6 6; opacity: 0.6; animation: dash-flow 2s linear infinite; }

/* Íconos de trazo */
.diagram .sv-ico { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.diagram .sv-ico--amber { stroke: var(--amber); }
.diagram .sv-ico--teal { stroke: var(--teal); }
.diagram .sv-person { fill: var(--accent-soft); }
.diagram .sv-key-ring { fill: var(--bg); stroke: var(--amber); stroke-width: 2; }
.diagram .sv-key-body { fill: none; stroke: var(--amber); stroke-width: 2; stroke-linecap: round; }
.diagram .sv-stored { font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; }

/* La clave no pasa por el asistente */
.diagram .sv-nokey { fill: var(--bg); stroke: var(--reject); stroke-width: 1.6; }
.diagram .sv-slash { stroke: var(--reject); stroke-width: 2; stroke-linecap: round; }

/* El aviso que le llega a la extensión */
.diagram .sv-bubble { fill: var(--bg); stroke: var(--amber); stroke-width: 1.5; }
.diagram .sv-bubble-seam { stroke: var(--bg); stroke-width: 3; }
.diagram .sv-bubble-title { font-size: 12px; }
.diagram .sv-check { fill: var(--teal); }
.diagram .sv-check-mark { fill: none; stroke: #0b1020; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Lo que viaja */
.diagram .sv-mover { filter: drop-shadow(0 1px 2px rgba(15, 23, 42, 0.35)); }
.diagram .sv-dot--ask { fill: var(--accent); }
.diagram .sv-dot--notify { fill: var(--amber); }
.diagram .sv-result { fill: #f0b54a; }
.diagram .sv-result-text { fill: #0b1020; font-size: 10px; font-weight: 800; }

/* Qué se ve en cada paso: las piezas con data-from aparecen desde ese paso, las de data-until se van en él. Sin JavaScript no se oculta nada que ya esté en el dibujo terminado
   (salvo las piezas de data-until, que son de pasos intermedios). El orden de estas reglas importa. */
.diagram [data-until] { opacity: 0; }
.sv-live [data-until] { opacity: 1; transition: opacity 0.4s; }
.sv-live [data-from] { opacity: 0; transition: opacity 0.4s; }
.sv-live [data-from].is-on { opacity: 1; }
.sv-live [data-until].is-off { opacity: 0; }

/* Qué se ilumina en cada paso */
.sv[data-step="1"] .sv-assistant, .sv[data-step="4"] .sv-assistant, .sv[data-step="5"] .sv-assistant { stroke: var(--accent); stroke-width: 3; }
.sv[data-step="2"] .sv-ext, .sv[data-step="3"] .sv-ext { stroke: var(--amber); stroke-width: 3; }
.sv[data-step="3"] .sv-vault { stroke: var(--amber); stroke-width: 3; }
.sv[data-step="4"] .sv-exec { stroke: var(--accent); stroke-width: 3; }
.sv[data-step="4"] .sv-service, .sv[data-step="5"] .sv-service { stroke: var(--teal); stroke-width: 3; }

/* Los cinco pasos */
.sv-steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin: 14px 0 0; padding: 0; list-style: none; counter-reset: sv; }
.sv-steps li { counter-increment: sv; display: flex; }
.sv-steps button {
  flex: 1;
  padding: 9px 10px 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--bg);
  color: var(--muted);
  font: 600 0.76rem/1.4 "Plus Jakarta Sans", sans-serif;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.25s, background 0.25s, color 0.25s;
}
.sv-steps button::before {
  content: counter(sv);
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  margin-right: 6px;
  border-radius: 50%;
  background: var(--line);
  color: var(--ink);
  font-size: 0.68rem;
  font-weight: 800;
  vertical-align: 1px;
  transition: background 0.25s, color 0.25s;
}
.sv-steps button:hover { border-color: var(--accent); }
.sv-steps button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sv-steps li.is-active button { border-color: var(--accent); background: var(--accent-soft); color: var(--ink); }
.sv-steps li.is-active button::before { background: var(--accent); color: var(--accent-ink); }

@media (max-width: 1100px) {
  .sv-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .sv-steps { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .diagram .sv-path { animation: none; }
  .sv-live [data-from], .sv-live [data-until], .diagram .sv-card, .sv-steps button, .sv-steps button::before { transition: none; }
}