:root {
  --vs: #dc2626;
  --vsd: #b91c1c;
}

.bg-vs {
  background: var(--vs);
}

.bg-vsd {
  background: var(--vsd);
}

.text-vs {
  color: var(--vs);
}

body {
  background: #0b1220;
  color: #e5e7eb;
}

.soft {
  background: #0f172a;
  border: 1px solid #334155;
  color: #e5e7eb;
}

.card {
  background: #0b1220;
  border: 1px solid #1f2937;
}

.muted {
  color: #93a3b8;
}

.pill {
  border-radius: 999px;
  padding: .25rem .6rem;
  font-size: .75rem;
}

.ok {
  background: #16a34a;
  color: #fff;
}

.warn {
  background: #d97706;
  color: #fff;
}

.bad {
  background: #b91c1c;
  color: #fff;
}

.info {
  background: #2563eb;
  color: #fff;
}

dialog::backdrop {
  background: rgba(0, 0, 0, .6);
}

.btn {
  padding: .5rem .75rem;
  border-radius: .5rem;
}

input,
select,
textarea {
  color: #e5e7eb;
}

::placeholder {
  color: #9ca3af;
  opacity: 1;
}

label,
h2,
h3,
h4,
.tab {
  color: #ffffff;
}

/* Mejoras menores */
.btn {
  transition: background-color .15s ease, border-color .15s ease, transform .05s ease;
}

.btn:active {
  transform: translateY(1px);
}

.soft:focus {
  outline: 2px solid rgba(37, 99, 235, .35);
  outline-offset: 2px;
}

dialog {
  border: none;
}