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

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

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

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

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

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

.soft:focus {
  outline: 0;
  border-color: #60a5fa;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, .35);
}

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

.dropzone {
  border: 1px dashed #475569;
}

.dz-hover {
  border-color: #60a5fa;
  background: #0b2440;
}

.chip {
  padding: 0.25rem 0.5rem;
  border-radius: 999px;
  font-size: 0.75rem;
}

.tab-btn {
  border-bottom: 2px solid transparent;
}

.tab-btn.active {
  border-color: var(--vs);
  color: #fff;
}

.table-head th {
  position: sticky;
  top: 0;
  background: #0b1220;
}

.cell-num {
  text-align: right;
}

.muted {
  color: #cbd5e1;
}

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

/* === Modal Editar modelo === */
#dlg {
  color: #fff;
}

#dlg input,
#dlg select,
#dlg textarea,
#dlg label,
#dlg .dropzone,
#dlg .table-head th,
#dlg summary,
#dlg details,
#dlg .muted {
  color: #fff;
}

#dlg input::placeholder,
#dlg textarea::placeholder {
  color: #94a3b8;
}

#dlg .soft {
  color: #fff;
}