/* Centro de extracción (modo servidor). Mundo «app de consumo cálida»: fondo arena,
 * tarjetas blancas de esquina amplia, una idea por tarjeta, un solo color de acción. */
body { display: flex; flex-direction: column; min-height: 100%; background: var(--ground); }

/* ---------- Barra superior ---------- */
.topbar {
  position: sticky; top: 0; z-index: 5;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 64px; padding: 10px clamp(16px, 4vw, 40px);
  background: color-mix(in srgb, var(--ground) 88%, transparent);
  backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
}
.brand { display: flex; align-items: center; gap: 10px; min-width: 0; color: var(--text); text-decoration: none; }
.brand-mark {
  display: grid; place-items: center; width: 36px; height: 36px; flex: none; border-radius: 11px;
  background: var(--accent-soft); color: var(--accent-text);
}
.brand-name { font-size: var(--fs-lg); font-weight: 650; letter-spacing: -0.01em; white-space: nowrap; }
.tabs { display: flex; gap: 4px; }
.tab {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border-radius: 999px;
  color: var(--text-2); text-decoration: none; font-weight: 600; transition: background-color 160ms, color 160ms;
}
.tab:hover { color: var(--text); background: var(--bg-hover); }
.tab.is-current { background: var(--bg); color: var(--text); box-shadow: 0 0 0 1px var(--line); }

.rx { flex: 1; width: 100%; max-width: 1120px; margin: 0 auto; padding: clamp(24px, 4vw, 48px) clamp(16px, 4vw, 40px) 56px; }
.rx-loading { color: var(--text-3); text-align: center; padding: 64px 0; }

/* ---------- Piezas comunes ---------- */
.card {
  padding: 24px; border-radius: var(--r-lg); background: var(--bg);
  border: 1px solid var(--line); box-shadow: var(--shadow-card);
}
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.card-head h2 { font-size: var(--fs-xl); font-weight: 650; letter-spacing: -0.01em; }
.rx-head-icon { color: var(--text-3); }
.btn-sm { min-height: 36px; padding: 0 12px; font-size: var(--fs-sm); }
.btn-lg { min-height: 52px; padding: 0 24px; font-size: var(--fs-lg); border-radius: 14px; }
.btn-danger { color: var(--err); border-color: color-mix(in srgb, var(--err) 35%, var(--line)); }
.btn-danger:hover { background: var(--err-soft); }
.rx-lead { margin-top: 12px; color: var(--text-2); font-size: var(--fs-xl); line-height: 1.5; max-width: 54ch; }
.rx-fine { margin-top: 12px; color: var(--text-3); font-size: var(--fs-sm); max-width: 62ch; }
.rx-msg { margin-top: 14px; padding: 12px 14px; border-radius: var(--r-md); background: var(--bg-sunken); color: var(--text-2); }
.rx-note { margin: 0 0 18px; background: var(--warn-soft); color: var(--warn); }
.rx-err { background: var(--err-soft); color: var(--err); }
.rx-ok { background: var(--ok-soft); color: var(--ok); }
.rx-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 18px; }
.rx-ct { font-weight: 650; }
.rx-cs { color: var(--text-2); font-size: var(--fs-sm); margin-top: 2px; }

/* ---------- Inicio ---------- */
.rx-intro {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: clamp(28px, 5vw, 64px);
  align-items: center; padding-top: clamp(8px, 4vw, 40px);
}
.rx-intro h1 { font-size: clamp(2.25rem, 1.4rem + 3.4vw, var(--fs-4xl)); font-weight: 650; letter-spacing: -0.03em; line-height: 1.08; max-width: 14ch; }
.rx-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; margin-top: 28px; }
.rx-field { display: grid; gap: 6px; flex: 1 1 260px; max-width: 340px; }
.rx-field span, .rx-kind span { color: var(--text-2); font-size: var(--fs-sm); font-weight: 600; }
.rx-how {
  list-style: none; margin: 0; padding: 8px; display: grid; gap: 4px;
  border-radius: var(--r-lg); background: var(--bg); border: 1px solid var(--line); box-shadow: var(--shadow-card);
}
.rx-how li { display: flex; align-items: flex-start; gap: 14px; padding: 16px; border-radius: 14px; }
.rx-how li + li { border-top: 1px solid var(--line); border-radius: 0; }
.rx-how-icon {
  display: grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: 14px;
  background: var(--accent-soft); color: var(--accent-text);
}
.rx-how-t { font-weight: 650; font-size: var(--fs-lg); }
.rx-how-s { color: var(--text-2); font-size: var(--fs-sm); margin-top: 3px; }

.rx-join { max-width: 620px; margin: 24px auto 0; padding: 32px; }
.rx-join h1 { font-size: var(--fs-3xl); font-weight: 650; letter-spacing: -0.02em; }

/* ---------- Sesión: cabecera de paso ---------- */
.rx-head { margin-bottom: 28px; }
.rx-head h1 { font-size: clamp(1.875rem, 1.3rem + 2.2vw, var(--fs-3xl)); font-weight: 650; letter-spacing: -0.025em; line-height: 1.15; }
.rx-head .rx-lead { margin-top: 8px; }
.rx-route { list-style: none; margin: 24px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.rx-route li { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.rx-route-mark { position: relative; height: 6px; border-radius: 6px; background: var(--line); overflow: hidden; }
.rx-route-mark::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--accent);
  transform: scaleX(0); transform-origin: left; transition: transform 700ms var(--ease-out), background-color 300ms;
}
.rx-route li[data-state="done"] .rx-route-mark::after { transform: scaleX(1); background: var(--ok); }
.rx-route li[data-state="current"] .rx-route-mark::after { transform: scaleX(0.5); }
.rx-route li[data-state="error"] .rx-route-mark::after { transform: scaleX(1); background: var(--err); }
.rx-route-t { font-size: var(--fs-sm); font-weight: 600; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rx-route li[data-state="current"] .rx-route-t { color: var(--text); }
.rx-route li[data-state="done"] .rx-route-t { color: var(--ok); }
.rx-route li[data-state="error"] .rx-route-t { color: var(--err); }

.rx-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 340px); gap: 20px; align-items: start; }
.rx-main, .rx-side { display: flex; flex-direction: column; gap: 20px; min-width: 0; }

/* ---------- Conectar el Mac ---------- */
.rx-steps { list-style: none; margin: 0; padding: 0; display: grid; }
.rx-steps > li { display: flex; align-items: flex-start; gap: 16px; padding: 18px 0; border-top: 1px solid var(--line); }
.rx-steps > li:first-child { border-top: 0; padding-top: 0; }
.rx-steps > li > div { flex: 1; min-width: 0; }
.rx-steps .rx-actions { margin-top: 12px; }
.rx-steps .rx-fine { margin-top: 10px; }
.rx-n {
  display: grid; place-items: center; width: 32px; height: 32px; flex: none; border-radius: 50%;
  background: var(--accent-soft); color: var(--accent-text); font-weight: 700; font-size: var(--fs-sm);
}
.rx-help { margin-top: 12px; color: var(--text-2); font-size: var(--fs-sm); }
.rx-help summary, .rx-fallback summary { cursor: pointer; color: var(--accent-text); font-weight: 600; width: fit-content; border-radius: 6px; }
.rx-help[open] summary { margin-bottom: 8px; }
.rx-help ol { margin: 8px 0; padding-left: 20px; display: grid; gap: 6px; }
.rx-help p { max-width: 62ch; }
.rx-fallback { margin-top: 4px; padding-top: 18px; border-top: 1px solid var(--line); }
.rx-fallback[open] summary { margin-bottom: 16px; }
.rx-link { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: center; }
.rx-code { margin-top: 10px; font-size: 2.25rem; font-weight: 700; letter-spacing: 0.12em; line-height: 1.15; }
.rx-qr { margin: 0; display: grid; justify-items: center; gap: 8px; }
.rx-qr img { width: 176px; height: 176px; padding: 10px; border-radius: 16px; background: #fff; border: 1px solid var(--line); }
.rx-qr figcaption { color: var(--text-3); font-size: var(--fs-xs); }

/* ---------- Mac e iPhone ---------- */
.rx-checks { list-style: none; margin: 0; padding: 0; display: grid; }
.rx-checks li { display: flex; align-items: flex-start; gap: 14px; padding: 14px 0; border-top: 1px solid var(--line); }
.rx-checks li:first-child { border-top: 0; padding-top: 0; }
.rx-mark {
  width: 24px; height: 24px; flex: none; margin-top: 1px; border-radius: 50%;
  border: 2px dashed var(--line-strong); display: grid; place-items: center;
}
.rx-checks li[data-state="ok"] .rx-mark { background: var(--ok); border: 0; }
.rx-checks li[data-state="ok"] .rx-mark::after {
  content: ""; width: 10px; height: 5px; margin-top: -2px;
  border-left: 2px solid var(--on-accent); border-bottom: 2px solid var(--on-accent); transform: rotate(-45deg);
}
@media (prefers-color-scheme: dark) { .rx-checks li[data-state="ok"] .rx-mark::after { border-color: #10251a; } }
.rx-checks li[data-state="busy"] .rx-mark { border: 2px solid var(--accent); border-top-color: transparent; animation: spin 900ms linear infinite; }
.rx-checks li[data-state="err"] .rx-mark { border: 2px solid var(--err); background: var(--err-soft); }
.rx-checks li[data-state="err"] .rx-mark::after { content: ""; width: 10px; height: 2px; background: var(--err); }
.rx-checks li[data-state="err"] .rx-cs { color: var(--err); }
@keyframes spin { to { transform: rotate(360deg); } }
.rx-via { margin: 20px 0 0; padding: 0; border: 0; display: grid; gap: 10px; }
.rx-via legend { padding: 0; margin-bottom: 8px; font-weight: 650; }
.rx-via-opt { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; }
.rx-via-opt input { accent-color: var(--accent); width: 18px; height: 18px; margin: 2px 0 0; flex: none; }
.rx-via-opt small { display: block; color: var(--text-3); font-size: var(--fs-sm); }
.rx-via + .rx-start { border-top: 0; padding-top: 4px; }
.rx-start { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--line); }
.rx-kind { display: grid; gap: 6px; }
.rx-kind select { min-width: 200px; }

/* ---------- Progreso ---------- */
.rx-job-top { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 28px; align-items: start; }
.rx-ring { position: relative; width: 152px; height: 152px; flex: none; }
.rx-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.rx-ring circle { fill: none; stroke-width: 11; }
.rx-ring-track { stroke: var(--bg-hover); }
.rx-ring-fill {
  stroke: var(--accent); stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100;
  transition: stroke-dashoffset 800ms var(--ease-out), stroke 300ms;
}
#b-job[data-phase="done"] .rx-ring-fill { stroke: var(--ok); }
#b-job[data-phase="error"] .rx-ring-fill, #b-job[data-phase="cancelled"] .rx-ring-fill { stroke: var(--err); }
.rx-ring-label { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.rx-pct { font-size: 2rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1; }
.rx-ring-sub { margin-top: 4px; color: var(--text-3); font-size: var(--fs-xs); font-weight: 600; }
.rx-now { color: var(--text); font-size: var(--fs-lg); font-weight: 500; }
/* Cifras como filas con separador fino junto al anillo (no baldosas dentro de la tarjeta). */
.rx-stats { display: grid; margin: 14px 0 0; }
.rx-stats div { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 9px 0; border-top: 1px solid var(--line); min-width: 0; }
.rx-stats div:first-child { border-top: 0; padding-top: 0; }
.rx-stats dt { color: var(--text-2); font-size: var(--fs-sm); }
.rx-stats dd { margin: 0; font-weight: 650; font-size: var(--fs-md); text-align: right; overflow-wrap: anywhere; }
.rx-mini { list-style: none; margin: -6px 0 18px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 16px; color: var(--text-2); font-size: var(--fs-sm); }
.rx-mini li { display: inline-flex; align-items: center; gap: 7px; }
.rx-mini-mark { width: 10px; height: 10px; border-radius: 50%; border: 2px dashed var(--line-strong); }
.rx-mini li[data-state="ok"] .rx-mini-mark { border: 0; background: var(--ok); }
.rx-mini li[data-state="err"] .rx-mini-mark { border: 0; background: var(--err); }
.rx-stages { list-style: none; margin: 22px 0 0; padding: 0; display: grid; }
.rx-stages li { display: grid; grid-template-columns: 14px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); }
.rx-stages li:first-child { border-top: 0; }
.rx-dot { width: 10px; height: 10px; border-radius: 50%; border: 2px dashed var(--line-strong); justify-self: center; transition: transform 200ms, background-color 200ms; }
.rx-sn { color: var(--text-2); }
.rx-ss { color: var(--text-3); font-size: var(--fs-sm); }
.rx-stages li[data-status="running"] .rx-dot { border: 0; background: var(--accent); transform: scale(1.25); box-shadow: 0 0 0 4px var(--accent-soft); }
.rx-stages li[data-status="running"] .rx-sn { color: var(--text); font-weight: 650; }
.rx-stages li[data-status="running"] .rx-ss { color: var(--accent-text); font-weight: 600; }
.rx-stages li[data-status="done"] .rx-dot { border: 0; background: var(--ok); }
.rx-stages li[data-status="done"] .rx-sn { color: var(--text); }
.rx-stages li[data-status="done"] .rx-ss { color: var(--ok); }
.rx-stages li[data-status="error"] .rx-dot { border: 0; background: var(--err); }
.rx-stages li[data-status="error"] .rx-sn, .rx-stages li[data-status="error"] .rx-ss { color: var(--err); font-weight: 600; }

/* ---------- Tus datos ---------- */
.rx-drive { display: flex; align-items: flex-start; gap: 12px; padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px solid var(--line); }
.rx-drive-icon { display: grid; place-items: center; width: 36px; height: 36px; flex: none; border-radius: 11px; background: var(--bg-sunken); color: var(--text-2); }
.rx-drive[data-on="true"] .rx-drive-icon { background: var(--ok-soft); color: var(--ok); }
.rx-drive-actions { margin: -4px 0 14px; }
#drive-msg { margin: 0 0 14px; }
.rx-datasets { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.rx-datasets li { padding: 12px 14px; border-radius: var(--r-md); background: var(--bg-sunken); }
.rx-ds-name { font-weight: 650; overflow-wrap: anywhere; }
.rx-ds-meta { color: var(--text-2); font-size: var(--fs-sm); margin-top: 2px; }
.rx-ds-flags { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.rx-ds-flags li { padding: 0; background: none; }
.rx-flag { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 999px; font-size: var(--fs-xs); font-weight: 600; background: var(--bg); color: var(--text-3); border: 1px dashed var(--line-strong); }
.rx-flag[data-on="true"] { background: var(--ok-soft); color: var(--ok); border: 1px solid transparent; }
.rx-flag[data-on="true"]::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
#b-data .rx-actions .btn { width: 100%; }

/* ---------- Registro y pie ---------- */
.rx-log summary { cursor: pointer; font-weight: 650; border-radius: 6px; }
.rx-log-list { list-style: none; margin: 14px 0 0; padding: 0; max-height: 300px; overflow: auto; font-size: 12px; line-height: 1.55; color: var(--text-2); }
.rx-log-list li { padding: 2px 0; white-space: pre-wrap; word-break: break-word; }
.rx-log-list li[data-level="warning"], .rx-log-list li[data-level="error"] { color: var(--warn); }
.rx-foot { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; margin-top: 28px; }

@media (max-width: 900px) {
  .rx-intro { grid-template-columns: 1fr; }
  .rx-grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .topbar { padding: 8px 16px; }
  .brand-name { font-size: var(--fs-md); }
  .card { padding: 20px 18px; }
  .rx-route { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 14px; }
  .rx-job-top { grid-template-columns: 1fr; justify-items: center; gap: 18px; }
  .rx-job-copy { width: 100%; }
  .rx-link { grid-template-columns: 1fr; }
  .rx-qr { justify-self: center; }
  .rx-code { font-size: 1.875rem; }
  .rx-start .btn-lg, .rx-form .btn-lg { width: 100%; }
  .rx-field { max-width: none; }
}

#dl-alt code { font-family: var(--mono); font-size: 0.92em; padding: 1px 6px; border-radius: 6px; background: var(--bg-sunken); color: var(--text); overflow-wrap: anywhere; }