/* ============================================================
   Editor Jefe: Pipeline progress, scheduler, debug panel,
   estado legend
   ============================================================ */

/* ── Pipeline progress panel ───────────────────── */
.pipeline-progress {
  background: var(--color-surface-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  margin-bottom: 20px;
  overflow: hidden;
}
.pipeline-progress__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  background: var(--color-primary-subtle);
  border-bottom: 1px solid var(--color-border-subtle);
}
.pipeline-progress__title { margin: 0; font-size: 15px; font-weight: 600; color: var(--color-text); }
.pipeline-progress__elapsed { font-family: var(--font-mono); font-size: 13px; color: var(--color-text-muted); }
.pipeline-progress__steps { padding: 16px 20px; display: flex; flex-direction: column; gap: 10px; }

.pipeline-step {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: var(--radius);
  background: var(--color-surface);
  border: 1px solid var(--color-border-subtle);
  transition: background var(--transition), border-color var(--transition);
}
.pipeline-step--active { background: #eff6ff; border-color: #93c5fd; }
.pipeline-step--ok { background: #f0fdf4; border-color: #86efac; }
.pipeline-step--error { background: #fef2f2; border-color: #fca5a5; }

.pipeline-step__icon { flex-shrink: 0; width: 22px; text-align: center; font-size: 14px; color: var(--color-text-muted); }
.pipeline-step--active .pipeline-step__icon { color: #2563eb; }
.pipeline-step--ok .pipeline-step__icon { color: #16a34a; font-weight: bold; }
.pipeline-step--error .pipeline-step__icon { color: #dc2626; font-weight: bold; }

.pipeline-step__label { flex: 1; font-size: 14px; color: var(--color-text); }

.pipeline-step__status { font-size: 12px; font-family: var(--font-mono); color: var(--color-text-muted); }
.pipeline-step--ok .pipeline-step__status { color: #16a34a; }
.pipeline-step--error .pipeline-step__status { color: #dc2626; }

.pipeline-step__spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid #93c5fd;
  border-top-color: #2563eb;
  border-radius: 50%;
  animation: pipeline-spin 0.8s linear infinite;
}
@keyframes pipeline-spin { to { transform: rotate(360deg); } }

.pipeline-progress__toggle { padding: 0 20px 8px; }
.pipeline-progress__debug { border-top: 1px solid var(--color-border-subtle); margin: 0 20px 16px; }
.pipeline-progress__debug-content {
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.6;
  background: #1e2328;
  color: #d4d8de;
  padding: 12px 16px;
  border-radius: var(--radius);
  max-height: 400px;
  overflow-y: auto;
  white-space: pre-wrap;
  word-break: break-word;
}
.pipeline-progress__debug-content .log-error { color: #f87171; }
.pipeline-progress__debug-content .log-warn { color: #fbbf24; }
.pipeline-progress__debug-content .log-step { color: #60a5fa; font-weight: 600; }
.pipeline-progress__debug-content .log-ok { color: #4ade80; }

/* ── Scheduler Panel ───────────────────────────── */
.scheduler-panel {
  background: var(--color-surface-elevated);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius);
  margin-bottom: 20px;
  overflow: hidden;
}
.scheduler-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--color-border-subtle);
  background: var(--color-surface-alt);
}
.scheduler-panel__title { font-family: var(--font-display); font-size: 16px; font-weight: 400; }

.scheduler-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1px;
  background: var(--color-border-subtle);
}
.scheduler-card { background: var(--color-surface-elevated); padding: 14px 16px; text-align: center; transition: background var(--transition); }
.scheduler-card--running { background: var(--color-primary-subtle); }
.scheduler-card__name { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-text-muted); margin-bottom: 6px; }
.scheduler-card__countdown { font-family: var(--font-mono); font-size: 22px; font-weight: 700; color: var(--color-text); line-height: 1; margin-bottom: 6px; }
.scheduler-card__status { font-size: 11px; font-weight: 600; color: var(--color-text-muted); }
.scheduler-card__status--running { color: var(--color-primary); }
.scheduler-card__status--ok { color: var(--color-positive); }
.scheduler-card__status--error { color: var(--color-negative); }
.scheduler-card__next-publish { font-size: 12px; font-weight: 600; color: var(--color-primary); margin-top: 4px; line-height: 1.3; }

.scheduler-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: var(--color-surface-elevated);
  border-bottom: 1px solid var(--color-border-subtle);
  flex-wrap: wrap;
}
.scheduler-actions__progress { font-size: 13px; color: var(--color-text-muted); margin-left: auto; }

/* ── Debug Panel ──────────────────────────────── */
.debug-panel {
  background: var(--color-surface-elevated);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius);
  margin-bottom: 20px;
  overflow: hidden;
}
.debug-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  border-bottom: 1px solid var(--color-border-subtle);
  background: var(--color-sidebar);
  color: white;
}
.debug-panel__header .scheduler-panel__title { color: white; }
.debug-panel__header .btn--ghost { color: rgba(255,255,255,0.7); }
.debug-panel__header .btn--ghost:hover { color: white; background: rgba(255,255,255,0.1); }

.debug-log {
  max-height: 320px;
  overflow-y: auto;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.6;
  background: #1a1614;
  color: #d4d0cc;
}
.debug-entry { display: flex; gap: 8px; padding: 3px 12px; border-bottom: 1px solid rgba(255,255,255,0.04); }
.debug-entry:hover { background: rgba(255,255,255,0.03); }
.debug-entry--error { color: #f87171; background: rgba(248,113,113,0.06); }
.debug-entry--warn { color: #fbbf24; }
.debug-entry__time { color: #6b7280; flex-shrink: 0; min-width: 65px; }
.debug-entry__source { color: var(--color-primary-light); font-weight: 600; flex-shrink: 0; min-width: 70px; }
.debug-entry__msg { word-break: break-word; }

/* ── Estado legend ─────────────────────────────── */
.estado-legend {
  background: var(--color-surface-elevated);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius);
  margin-bottom: 20px;
  overflow: hidden;
}
.estado-legend__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  background: var(--color-surface-alt);
  border-bottom: 1px solid var(--color-border-subtle);
  cursor: pointer;
  user-select: none;
}
.estado-legend__header:hover { background: var(--color-surface); }
.estado-legend__title { font-size: 13px; font-weight: 700; color: var(--color-text-secondary); text-transform: uppercase; letter-spacing: 0.06em; }
.estado-legend__toggle { font-size: 12px; color: var(--color-text-muted); transition: transform 200ms ease; }

.estado-legend__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1px;
  background: var(--color-border-subtle);
}
.estado-legend__item { display: flex; align-items: flex-start; gap: 10px; padding: 10px 16px; background: var(--color-surface-elevated); }
.estado-legend__dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; margin-top: 5px; }
.estado-legend__name { font-size: 13px; font-weight: 700; color: var(--color-text); text-transform: capitalize; }
.estado-legend__desc { font-size: 12px; color: var(--color-text-muted); line-height: 1.4; }

.estado-dot--pendiente { background: #9ca3af; }
.estado-dot--extrayendo { background: #3b82f6; }
.estado-dot--extraido { background: #60a5fa; }
.estado-dot--clasificado { background: #f59e0b; }
.estado-dot--listo { background: #f97316; }
.estado-dot--aprobado { background: #22c55e; }
.estado-dot--procesado { background: #166534; }
.estado-dot--publicado { background: var(--color-positive); }
.estado-dot--descartado { background: #9ca3af; }
.estado-dot--error { background: #ef4444; }