.slt-card {
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 14px;
  padding: 18px;
  background: rgba(255, 255, 255, 0.7);
}

.slt-mini {
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 14px;
  padding: 16px;
  background: rgba(255, 255, 255, 0.7);
  display: flex;
  align-items: center;
  gap: 14px;
}

.slt-mini__kpi {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 18px;
  background: rgba(249, 99, 59, 0.12);
}

.slt-timer {
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 999px;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.7);
}

.slt-timer__value {
  font-weight: 700;
  letter-spacing: 0.5px;
}

.slt-timer__warn {
  outline: 2px solid rgba(249, 99, 59, 0.45);
  outline-offset: 2px;
}

.slt-progress {
  width: 100%;
  height: 10px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.06);
  overflow: hidden;
}

.slt-progress__bar {
  height: 100%;
  width: 0;
  background: rgba(249, 99, 59, 0.55);
}

.slt-case {
  font-size: 0.95rem;
  line-height: 1.45;
}

.slt-options {
  display: grid;
  gap: 10px;
}

.slt-option {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 12px 12px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 12px;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.55);
}

.slt-option:hover {
  background: rgba(255, 255, 255, 0.85);
}

.slt-option input {
  margin-top: 2px;
}

.slt-option__text {
  line-height: 1.35;
}

.slt-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  background: rgba(255, 255, 255, 0.7);
}

.slt-level {
  font-size: 32px;
  font-weight: 800;
  letter-spacing: 0.3px;
}

.slt-level--junior { color: #c97a00; }
.slt-level--intermedio { color: #9a8b00; }
.slt-level--avanzado { color: #1f8f4a; }

.slt-table td,
.slt-table th {
  vertical-align: middle;
}

.slt-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.slt-link {
  text-decoration: none;
}

.slt-link:hover {
  text-decoration: underline;
}
/* =========================================
   Dark mode overrides (Scrum Level Test)
   Soporta body.dark-mode y [data-theme="dark"]
   ========================================= */

body.dark-mode .slt-card,
body.dark-mode .slt-mini,
body.dark-mode .slt-timer,
body.dark-mode .slt-pill,
[data-theme="dark"] .slt-card,
[data-theme="dark"] .slt-mini,
[data-theme="dark"] .slt-timer,
[data-theme="dark"] .slt-pill {
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  color: rgba(255, 255, 255, 0.92) !important;
}

body.dark-mode .slt-mini__kpi,
[data-theme="dark"] .slt-mini__kpi {
  background: rgba(249, 99, 59, 0.18) !important;
  color: rgba(255, 255, 255, 0.92) !important;
}

body.dark-mode .slt-progress,
[data-theme="dark"] .slt-progress {
  background: rgba(255, 255, 255, 0.10) !important;
}

body.dark-mode .slt-progress__bar,
[data-theme="dark"] .slt-progress__bar {
  background: rgba(249, 99, 59, 0.60) !important;
}

body.dark-mode .slt-option,
[data-theme="dark"] .slt-option {
  background: rgba(255, 255, 255, 0.04) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  color: rgba(255, 255, 255, 0.92) !important;
}

body.dark-mode .slt-option:hover,
[data-theme="dark"] .slt-option:hover {
  background: rgba(255, 255, 255, 0.08) !important;
}

body.dark-mode .slt-case,
body.dark-mode .slt-option__text,
body.dark-mode .slt-table,
body.dark-mode .slt-table td,
body.dark-mode .slt-table th,
[data-theme="dark"] .slt-case,
[data-theme="dark"] .slt-option__text,
[data-theme="dark"] .slt-table,
[data-theme="dark"] .slt-table td,
[data-theme="dark"] .slt-table th {
  color: rgba(255, 255, 255, 0.90) !important;
}

body.dark-mode .slt-link,
[data-theme="dark"] .slt-link {
  color: rgba(255, 255, 255, 0.88) !important;
}