/* Trabajos: cron jobs (the schedule Vercel calls) and Cursor cloud agents. */
.jobs-head { align-items: flex-end; }
.jobs-status { margin: 0; color: var(--color-text-muted); font-size: var(--text-sm); }

.jobs-h {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 28px 0 12px;
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
}
.jobs-h:has(+ .jobs-lead) { margin-bottom: 4px; }
.jobs-sub { margin-top: 18px; font-size: var(--text-sm); }
.jobs-lead {
  margin: 0 0 12px;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.jobs-crons-wrap {
  max-width: 100%;
  border: 1px solid rgba(16, 32, 26, 0.06);
  border-radius: 16px;
  background: var(--color-paper);
  box-shadow: 0 1px 2px rgba(16, 32, 26, 0.03), 0 8px 24px rgba(16, 32, 26, 0.04);
  overflow: auto;
}
.jobs-crons { width: 100%; border-collapse: collapse; }
.jobs-crons th,
.jobs-crons td {
  padding: 12px 16px;
  text-align: left;
  vertical-align: top;
}
.jobs-crons th {
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  white-space: nowrap;
}
.jobs-crons td { border-top: 1px solid #f3f4f1; font-size: var(--text-sm); }
.jobs-crons td:nth-child(2) { white-space: nowrap; }
.jobs-crons code { font-family: var(--font-mono); font-size: 0.85em; }
.jobs-count:empty { display: none; }
.jobs-count {
  min-width: 22px;
  padding: 1px 7px;
  border-radius: 999px;
  background: #e6efe8;
  color: var(--color-accent);
  font-size: var(--text-xs);
  text-align: center;
}

.jobs-empty {
  margin: 0;
  padding: 18px 20px;
  border: 1px solid rgba(16, 32, 26, 0.06);
  border-radius: 16px;
  background: var(--color-paper);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.jobs-running { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
.jobs-running:empty { display: none; }

.jobs-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px 20px 16px;
  border: 1px solid rgba(16, 32, 26, 0.06);
  border-radius: 16px;
  background: var(--color-paper);
  box-shadow: 0 1px 2px rgba(16, 32, 26, 0.03), 0 8px 24px rgba(16, 32, 26, 0.04);
}
.jobs-card-head { display: flex; align-items: flex-start; gap: 10px; }
.jobs-title { margin: 0; font-size: var(--text-md); font-weight: var(--weight-semibold); line-height: 1.35; }

.jobs-mark {
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  color: var(--color-accent);
}
.jobs-card[data-state="quiet"] .jobs-mark { color: #8a5a1c; }
.jobs-mark-track { stroke: rgba(16, 32, 26, 0.1); stroke-width: 2.5; }
.jobs-mark-fill { stroke: currentColor; stroke-width: 2.5; transform: rotate(-90deg); transform-origin: center; transition: stroke-dasharray 0.6s ease; }
.jobs-mark-clock { stroke: currentColor; stroke-width: 1.8; }

.jobs-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--text-xs);
}
.jobs-chip {
  padding: 1px 8px;
  border-radius: 6px;
  background: #e6efe8;
  color: #2f7a52;
  font-weight: var(--weight-medium);
}

.jobs-clock { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 0; font-size: var(--text-sm); }
.jobs-clock span { color: var(--color-text-muted); }

.jobs-progress {
  padding: 10px 12px;
  border-radius: 10px;
  background: #f7f7f4;
}
.jobs-progress p { margin: 0; }
.jobs-progress-text { font-size: var(--text-sm); line-height: 1.45; }
.jobs-progress-text.is-empty { color: var(--color-text-muted); }
.jobs-progress-at { margin-top: 4px !important; color: var(--color-text-faint); font-size: var(--text-xs); }
.jobs-quiet { margin-top: 6px !important; color: #8a5a1c; font-size: var(--text-xs); font-weight: var(--weight-medium); }

.jobs-open {
  align-self: flex-start;
  color: var(--color-accent);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  text-decoration: none;
}
.jobs-open::after { content: " ↗"; }
.jobs-open:hover { text-decoration: underline; }

.jobs-done { display: flex; flex-direction: column; border: 1px solid rgba(16, 32, 26, 0.06); border-radius: 16px; background: var(--color-paper); box-shadow: 0 1px 2px rgba(16, 32, 26, 0.03), 0 8px 24px rgba(16, 32, 26, 0.04); overflow: hidden; }
.jobs-done:empty { display: none; }
.jobs-row + .jobs-row { border-top: 1px solid #f3f4f1; }
.jobs-row-head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  position: relative;
  padding: 12px 36px 12px 16px;
  cursor: pointer;
  list-style: none;
}
.jobs-row-head::-webkit-details-marker { display: none; }
.jobs-row-head::after { content: ""; position: absolute; right: 16px; top: 50%; width: 6px; height: 6px; margin-top: -4px; border-right: 1.6px solid #8b958f; border-bottom: 1.6px solid #8b958f; transform: rotate(-45deg); transition: transform 0.15s ease; }
.jobs-row[open] > .jobs-row-head::after { transform: rotate(45deg); }
.jobs-row-head:hover { background: #fbfbf9; }
.jobs-row-title { overflow: hidden; font-size: var(--text-sm); text-overflow: ellipsis; white-space: nowrap; }
.jobs-row[open] .jobs-row-title { white-space: normal; }
.jobs-row-when { color: var(--color-text-muted); font-size: var(--text-xs); white-space: nowrap; }
.jobs-pill {
  padding: 2px 8px;
  border-radius: 6px;
  background: #f3f4f1;
  color: #5f6b64;
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  white-space: nowrap;
}
.jobs-row[data-state="done"] .jobs-pill { background: #e6efe8; color: #2f7a52; }
.jobs-row[data-state="failed"] .jobs-pill { background: #fbeae4; color: #b9603f; }
.jobs-row-body { display: flex; flex-direction: column; gap: 10px; padding: 0 16px 16px; }
.jobs-result { margin: 0; font-size: var(--text-sm); line-height: 1.5; white-space: pre-wrap; }
.jobs-result.is-empty { color: var(--color-text-muted); }

@media (max-width: 640px) {
  .jobs-running { grid-template-columns: 1fr; }
  .jobs-row-head { grid-template-columns: auto 1fr; }
  .jobs-row-when { grid-column: 2; }
  .jobs-crons thead { display: none; }
  .jobs-crons,
  .jobs-crons tbody,
  .jobs-crons tr,
  .jobs-crons td { display: block; width: auto; }
  .jobs-crons tr { padding: 12px 16px; }
  .jobs-crons tr + tr { border-top: 1px solid #f3f4f1; }
  .jobs-crons td { padding: 0; border-top: 0; white-space: normal; }
  .jobs-crons td:first-child { color: var(--color-text-muted); font-size: var(--text-xs); }
  .jobs-crons td:nth-child(2) { margin: 2px 0 4px; }
}