/* Mission Control — Components */

/* ── Card ──────────────────────────────────── */
.card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  transition: border-color var(--duration) var(--ease);
}
.card:hover { border-color: var(--border-strong); }
.card-sm { padding: var(--space-4); }
.card-flat { background: var(--bg-elevated); border-color: transparent; }

/* ── KPI Card ───────────────────────────────── */
.kpi-card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-5) var(--space-6);
  transition: all var(--duration) var(--ease);
  position: relative;
  overflow: hidden;
}
.kpi-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--kpi-color, var(--accent));
  opacity: 0;
  transition: opacity var(--duration) var(--ease);
}
.kpi-card:hover { border-color: var(--border-strong); }
.kpi-card:hover::before { opacity: 1; }

.kpi-label {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: var(--space-3);
}
.kpi-value {
  font-size: var(--text-3xl);
  font-weight: 800;
  color: var(--text-primary);
  line-height: 1;
  letter-spacing: -0.02em;
}
.kpi-sub {
  font-size: var(--text-xs);
  color: var(--text-muted);
  margin-top: var(--space-2);
}
.kpi-delta {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: var(--text-xs);
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 20px;
}
.kpi-delta.up   { color: var(--green); background: var(--green-soft); }
.kpi-delta.down { color: var(--red);   background: var(--red-soft); }
.kpi-delta.flat { color: var(--text-muted); background: var(--bg-overlay); }

/* ── Semáforo ───────────────────────────────── */
.semaforo {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
}
.semaforo-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.semaforo-dot.green  { background: var(--green);  box-shadow: 0 0 8px var(--green); }
.semaforo-dot.yellow { background: var(--yellow); box-shadow: 0 0 8px var(--yellow); }
.semaforo-dot.red    { background: var(--red);    box-shadow: 0 0 8px var(--red); }
.semaforo-label { font-size: var(--text-sm); font-weight: 500; }
.semaforo-sub   { font-size: var(--text-xs); color: var(--text-muted); margin-left: auto; }

/* ── Badge ──────────────────────────────────── */
.badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: var(--text-xs); font-weight: 600;
  padding: 3px 9px; border-radius: 20px;
}
.badge-accent  { color: var(--accent);  background: var(--accent-soft); }
.badge-green   { color: var(--green);   background: var(--green-soft); }
.badge-yellow  { color: var(--yellow);  background: var(--yellow-soft); }
.badge-red     { color: var(--red);     background: var(--red-soft); }
.badge-blue    { color: var(--blue);    background: var(--blue-soft); }
.badge-orange  { color: var(--orange);  background: var(--orange-soft); }
.badge-muted   { color: var(--text-muted); background: var(--bg-overlay); }

/* ── Buttons ────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  font-size: var(--text-sm); font-weight: 600;
  padding: 8px 16px; border-radius: var(--radius-md);
  transition: all var(--duration) var(--ease);
  white-space: nowrap;
}
.btn-primary {
  background: var(--accent); color: #fff;
}
.btn-primary:hover { background: #5b58f0; box-shadow: var(--shadow-accent); }
.btn-secondary {
  background: var(--bg-elevated); color: var(--text-primary);
  border: 1px solid var(--border);
}
.btn-secondary:hover { border-color: var(--border-strong); background: var(--bg-overlay); }
.btn-ghost { color: var(--text-secondary); }
.btn-ghost:hover { color: var(--text-primary); background: var(--bg-elevated); }
.btn-sm { font-size: var(--text-xs); padding: 5px 11px; }
.btn-danger { background: var(--red-soft); color: var(--red); border: 1px solid transparent; }
.btn-danger:hover { border-color: var(--red); }

/* ── Inputs ─────────────────────────────────── */
.input-field {
  width: 100%;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  font-size: var(--text-sm);
  padding: 10px 14px;
  transition: border-color var(--duration) var(--ease);
  outline: none;
}
.input-field::placeholder { color: var(--text-muted); }
.input-field:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }

.textarea-field {
  resize: vertical; min-height: 100px;
}

.input-label {
  display: block;
  font-size: var(--text-xs); font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 0.06em;
  margin-bottom: var(--space-2);
}

/* ── Task Card ──────────────────────────────── */
.task-card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
  display: flex; gap: var(--space-3); align-items: flex-start;
  transition: all var(--duration) var(--ease);
  cursor: pointer;
}
.task-card:hover { border-color: var(--border-strong); background: var(--bg-elevated); }
.task-card.done  { opacity: 0.5; }
.task-card.done .task-title { text-decoration: line-through; }

.task-check {
  width: 18px; height: 18px;
  border-radius: 50%;
  border: 2px solid var(--border-strong);
  flex-shrink: 0; margin-top: 2px;
  transition: all var(--duration) var(--ease);
  display: flex; align-items: center; justify-content: center;
}
.task-check.checked { background: var(--green); border-color: var(--green); }
.task-check.checked::after { content: '✓'; font-size: 11px; color: #fff; font-weight: 700; }

.task-title   { font-size: var(--text-sm); font-weight: 500; color: var(--text-primary); }
.task-meta    { font-size: var(--text-xs); color: var(--text-muted); margin-top: 2px; display: flex; gap: var(--space-2); flex-wrap: wrap; }
.task-actions { margin-left: auto; display: flex; gap: var(--space-1); opacity: 0; transition: opacity var(--duration); }
.task-card:hover .task-actions { opacity: 1; }

/* Priority dots */
.priority-dot {
  width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; margin-top: 6px;
}
.priority-dot.high   { background: var(--red); }
.priority-dot.medium { background: var(--yellow); }
.priority-dot.low    { background: var(--green); }

/* ── Section header ─────────────────────────── */
.section-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: var(--space-4);
}
.section-title {
  font-size: var(--text-sm); font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase; letter-spacing: 0.06em;
}

/* ── Divider ────────────────────────────────── */
.divider { height: 1px; background: var(--border); margin: var(--space-6) 0; }

/* ── Empty state ────────────────────────────── */
.empty-state {
  text-align: center; padding: var(--space-12) var(--space-6);
  color: var(--text-muted);
}
.empty-state-icon { font-size: 32px; margin-bottom: var(--space-3); }
.empty-state p    { font-size: var(--text-sm); }

/* ── Loading spinner ────────────────────────── */
.spinner {
  width: 20px; height: 20px;
  border: 2px solid var(--border-strong);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  flex-shrink: 0;
}

/* ── Toast ──────────────────────────────────── */
#toast-container {
  position: fixed; bottom: 24px; right: 24px;
  display: flex; flex-direction: column; gap: 8px;
  z-index: 9999; pointer-events: none;
}
.toast {
  background: var(--bg-overlay);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  padding: 12px 16px;
  font-size: var(--text-sm);
  color: var(--text-primary);
  display: flex; align-items: center; gap: 10px;
  pointer-events: auto;
  animation: fadeIn 200ms var(--ease) both;
  box-shadow: var(--shadow-md);
  max-width: 320px;
}
.toast.success { border-left: 3px solid var(--green); }
.toast.error   { border-left: 3px solid var(--red); }
.toast.info    { border-left: 3px solid var(--accent); }

/* ── Modal ──────────────────────────────────── */
.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.7);
  backdrop-filter: blur(4px);
  z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  padding: var(--space-4);
}
.modal {
  background: var(--bg-surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  width: 100%; max-width: 480px;
  box-shadow: var(--shadow-lg);
  animation: fadeIn 200ms var(--ease) both;
}
.modal-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: var(--space-6);
}
.modal-title { font-size: var(--text-lg); font-weight: 700; }
.modal-close { color: var(--text-muted); font-size: 20px; line-height: 1; }
.modal-close:hover { color: var(--text-primary); }